3 ways to write better CSS

CSS can be annoying to write and difficult to optimize, but in this article, we will go over the different ways of writing better and cleaner CSS.

1. CSS Component Framework (Boostrap , MaterlizeCSS)

A CSS Component Framework is just a bunch of pre-written classes to handle things like buttons, cards, dropdowns, etc, Example include Boostrap, MaterlizeCSS, Foundation, etc. The main advantage of this is that you have access to a lot of components and might just need very little custom CSS. This is great for people who are building powerful apps whose purpose is functionality and who do not have time to write custom CSS. The main disadvantage is that it does not really offer flexibility to write custom CSS.

Making a Button with a Component Framework

<button class='btn blue'>Click me</button>

2. CSS Utility Framework (tailwindcss)

A CSS Utility Framework is a bunch of low-level classes(like

.text-2xl

) that allows you to build custom components like buttons, cards, dropdowns, etc, A popular Example of this is tailwindcss. The main advantage of tailwindcss is that it allows combining low-level classes to build custom UIs and it has a design specification. You might be thinking, who has time to remember those classes, well you do not have to memorize them because there is a vs code extension that can help you out. The main disadvantage of tailwindcss is that building custom components takes time and the setup tailwind is a bit of a hassle.

Making a Button with a Utility Framework

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">
  Button
</button>

3. A CSS Preprocessor (Sass)

A CSS Preprocessor Is a program that allows you to write styles in another language and convert them to CSS. A popular example of this is Sass/Scss, with sass you can nest styles do functions, loops and etc. The main advantage of sass is that it provides you with a more stable, powerful, and robust superset of CSS. The main disadvantage is that the code has to be complied and it is a bit difficult to debug.

Making a Button with a CSS Preprocessor (Sass)

   /*mixins are like  functions*/
@mixin button-bg($bg) {
   /* takes and argument $bg*/
 background: $bg;

 color:white;
 text-decoration:none;
 padding:5px 10px;
 border-radius:3px;
 font-family: 'Poiret One', cursive;
 font-size:2em;
   /*hover state */
  &:hover {
    background:darken($bg,8%);
    transition: all 0.3s ease;
  }
  /* active state */
  &:active {
    background:darken($bg,25%);
  } 
}

.btn-green {
   @include button-bg(#2ecc71);

}

in conclusion

I would recommend component frameworks for people who do not have time to write custom CSS. I would recommend utility frameworks for anyone who wants to build custom UIs and with a design spec, and I would recommend Preprocessors for anyone who loves writing CSS but wants some extra features. Those are some ways to deal with CSS, if missed any other way please tell me in the comment section. Thanks for reading see you next time, peace.