CSS files 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?
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.
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.
Best Of The Rest CSS Guides
Code Guide by @mdo (Mark Otto, director of Design at GitHub). Heavily inspired by Idiomatic CSS and the GitHub Styleguide.
WordPress.Org CSS Coding Standards “Above all else, create code that is readable, meaningful, consistent, and beautiful.”
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.
Code Style Guide: CSS from Thinkup.com (now shutdown, but the style guide at Github is still valuable).
Mapbox CSS Styling Guide https://www.mapbox.com/base/styling/
Airbnb CSS / Sass Styleguide “A mostly reasonable approach to CSS and Sass”. Advises to not use ID selectors.
Solid is BuzzFeed’s CSS style guide. Influences from frameworks like Basscss. Uses atomic CSS classes for consistent styling options.
Mozilla Developer Network CSS Style Guide
Great article detailing the history and evolution of Medium.com’s CSS styling. Contains complete CSS style guides from 4 different eras.
The Salesforce Lightning Design System’s markup and style guide.
Fontshop.com’s styleguide is more of a pattern-level graphical design library, but the CSS naming conventions are of interest.
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
Harry Roberts’ 2012 article My HTML/CSS coding style on his CSS Wizardry site is mostly out of date, but still instructive.
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.
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.
Drupal.org CSS Coding Standards. CSS coding guide and best practices for Drupal.
postcss-style-guide is an NPM packaged PostCSS plugin that will generate a style guide automatically.
CSS and LESS Coding Standards from Run Open Code.
The Moodle LMS CSS coding style guide describes style guidelines for developers working on or with Moodle code.
A style guide for CSS across all jQuery projects. https://contribute.jquery.org/style-guide/css/
CKAN CSS coding standard doc. (CKAN is an open-source tool for making open data websites).
MediaWiki Coding conventions for CSS.
Sass Guidelines by Hugo Giraudel. An opinionated style guide for writing sane, maintainable, and scalable Sass. Pretty comprehensive, and has a nice TL;DR for shorter attention spans.
Plataformatec CSS Guidelines. A Brazilian agile development agency.
Magento LESS coding standard. Defines Magento internal requirements for code formatting and style for teams that develop LESS and CSS code.
An Auto-Enforceable SCSS Styleguide Powered by SCSS-Lint. By frontend web developer David Clark.
BBC Cascading Style Sheets (CSS) Standard. describes the use of Cascading Style Sheets on bbc.co.uk web pages.
The Guardian’s Base CSS style guide.
Yelp’s SCSS styleguide covers mixins for flexbox, animations, grids and other markup.
CSS features and coding standards for Phabricator, a set of tools for developing software.
Subvisual’s CSS/Sass Project Architecture and Styleguide.
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.
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.
Oracle’s JavaFX CSS Reference Guide.
Lemonly’s CSS/SCSS Style Guide. South Dakota-based design agency.
Styleguide for Primer, GitHub’s internal CSS framework. And a 2014 post by Mark Dotto on GitHub’s CSS.
Polymer uses shadow DOM styling rules for providing styling of the element’s local DOM.
Scss-Styleguide with BEM, OOCSS & SMACSS by Frontend-Designer Tim Hartmann.
Interview with designer Jenn Lukas on Developing a Living Style Guide with CSS
Backdrop CMS CSS Coding Standards
Web developer Pete Goodman’s CSS Coding Standards from 2008. Outdated but included for historical reference.
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.
Even More Style Guides
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.
CSS code standards from the UX Team at Fellowship Technologies
Mark Brown, front end developer form Melbourne has a css style guide on his site. http://www.yellowshoe.com.au/standards/#css
Sass Style Guide by Chris Coyier of css-tricks.com
Google’s CSS styleguide
Guidelines and best practices for the front-end web development team at Isobar.
Money Advice Service CSS Styleguide
Personal style guide for oli.jp, website of Oli Studholme, a designer in Osaka, Japan.
Guilherme Rv Coelho’s opinionated CSS styleguide for scalable applications.
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
Reasonable System for CSS Stylesheet Structure. “Styling CSS without losing your sanity”
How we do CSS at Ghost. 2014 post.
Appfolio’s CSS architecture by Philip Walton
25 CSS best practices we follow at Innofied.
PrestaShop Css coding standards
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
Comment Standards in SASS and LESS by Anatoliy Vorobyov, Drupal Developer
TL;DR: For most people, just read Harry Roberts’ guide (the first one listed here) linked to above and follow the recommendations. Use them as a baseline to develop your own personal CSS coding style standard.