DEV Community

Silvestar Bistrović
Silvestar Bistrović

Posted on

How to measure/determine the quality of the CSS code?

I hope we have CSS enthusiasts here.
I wonder how you would answer the following question:
How to measure/determine the quality of the CSS code?

These are my favorites:

  • File size
  • File structure (for Sass or similar)
  • Usage of inline CSS code
  • Number of !importants
  • Usage of modern features (Variables, Grid, Flexbox, etc.)

Latest comments (4)

Collapse
 
sargalias profile image
Spyros Argalias

As some of the previous answers mention:

  • Low specificity selectors
  • Component-based styles

Basically use BEM (lowest possible specificity selectors and component-based styling) or something like Tailwind CSS (reusable classes without overriding styles everywhere).

Collapse
 
joshuaamaju profile image
Joshua Amaju
  • Usage of low/high specificity selectors.
  • Styles with less noise
  • Readable styles (is readable top to bottom)

Forgotten that !important still exists.

Collapse
 
starbist profile image
Silvestar Bistrović • Edited

You'll be surprised about !important. 😳

Collapse
 
mattryanmtl profile image
Matt Ryan

If the css is modular, reusable and scalable.

How large the custom stylesheet is in terms of file-size.

Use of external css frameworks like Bootstrap or Foundation.

For large projects, if a preprocessor like Sass or Less is being implemented with properly organized functions, mixins, variables, etc.