DEV Community

loading...

Discussion on: What's your favorite CSS approach?

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.