DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for 12 CSS Best Practices by Twitter
Pritam Patil
Pritam Patil

Posted on • Updated on

12 CSS Best Practices by Twitter

  1. When grouping selectors, keep individual selectors to a single line.single-line-selectors

  2. Don't prefix property values with a leading zero.
    leading-zero-prefix

  3. Lowercase all hex values and use shorthand hex values whenever possible.shorthand-hex

  4. Avoid specifying units for zero values.no-units-zero

  5. Related property declarations should be grouped together following the order: position, box-model, typography, visual. misc.declaration-order

  6. Don't use !important - It is a last resort generally and only use when you need to override something and there is no other way. Instead increase the specificity of the selector.no-imp-use-specificity

  7. When a rule set includes only one declaration, consider removing line breaks for readability and faster editing.single-declare-no-line-break

  8. Limit shorthand declaration usage to instances where you must explicitly set all available values.shorthand-declare-limit

  9. Ensure your code is descriptive, well commented and approachable by others. Great code comments convey context and/or purpose.good-comments

  10. Class names:
    a. Keep them lowercase and use dashes to separate words
    b. Avoid excessive shorthand notation. (.btn is fine, .s is not)
    c. Use meaningful names: use structural or purposeful names over presentation.
    d. Prefix classes based on the closest parent or base class.classname-rules

  11. Selectors:
    a. Use classes over generic element tag for optimum rendering performance.
    b. Avoid using several attribute selectors (e.g. [class^="..."]) on commonly occurring components. Browser performance is known to be impacted by these.
    c. Keep selectors short and strive to limit the number of elements in each selector to three names over presentational.selector-rules

  12. Place media queries as close to their relevant rule sets whenever possible.media-query-rule

...

Follow me on twitter or Github.

Top comments (11)

Collapse
 
maxart2501 profile image
Info Comment hidden by post author - thread only accessible via permalink
Massimo Artizzu

Suggestion: if you want to write a "best practices" article, also explain the why of each one. There's so much to learn and it might not be seem evident. We don't need to be dogmatic about things.

Collapse
 
pritampatil profile image
Pritam Patil Author

Most of these are self-explanatory. Pls let me know the ones you didn't understand, I'll try my best to explain those.

Collapse
 
maxart2501 profile image
Massimo Artizzu

Most of these are self-explanatory
I beg to differ.

I've pretty much seen each one of these hints and I know the reasons behind them, so personally I don't need a further explanation. Mind you, they're not bad advices at all, but the point is that for a beginner they might seem dogmatic.

Especially if you consider the goal of these practices. For example, the first one is about readability, but the second advice actually makes the code less readable - although more compact. Other practices are about code organization, others about performances, one is also about a common pitfall. This is all quite jarring.

In the end, my personal suggestion is that you shouldn't assume something you say is "self-explanatory" when directing at the general public, since the reader's experience may vary. A lot.

Thread Thread
 
pritampatil profile image
Pritam Patil Author

You've made your point. I agree with all the things concerning you.

I just hope the guys who don't understand the points mentioned in the post, they can always comment on the post to seek guidance/explanation.
That way it only underlines that, we are a dev "community"!

Collapse
 
cteyton profile image
CΓ©dric Teyton

Great content Pritam!

I've submitted your content to a Public Hub of best coding practices, here is the link.

Collapse
 
leanderd profile image
Leander Dirkse

Just want to let you know that #3 is not lowercase in the image.
And while I agree with the tips (and I have been doing it like this for a long time already), I also agree with Massimo. It would be good to explain why.

Another tip: there are also linters available that can help you with sticking to a specific style. Like stylelint.

Collapse
 
pritampatil profile image
Pritam Patil Author

Thanks for pointing out the issue. Updated it!

Collapse
 
ayabouchiha profile image
Aya Bouchiha

Amazing article !

Collapse
 
pritampatil profile image
Pritam Patil Author

Thank you Aya!

Collapse
 
wadecodez profile image
Wade Zimmerman • Edited on

#2 is surprising because leading zeros enhance readability. What is the reasoning behind no leading zero?

Collapse
 
pritampatil profile image
Pritam Patil Author

In that case honestly I don't think there is much difference between one and the other. It comes down to personal/team preference. Remember these are just guidelines/best practices followed by a specific team.

Some comments have been hidden by the post's author - find out more

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.