12 CSS Best Practices by Twitter

This content originally appeared on DEV Community and was authored by Pritam Patil

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

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

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

4. Avoid specifying units for zero values.

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

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.

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

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

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

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.

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.

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

...

Follow me on twitter or Github.

This content originally appeared on DEV Community and was authored by Pritam Patil

Print Share Comment Cite Upload Translate Updates

APA

Pritam Patil | Sciencx (2021-06-20T18:31:15+00:00) 12 CSS Best Practices by Twitter. Retrieved from https://www.scien.cx/2021/06/20/12-css-best-practices-by-twitter/

MLA

" » 12 CSS Best Practices by Twitter." Pritam Patil | Sciencx - Sunday June 20, 2021, https://www.scien.cx/2021/06/20/12-css-best-practices-by-twitter/

HARVARD

Pritam Patil | Sciencx Sunday June 20, 2021 » 12 CSS Best Practices by Twitter., viewed ,<https://www.scien.cx/2021/06/20/12-css-best-practices-by-twitter/>

VANCOUVER

Pritam Patil | Sciencx - » 12 CSS Best Practices by Twitter. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/06/20/12-css-best-practices-by-twitter/

CHICAGO

" » 12 CSS Best Practices by Twitter." Pritam Patil | Sciencx - Accessed . https://www.scien.cx/2021/06/20/12-css-best-practices-by-twitter/

IEEE

" » 12 CSS Best Practices by Twitter." Pritam Patil | Sciencx [Online]. Available: https://www.scien.cx/2021/06/20/12-css-best-practices-by-twitter/. [Accessed: ]

rf:citation

» 12 CSS Best Practices by Twitter | Pritam Patil | Sciencx | https://www.scien.cx/2021/06/20/12-css-best-practices-by-twitter/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.