DEV Community

Discussion on: 8 SCSS Best Practices to Keep in Mind

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

Some other things that I've picked up at my current place:

  • alphabetise properties. This ensures you always avoid things like background overriding background-image. The exception is when using prefixed properties (-webkit-*, -moz-*, etc), which should be grouped together.
  • avoid the shorthand if you're only setting a specific property. Using background: url(…); will override any existing background colour.
  • don't nest selectors too deep. A rough rule of 3 or so should be kept to unless absolutely necessary.
Collapse
 
dbkup profile image
Boki

I like the alphabetization of properties, some people don't like it, but for me it works. With regards to prefixed properties, I would strongly suggest not doing that manually but defining autoprefixer rules.

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

I agree with that, although there are times when you might need to manually specify prefixed properties, e.g. to offer a slightly different experience to some browsers