HTML SCSS Vanilla JS

Community feedback

• 

  Devmor•470

  @devmor-jPosted over 2 years ago

  Hey 🙋‍♂️ great job on completing this challenge.

  In my opinion no matter how good you are at naming CSS classes, it usually ends up in a mess!

  If you are familiar enough with CSS and have good styling skills, maybe it's time to use a framework like TailwindCSS. At least worths a try.

  This framework changed the way I write CSS and I am still happy with it.

  For example instead of using display: flex on tons of classes and ship a bunch of classes that share properties, Tailwind just inserts one class named flex on your element and that class is used on any other element with a flex class on it.

  This code below is a div element with a .container class on it:

  <div class="container">
      ... // children elements
  </div>
  
  >> inside style.css
  .container {
      display: flex;
      ... // other properties
  }
  
  

  Tailwind version of that is:

  <div class="flex ...{other classes}">
      ... // children elements
  </div>
  

  And in build process Tailwind will add those classes in a css file:

  >> inside style.css
  .flex {
      display: flex;
  }
  ... // other classes (almost atomic classes - meaning only one property at a time is declared)
  

  Now you don't even name a class just use what you need.

  Please note there are other similar frameworks like WindiCSS and UnoCSS as well but currently TailwindCSS is the standard utility-first CSS framework in terms of adoption (personal opinion).

  Hope this helps and cheers 😄

  0