A methodology is a standard for writing CSS in such a way that it can be maintained and read by other team members or third-party developers. In other words, they are rules that will be understandable to someone from the outside so that they can understand the code without the author and make edits. Recommendations for writing this are called CSS methodologies.
To date, a universal methodology does not exist. Some of them are outdated, some are more actively used than others, and soon there may be new, more sophisticated methodologies. The two most popular are.
Atomic CSS. This methodology creates a set of classes – tools that unify the rules. Classes are combined directly in the block of HTML, that is, the styles of elements are not defined in CSS. Thus, the task of the codifier is facilitated, because he does not need to switch between contexts.
For example, in any project there are values:
padding – internal indents on all sides of the element;
margin – the outer indent from all sides of the element.
This methodology is useful for large projects, as you can create not a single interface, but an entire design system that can be reused.
CSS-in-JS. This methodology suggests that instead of connecting CSS files, you connect a single JS module to HTML, in which you can take advantage of the JavaScript language. The advantage of this approach is that CSS is more powerful because you can use absolutely all of its features without any limitations.
Another advantage of CSS-in-JS is that it reduces the amount of code and the number of files. For example, in this methodology, you definitely don’t have to create a separate CSS file for one small component with 2-3 rules. In other methodologies there are a lot of such files.
Methodology CSS-in-JS is primarily designed for developers to improve the quality of DX (Developer Experience), which, in turn, will affect the comfort of users – UX (User Experience). And these phenomena are really directly related, because the more comfortable it is for developer to work – without bugs and crutches – the better interface functionality we get.