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.)

Discussion (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
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.

Collapse
joshuaamaju profile image
Joshua
  • 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ć Author • Edited on

You'll be surprised about !important. 😳