60 CSS Coding Style Guide

Examples For Developers

James Anderson October 14, 2016

CSS files. They can get messy and unreadable real fast.

There are plenty of guides and tutorials out there on how best to write
maintainable and clean code. Obviously important if you are working in a
team on a large project.

But does it really matter when you are a one person operation, working
on small client projects like portfolio sites?

“Whilst styleguides are typically more suited to product teams—large

codebases on long-lived and evolving projects, with multiple
developers contributing over prolonged periods of time—all
developers should strive for a degree of standardisation in their code”.
-Harry Roberts

You can come up with a list of rules to follow that make sense for
yourself, but itʼs a good idea to see what best practices other developers
are using.

Here is a list of css coding standards best practices I compiled showing

examples of what other people consider good CSS and bad CSS.

1. Harry Robertsʼ CSS Guidelines is probably the best resource available.

It is well thought out, comprehensive and clearly explained. It is also
possibly the only guide you need to consult.

2. Code Guide by @mdo (Mark Otto, director of Design at GitHub).

Heavily inspired by Idiomatic CSS and the GitHub Styleguide.

3. WordPress.Org CSS Coding Standards “Above all else, create code

that is readable, meaningful, consistent, and beautiful.”
4. Rizzo: Lonely Planetʼs Style Guide. Also check out this post by Ian
Feather, an explanation of the principles behind Rizzo, their Living Style
Guide.

5. Code Style Guide: CSS from Thinkup.com (now shutdown, but the
style guide at Github is still valuable).

6. Mapbox CSS Styling Guide https://www.mapbox.com/base/styling/

7. Airbnb CSS / Sass Styleguide “A mostly reasonable approach to CSS

and Sass”. Advises to not use ID selectors.

8. Solid is BuzzFeedʼs CSS style guide. Influences from frameworks like

Basscss. Uses atomic CSS classes for consistent styling options.

9. Mozilla Developer Network CSS Style Guide

10. Great article detailing the history and evolution of Medium.comʼs CSS
styling. Contains complete CSS style guides from 4 different eras.

11. The Salesforce Lightning Design System‘s markup and style guide.

12. Fontshop.comʼs styleguide is more of a pattern-level graphical design

library, but the CSS naming conventions are of interest.

13. Principles of writing consistent, idiomatic CSS by Nicolas Gallagher.

“Part of being a good steward to a successful project is realizing that
writing code for yourself is a Bad Idea™. If thousands of people are using
your code, then write your code for maximum clarity, not your personal
preference of how to get clever within the spec.” – Idan Gazit

14. Harry Robertsʼ 2012 article My HTML/CSS coding style on his CSS
Wizardry site is mostly out of date, but still instructive.

15. Scalable and Modular Architecture for CSS (SMACSS) by developer

Jonathan Snook is an online book on topics related to CSS architecture.
Sections are relatively short and easy to digest.
16. CSS coding conventions by Stoyan Stefanov; Facebook engineer, ex-
Yahoo, architect of the YSlow 2.0 performance tool and creator of the
smush.it image optimization tool.

17. Drupal.org CSS Coding Standards. CSS coding guide and best
practices for Drupal.

18. postcss-style-guide is an NPM packaged PostCSS plugin that will

generate a style guide automatically.

19. CSS and LESS Coding Standards from Run Open Code.

20. The Moodle LMS CSS coding style guide describes style guidelines
for developers working on or with Moodle code.

21. A style guide for CSS across all jQuery projects.

https://contribute.jquery.org/style-guide/css/

22. CKAN CSS coding standard doc. (CKAN is an open-source tool for
making open data websites).

23. MediaWiki Coding conventions for CSS.

24. Sass Guidelines by Hugo Giraudel. An opinionated styleguide for

writing sane, maintainable and scalable Sass. Pretty comprehensive, and
has a nice TL;DR for shorter attention spans.

25. Plataformatec CSS Guidelines. A Brazilian agile development agency.

26. Magento LESS coding standard. Defines Magento internal

requirements for code formatting and style for teams that develop LESS
and CSS code.

27. An Auto-Enforceable SCSS Styleguide Powered by SCSS-Lint. By

frontend web developer David Clark.

28. BBC Cascading Style Sheets (CSS) Standard. describes the use of
Cascading Style Sheets on bbc.co.uk web pages.
29. The Guardianʼs Base CSS style guide.

30. Yelpʼs SCSS styleguide covers mixins for flexbox, animations, grids
and other markup.

31. CSS features and coding standards for Phabricator, a set of tools for
developing software.

32. Subvisualʼs CSS/Sass Project Architecture and Styleguide.

33. 18F CSS coding styleguide. 18F is an office inside the U.S. General
Services Administrationʼs Technology Transformation Service that helps
other federal agencies build, buy, and share efficient and easy-to-use
digital services.

34. Trelloʼs CSS Guide on GitHub. “CSS guides are a big deal, hugely
important. If you donʼt have a CSS guide, you should be panicking,”
writes Bobby Grace in a post about the style guide.

35. Oracleʼs JavaFX CSS Reference Guide.

36. Lemonlyʼs CSS/SCSS Style Guide. South Dakota-based design

agency.

37. Styleguide for Primer, GitHubʼs internal CSS framework. And a 2014
post by Mark otto on GitHubʼs CSS.

38. Polymer uses shadow DOM styling rules for providing styling of the
elementʼs local DOM.

39. Scss-Styleguide with BEM, OOCSS & SMACSS by Frontend-Designer

Tim Hartmann.

40. Interview with designer Jenn Lukas on Developing a Living Style

Guide with CSS

41. Backdrop CMS CSS Coding Standards

42. Web developer Pete Goodmanʼs CSS Coding Standards from 2008.
Outdated by included for historical reference.

43. Knyle Style Sheets (KSS) attempts to provide a methodology for

writing maintainable, documented CSS within a team. Specifically, KSS is
a documentation specification and styleguide format. It is not a
preprocessor, CSS framework, naming convention, or specificity
guideline.

44. DocumentCSS makes it easy to incorporate style documentation as

part of your design workflow. Using a combination of custom tags and
markdown, DocumentCSS parses coments on your CSS, Less, or SASS
and autogenerates a site with your documentation.

45. CSS code standards from the UX Team at Fellowship Technologies

46. Mark Brown, front end developer form Melbourne has a css style
guide on his site. http://www.yellowshoe.com.au/standards/#css

47. Sass Style Guide by Chris Coyier of css-tricks.com

48. Googleʼs CSS styleguide

49. Guidelines and best practices for the front-end web development
team at Isobar.

50. Money Advice Service CSS Styleguide

51. Personal style guide for oli.jp, website of Oli Studholme, a designer in
Osaka, Japan.

52. Guilherme Rv Coelhoʼs opinionated CSS styleguide for scalable

applications.

53. Dropbox (S)CSS Style Guide. “Every line of code should appear to be
written by a single person, no matter the number of contributors.” —
@mdo
54. Reasonable System for CSS Stylesheet Structure. “Styling CSS
without losing your sanity”

55. How we do CSS at Ghost. 2014 post.

56. Appfolioʼs CSS architecture by Philip Walton

57. 25 CSS best practices we follow at Innofied.

58. PrestaShop Css coding standards

59. MaintainableCSS – online book by Adam Silver that details an

approach to architecting and writing CSS that helps you and your team
write modular, scalable and maintainable code

60. Comment Standards in SASS and LESS by Anatoliy Vorobyov, Drupal

Developer

TL;DR: For most people, just read the guide linked to in #1 and follow the
recommendations. Use them as a baseline to develop your own personal
CSS coding style standard.