CSS files can get messy and unreadable real fast.<\/p>\n
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.<\/p>\n
But does it really matter when you are a one-person operation, working on small client projects like portfolio sites?<\/p>\n
You can come up with a list of rules to follow that make sense for yourself, but it\u2019s a good idea to see what best practices other developers are using.<\/p>\n
Here is a list of css coding standards best practices I compiled showing examples of what other people consider good CSS and bad CSS.<\/p>\n
Harry Roberts\u2019 CSS Guidelines<\/a> 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.<\/p>\n Code Guide by @mdo<\/a> (Mark Otto, director of Design at GitHub). Heavily inspired by Idiomatic CSS and the GitHub Styleguide.<\/p>\n WordPress.Org CSS Coding Standards<\/a> \u201cAbove all else, create code that is readable, meaningful, consistent, and beautiful.\u201d<\/p>\n Rizzo: Lonely Planet\u2019s Style Guide<\/a>. Also check out this post by Ian Feather, an explanation of the principles behind Rizzo, their Living Style Guide.<\/p>\n Code Style Guide: CSS<\/a> from Thinkup.com (now shutdown, but the style guide at Github is still valuable).<\/p>\n Mapbox CSS Styling Guide https:\/\/www.mapbox.com\/base\/styling\/<\/a><\/p>\n Airbnb CSS \/ Sass Styleguide<\/a> \u201cA mostly reasonable approach to CSS and Sass\u201d. Advises to not use ID selectors.<\/p>\n Solid<\/a> is BuzzFeed\u2019s CSS style guide. Influences from frameworks like Basscss. Uses atomic CSS classes for consistent styling options.<\/p>\n Mozilla Developer Network CSS Style Guide<\/a><\/p>\n Great article<\/a> detailing the history and evolution of Medium.com\u2019s CSS styling. Contains complete CSS style guides from 4 different eras.<\/p>\n The Salesforce Lightning Design System\u2019s markup and style guide<\/a>.<\/p>\n Fontshop.com\u2019s styleguide<\/a> is more of a pattern-level graphical design library, but the CSS naming conventions are of interest.<\/p>\n Principles of writing consistent, idiomatic CSS<\/a> by Nicolas Gallagher.<\/p>\n \u201cPart of being a good steward to a successful project is realizing that writing code for yourself is a Bad Idea\u2122. 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.\u201d<\/p><\/blockquote>\n – Idan Gazit<\/p>\n Harry Roberts\u2019 2012 article My HTML\/CSS coding style<\/a> on his CSS Wizardry site is mostly out of date, but still instructive.<\/p>\n Scalable and Modular Architecture for CSS (SMACSS)<\/a> by developer Jonathan Snook is an online book on topics related to CSS architecture. Sections are relatively short and easy to digest.<\/p>\n CSS coding conventions<\/a> by Stoyan Stefanov; Facebook engineer, ex-Yahoo, architect of the YSlow 2.0 performance tool and creator of the smush.it image optimization tool.<\/p>\n Drupal.org CSS Coding Standards<\/a>. CSS coding guide and best practices for Drupal.<\/p>\n postcss-style-guide<\/a> is an NPM packaged PostCSS plugin that will generate a style guide automatically.<\/p>\n CSS and LESS Coding Standards<\/a> from Run Open Code.<\/p>\n The Moodle LMS CSS coding style guide<\/a> describes style guidelines for developers working on or with Moodle code.<\/p>\n A style guide for CSS across all jQuery projects. https:\/\/contribute.jquery.org\/style-guide\/css\/<\/a><\/p>\n CKAN<\/a> CSS coding standard doc. (CKAN is an open-source tool for making open data websites).<\/p>\n MediaWiki Coding conventions for CSS<\/a>.<\/p>\n Sass Guidelines<\/a> 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.<\/p>\n Plataformatec CSS Guidelines<\/a>. A Brazilian agile development agency.<\/p>\n Magento LESS coding standard<\/a>. Defines Magento internal requirements for code formatting and style for teams that develop LESS and CSS code.<\/p>\n An Auto-Enforceable SCSS Styleguide Powered by SCSS-Lint<\/a>. By frontend web developer David Clark.<\/p>\n BBC Cascading Style Sheets (CSS) Standard<\/a>. describes the use of Cascading Style Sheets on bbc.co.uk web pages.<\/p>\n The Guardian\u2019s Base CSS style guide<\/a>.<\/p>\n Yelp\u2019s SCSS styleguide<\/a> covers mixins for flexbox, animations, grids and other markup.<\/p>\n CSS features and coding standards for Phabricator<\/a>, a set of tools for developing software.<\/p>\n Subvisual\u2019s CSS\/Sass Project Architecture and Styleguide<\/a>.<\/p>\n 18F CSS coding styleguide<\/a>. 18F is an office inside the U.S. General Services Administration\u2019s Technology Transformation Service that helps other federal agencies build, buy, and share efficient and easy-to-use digital services.<\/p>\n Trello\u2019s CSS Guide on GitHub<\/a>. \u201cCSS guides are a big deal, hugely important. If you don\u2019t have a CSS guide, you should be panicking,\u201d writes Bobby Grace<\/a> in a post about the style guide.<\/p>\n Oracle\u2019s JavaFX CSS Reference Guide<\/a>.<\/p>\n Lemonly\u2019s<\/a> CSS\/SCSS Style Guide. South Dakota-based design agency.<\/p>\n Styleguide for Primer<\/a>, GitHub\u2019s internal CSS framework. And a 2014 post by Mark Dotto on GitHub\u2019s CSS<\/a>.<\/p>\n Polymer uses shadow DOM styling rules<\/a> for providing styling of the element\u2019s local DOM.<\/p>\n Scss-Styleguide with BEM, OOCSS & SMACSS<\/a> by Frontend-Designer Tim Hartmann.<\/p>\n Interview with designer Jenn Lukas<\/a> on Developing a Living Style Guide with CSS<\/p>\n Backdrop CMS<\/a> CSS Coding Standards<\/p>\n Web developer Pete Goodman\u2019s CSS Coding Standards<\/a> from 2008. Outdated but included for historical reference.<\/p>\n Knyle Style Sheets<\/a> (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.<\/p>\n DocumentCSS<\/a> 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.<\/p>\n CSS code standards from the UX Team at Fellowship Technologies<\/a><\/p>\n Mark Brown, front end developer form Melbourne has a css style guide on his site. http:\/\/www.yellowshoe.com.au\/standards\/#css<\/a><\/p>\n Sass Style Guide<\/a> by Chris Coyier of css-tricks.com<\/p>\n Google\u2019s<\/a> CSS styleguide<\/p>\n Guidelines and best practices for the front-end web development team at Isobar<\/a>.<\/p>\n Money Advice Service<\/a> CSS Styleguide<\/p>\n Personal style guide<\/a> for oli.jp, website of Oli Studholme, a designer in Osaka, Japan.<\/p>\n Guilherme Rv Coelho\u2019s opinionated CSS styleguide<\/a> for scalable applications.<\/p>\n Dropbox (S)CSS Style Guide<\/a>. \u201cEvery line of code should appear to be written by a single person, no matter the number of contributors.\u201d \u2014@mdo<\/p>\n Reasonable System for CSS Stylesheet Structure<\/a>. \u201cStyling CSS without losing your sanity\u201d<\/p>\n How we do CSS at Ghost<\/a>. 2014 post.<\/p>\n Appfolio\u2019s CSS architecture<\/a> by Philip Walton<\/p>\n 25 CSS best practices we follow at Innofied<\/a>.<\/p>\n PrestaShop<\/a> Css coding standards<\/p>\nBest Of The Rest CSS Guides<\/h2>\n
Even More Style Guides<\/h2>\n