Some of CSS Style Guides for Inspiration

As we wrap up our recent poll on ordering CSS properties, it brings up the larger issue of CSS style guides. Ordering properties is just one choice you have to make that makes up a complete styling strategy. Naming is a part of it. Sectioning is a part of it. Commenting, indentation, overall file structure... it all makes up a complete CSS style guide.

CSS style guides are a group of documents that outline the coding style, best practices, and visual design properties (e.g. colors, layout grid dimensions, etc.) of a site. The goal of having a style guide is to maintain consistency across a product.

If you’re in the process of creating a CSS style guide, or if you want to learn about the CSS practices that large-scale websites use, check out the following list of style guides.

Google HTML/CSS Style Guide

Did you know Google has published an HTML CSS Style Guide to help new coders understand good coding practices. We all edit CSS, HTML in our blogs, but do we do it the right way? Do we know the basic styling tips which professional web developers and web designers follow? It is important to code the right way, not only because the code looks great to visualize and understand, but also because it is very useful to detect bugs and errors easily and fix them quickly.

GitHub’s CSS Styleguide

These guidelines strongly encourage the use of existing, common, sensible patterns. They should be adapted as needed to create your own style guide.

WordPress CSS Coding Standards

Like any coding standard, the purpose of the WordPress CSS Coding Standards is to create a baseline for collaboration and review within various aspects of the WordPress open source project and community, from core code to themes to plugins. Files within a project should appear as though created by a single entity. Above all else, create code that is readable, meaningful, consistent, and beautiful.

Within core stylesheets, inconsistencies will often be found. We are working on addressing these and make every effort to have patches and commits from this point forward follow the CSS coding standards. More information on the above and contributing to UI/front-end development will be forthcoming in a separate set of guidelines.

ThinkUp’s CSS Code Style Guide

If the value of the width or height is 0, do not specify units. Comments that refer to selector blocks should be on a separate line immediately before the block to which they refer.

Lonely Planet CSS

Our SVG icons and fonts are both loaded within CSS files, but these are deferred and not grouped with the rest of the styles. Similarly to github, we like to get rid of as much code as we can and we’re not precious about keeping things around in case it might be needed. Refactoring is a part of our daily work though and we very rarely have specific refactoring tasks.

Mapbox’s CSS and Styling

If you are familiar with web design with CSS, the format of TileMill’s styling language will look familiar, though the exact properties are quite different. TileMill includes a CartoCSS reference accessible by clicking the {} button, and there’s an online CartoCSS reference by Mapbox.

Idiomatic CSS

If you’ve ever worked on a large programming project you know all about the joy of trying to read other people’s code. And of course that’s how everyone else feels about reading your code. That’s why formal programming style guides exist — to help bridge the gap between individual styles. There is no right or wrong style of writing code, but there are styles that are easier to read and share with other people. Search the web and you’ll find formal guides to writing readable JavaScript, Python, Ruby and countless other popular languages, but one language that doesn’t get as much attention is CSS.

Developer Nicolas Gallagher wants to change that. To do so Gallagher has put together Idiomatic CSS, a style guide for how to format, organize and craft quality CSS that anyone can work with.

Labels: , ,