5 CSS methodologies and libraries to help keep your visual components organized
Styling with CSS can be difficult to maintain as the app grows. With more visual assets to coordinate and keep track of, it's easy to lose selectors and create conflicting rules. Keeping organized can help reduce visual errors and ensure that your styles remain consistent.
CSS structural frameworks are ways to keep your code organized through a series of standardization methods. Here is a quick rundown of 5 different CSS frameworks and methodologies to help you keep track of your styles, their application, and prevent conflicts in the future.
#1. CSS BEM methodology
BEM stands for Block-Element-Modifier. It is a methodology that breaks down your visual elements into three parts - the block, the element, and the modifier.
A block is defined as a UI element that is self-contained. An element extends the block and is more specific in its application. A modifier is an overarching piece of CSS that has the ability to extend both an element and a block.
Here is an example of a block:
Here is an example of an element (extending
Here is an example of a modifier on
Advantages of BEM
- You get scoping and relationships through the naming convention
- You get flexibility through the ability to extend visual features by stacking the selectors
- You still get specific applications of CSS for certain elements without impacting related classes
Disadvantages of BEM
- The selectors can pollute your HTML with large and long class names. Here is an example:
#2. SCSS (Sassy CSS)
SCSS, or Sassy CSS, gives developers the ability to programmatically create CSS rules with nesting to variables to make it less linear in its application. What this means is that developers have the ability to use references and inheritance rules that are more scoped and more akin to programming than single-level CSS rules.
SCSS is a preprocessor, which means that you will also need to compile it separately and will not work on its own without it.
Here is an example of what SCSS looks like:
Based on the example above, when compiled, the
.avatar class will also inherit CSS from the
Advantages of SCSS
- Clean and readable
- Minifies better than BEM
Disadvantages of SCSS
- Introduces an extra build step
Instead of an external CSS file, the styles are actually an object created by
createUseStyles function, and these styles live in the same file. This allows your related code to be collocated in one place. You simply use these styles as a hook in your
card component or you can destructure classes from it and directly use them.
Advantages of JSS
- All relevant styles co-located in one place
- Great for design systems
- SCSS like syntax
Disadvantages of JSS
- Less performant. CSS being populated by JS rather than put into an external stylesheet can make the overall experience slower.
styled() to set the styling and its associated class name. Here is an example of a CSS object applied to a component.
Advantages of Goober
Lightweight to integrate as it is only a 1KB library.
Extract CSS into styled tags during build time for enhanced performance.
Disadvantages of Goober
Similar to Goober, Linaria uses a similar
styled-component structure. However, unlike Goober, Linaria compiles a separate CSS stylesheet and doesn't include itself in the final bundle.
Here is an example code snippet of CSS with Linaria:
Advantage of Linaria
Disadvantage of Linaria
- Linaria isn't fully compatible with all the build tools.
CSS can make or break the visual experience of a user. The ability to keep track and maintain CSS has always been a problem for big projects. As interfaces increases in complexity, so do the number of rules that require maintenance.
Keeping CSS organized and centralized is a work in progress for many projects. Hopefully one of the above libraries and CSS methodologies can help reduce the pain of stray classes and stylesheets.