CSS: From Chaos to Order

• css-loader

  10 4,283 7.6 JavaScript

  CSS Loader

  

@fbem/css-loader is very similar to css-loader (and actually a fork of it) and has almost the same set of options and functionality. You can even use it with different style preprocessors by simply chaining loaders together in webpack config. But be sure to pick up if you need them 😏.

• css-modules

  86 17,368 5.5

  Documentation about css-modules

  

You probably know what css-loader is and how it allows you to work with CSS modules. If this is not the case, then let me remind you what it is using the example of a React component:

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• classnames

  94 17,360 8.4 JavaScript

  A simple javascript utility for conditionally joining classNames together

Also, it is not difficult to guess that in order to work with modifiers, we need some kind of auxiliary tool so as not to manually concatenate classnames. In the example above, the classnames NPM package serves as such a tool. Pay attention to popularity - 11M downloads/week.

• fbem

  1 7 4.2 TypeScript

  Functional BEM packages 🧱

In this article I showed a method (and tools for implementing this method) of organizing styles in a project. More information can be found in the project's GitHub repository. PR/star welcome :) I hope I managed to interest you in my experiments in optimizations of writing styles process. Also, I hope you enjoyed the article and would be grateful if you could share it with someone.

Suggest a related project