DEV Community

loading...

Discussion on: What's your favorite CSS approach?

Collapse
darkwiiplayer profile image
DarkWiiPlayer • Edited

My personal rules of thumb:

  • Vanilla CSS
  • Axiomatic CSS whenever possible
  • Prefer describing to naming (nth-child(1) over .item-1)
  • Classes should be semantic (otherwise use attribute selectors)
  • Avoid frameworks, they are garbage
  • CSS-in-JS should be aggressively refactored into CSS as soon as it becomes complex

As a result, I consider the following a code smell:

  • More than a few elements have classes
  • More than very few id-selectors
  • Long selector chains
  • More than one class / id in one selector
  • Stylesheets that would be very hard to rewrite without a preprocessor
Collapse
moopet profile image
Ben Sinclair

That's pretty much exactly my POV except I do enjoy nesting things with Sass.

Collapse
darkwiiplayer profile image
DarkWiiPlayer

There's nothing wrong with nesting things; it's just that nesting makes it very easy to hide structural problems because you don't have to manually write long selector chains. In plain CSS it's more obvious when you're being way too specific.

Collapse
gsarig profile image
Giorgos Sarigiannidis

I agree on nesting. I enjoy it on SASS, but I try to keep it under control and style elements mostly on a first-level basis, as it makes it easier to override styles on specific occasions or move entire components between projects.

Also:

  • I try to avoid styling based on tag names. Eg. instead of styling h2, p, or figure, I prefer to assign specific classes. That way it is easier to change the markup if needed without affecting the appearance.
  • I try to keep the markup as clean as possible, avoiding empty spans for decoration purposes, and prefer ::before & ::after pseudoelements instead.
  • I try to avoid using "all" in transitions and prefer to use only the properties that actually need the effect (e.g. an opacity), as it should be more performant.
Collapse
darkwiiplayer profile image
DarkWiiPlayer

I try to avoid styling based on tag names [...] I prefer to assign specific classes.

That's precisely what I mean when I say prefer describing to naming: write selectors that describe an element (its tag name, position, its parents, etc.) instead of specifically naming them (aka. class and id selectors). That way you keep styling and markup clearly separated.

I try to avoid using "all" in transitions

Never used that and actually didn't even know that was a thing until recently.