DEV Community

Daniel Zilli
Daniel Zilli

Posted on

From Component-First to Utility-First with Brevis CSS

The choice of a CSS toolkit is surrounded by beliefs that may not always sustain a logical argument. Most of the time, it comes down to a personal decision. Either from you or your boss. To help those that need to decide which CSS toolkit to use or try next, here are my four reasons why you should try Brevis:

  1. Maybe you don't need Brevis. If you are comfortable with your current toolkit and you get things done, why bother? If your project doesn't require any special technicality, why spending time on something you don’t need, right? But, if you have a pinch of curiosity and the desire to improve your CSS as a developer, then, maybe you should give Brevis a chance. Brevis will show you a new way of getting things done. A better, faster and simpler way.

  2. One of Brevis greatest feature is the ability to generate lean code. It means that you don't need to worry about the unused CSS burden. Simply, because you are the one that's creating the UIs and it's not the toolkit. With Brevis, you have full control of what you are building. Obviously, this feature is only relevant for those who care about performance and page load time.

  3. We all know that naming things is hard. And component-first (CF) toolkits don't make any easy. Even methodologies like BEM cannot help you much (it can actually get worse), because now you need to name three things! So, the great thing about Brevis is that no naming is needed at all. That's a big win for utility-first (UF) toolkits like Brevis, over CF ones.

  4. The benefits of Brevis over CF toolkits will become clearer once you start coding. For CF toolkits, the majority of the duplicated code occurs when you need to create custom styles. A simple navbar is a good example. If you don't want to use the default navbar style, you will have to overwrite the code with your own style. And when you do that, you create duplicated code. That goes for every component from a CF toolkit that you want to custom style. And more. Over time, this approach will lead to that unused CSS you don't dare to remove. Brevis is different. It saves you from all this madness by being neutral. There's no default style to dictate how things should look. Meaning, no overwrite will happen, ever!

When you need speed, robustness and lean code, Brevis is a front runner among CSS toolkits. The benefits of moving from CF toolkits (like Bootstrap, Bulma or Materialize) to UF ones like Brevis are tangibles. But you need to try Brevis by yourself, because it's the only way for you to take full advantage of the benefits. Brevis is as simple as a single CSS file. No dependency or setup needed. Just use it!

You can find much more about Brevis at or GitHub repository.

Top comments (0)