This will allow you to eliminate end of line whitespace, eliminate unintended blank line whitespace, and avoid polluting commits. demo_image Idiomatic CSSĬonfigure your editor to “show invisibles”. atrĭo not concatenate words and abbreviations in selectors by any characters (including none at all) other than hyphens, in order to improve understanding and scannability.Į.g.demo-image not. Use ID and class names that are as short as possible but as long as necessary.Į.g.
Unit-less line-height is preferred because it does not inherit a percentage value of its parent element, but instead is based on a multiplier of the font-size. If you find yourself going further, think about reorganizing your rules (either the specificity needed, or the layout of the nesting). GitHubĪs a rule of thumb, don’t nest further than 3 levels deep. I’ll list some excerpts from each that I like below. This is about style guides for CSS itself. We’ll do a roundup of those some time, because I think that would be valuable too. I think they are a fantastic way to work particularly in large sites and web apps. Commenting, indentation, overall file structure… it all makes up a complete CSS style guide. Ordering properties is just one choice you have to make that makes up a complete styling strategy.
As we wrap up our recent poll on ordering CSS properties, it brings up the larger issue of CSS style guides.