CSS Best Practices – Find Yours

I have been on a best-practice research rampage lately and wanted to take a few minutes to share some of the things that I have found in regards to CSS best practices. I will show some of the research I found and some of the common themes.

CSS Best practices

In my search for making good decisions, I thought it was important to try and find what other people are doing. I have talked about ‘being part of the conversation’ before and a good start to finding what I think is right is to look at what other people feel is right. That does NOT mean I need to follow what other people do, but it can give me the basis making my own informed decisions.

What are other organizations doing in terms of CSS Best Practices?

I found four online CSS style guides and CSS best practices that seemed like really good sources to begin forming my own thoughts.

Google’s Style Guide – – Because Google.

Code Guide by @mdo This person is one of the creators of Twitter Bootstrap and current Director of Design at GitHub.

Code Guide by Harry Roberts – the guy behind @csswizardry.

Air BnB

I am sure there are others out there, but these are all legit CSS style guides from prominent entities in the tech industry.

What do these example CSS best practices teach us?

One thing I was interested in was finding what is common among all of these style guides? If these widely regarded entities generally agree on something, it would seem appropriate to at least look at the similarities.

Here is a list of items that seem to be agreed on in at least ¾ of the style guides

  • Soft Tabs. They’re the only way to guarantee code renders the same in any environment. 3 of the 4 recommended 2 spaces. One recommended four.
  • When grouping selectors, keep individual selectors to a single line. 2/4 indicated that in some cases (only one selector and attribute), single line css could be used.
  •  
    
    /* Bad CSS */
    .selector, .selector-secondary, .selector[type=text] {
      padding:15px;
      margin:0px 0px 15px;
      background-color:rgba(0, 0, 0, 0.5);
      box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
    }
    
    /* Good CSS */
    .selector,
    .selector-secondary,
    .selector[type="text"] {
      padding: 15px;
      margin-bottom: 15px;
      background-color: rgba(0,0,0,.5);
      box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
    }
    

    .selector {padding: 15px;}

  • Include one space before the opening brace of declaration blocks for legibility.
  • /* Bad CSS */
    .selector{
      padding:15px;
    }
    
    /* Good CSS */
    .selector {
      padding:15px;
    }
    
  • Place closing braces of declaration blocks on a new line
  • Include one space after : for each declaration, but none before.
  • End all declarations with a semi-colon. The last declaration’s is optional, but your code is more error prone without it.
  • All class names should be lowercase-hyphen (although 2/4 recognizes/encourages BEM and OOCSS naming conventions. The other two do not mention them.) Google does not explicitly call this out for classes, but “All code has to be lowercase: This applies to HTML element names, attributes, attribute values (unless text/CDATA), CSS selectors, properties, and property values (with the exception of strings).”
  • Comments – use them. Everyone includes that comments are needed and that it should be done in a consistent manner, but they each have slightly different comment styles.
  • Javascript hooks. 3/4 Javascript hooks in selectors to separate presentation from functionality from document “.js-“. Google does not call out specific js-hooks, but does talk about “Separating structure from presentation from behavior is important for maintenance reasons.”
  • IDs. 2/4 say never use IDs in css. 1/4 say to avoid using them. 1/4 (Google)makes no comment.
  • 4/4 have some verbiage about avoiding qualifying selectors and avoiding specificity (als0 related to ID item) . The more specific a rule is, the more fragile it tends to be and more labor intensive for the browser. 3/4 seem to have a preference to classes in lieu of any dom elements and Google doesn’t really mention much about it.
  • They all talk about appropriate class naming. Trying to avoid presentational naming and more reflects the purpose of the element. Brief as possible, but long as necessary.

What am I supposed to do with these CSS best practices?

Well, use them. They don’t NEED to be a part of your CSS best practices, but use them to understand what other people are doing and to be intentional about how you and your organization writes CSS. Even among the linked style guides, they each have some sort of discussion about consistency and working together to make a choice or respecting the formatting of the environment you are working in.

One thought on “CSS Best Practices – Find Yours

Leave a Reply

Your email address will not be published. Required fields are marked *