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.
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.
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.
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.