50 CSS Best Practices & Guidelines to Write Better CSS

Image for post
Image for post

1 — Use a Preprocessor

2 — Separate global vs local style

3 — Modularize your style

4 — Lazy load stylesheets correctly

5 — Be specific & not too specific

6 — Read CSS as the Browser does

7 — Style with HTML in mind for better performance

#main-navigation          /* ID (Fastest) */ 
body #page-wrap /* ID */
.main-navigation /* Class */
li a.nav-link /* Class *
div /* Tag (Slow)*/

nav ul li a /* Tag (Slower)*/
* /* Universal (Slowest) */
[disabled] /* Universal */

8 — Avoid inline styles

9 — Avoid !important

10 — Write CSS consistently

11 — Use a design system

12 — Prefer shorthand

13 — Combine common styles

14 — Turn common tricks into utility classes

15 — Use relative units more

16 — Be aware of expensive properties

17 — Minimize layout modification styles

18 — Use “will-change” as a last resort

19 — Comment your CSS

20 — Normalize or Reset your CSS

21 — Consider better font loading strategy

22 — Avoid too many font files

23 — Minimize CSS

24 — Use CSS variables

25 — Don’t remove the outline property, style it!

26 — Don’t introduce a CSS library/Framework unnecessarily

27 — Use double quotes

28 — Avoid hard to maintain hacks

29 — Format Text with CSS

30 — Validate CSS

31 — Style to be responsive or at least fluid

32 — Let the content define the size

33 — Follow a CSS methodology

Image for post
Image for post

34 — Avoid constantly overwriting/undoing style

35 — Add animation declarations last

36 — Don't mix third-party CSS overwrites with yours

37 — Specify the properties you need transition for

38 — Avoid using id attributes everywhere

39 — Be aware of styles order

40 — Lint your style

41 — Alphabetize CSS properties

42 — Box size border-box everything

43 — Avoid color names

44 — Let the parent take care of spacing, position, and sizing

45 — Try to organize CSS to match the Markup Order

46 — Keep HTML semantics and use CSS for styling

47 — Hyphens or underscore?

48 — Find a CSS solution before you reach for Javascript Help

49 — Remove Unused CSS

50 — Use a PostProcessor

Conclusion

Written by

Blog & YouTube Channel for Web, UI & Software Development

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store