CSS

#CSS

##Style guide

This style guide is created to enforce a consistent single person coding style for CSS in a project. New projects should adhere to this style unless the project demands a different style due to vendor / framework related code. Key is always to be consistent with the style of the project code.

###Naming conventions

• Use lowercase when naming classes.

    .container { 
    	
    }
  

• Use kebab-case as a delimiter to separate words.

    // bad
    .containerHeader {
  
    }
  
    // good
    .container-header {
  
    }
  

###White space

• Use indents set to 4 spaces.

###Blocks

• Start a selector block with an opening brace { at the same line, ending with a closing brace } at a new line below the last rule, aligned with the selector.

    // bad
    .container { font-size: 12px; padding-left: 10px;  } 
  
    // good
    .container {
    	font-size: 12px;
    	padding-left: 10px;
    }
  

Comments

• Use small meaningful comments using /* */ notation on top of the code. Do not use trailing comments.

    /* bad */
    .block { 
    	display: inline-block;
    	margin-left: -4px;		/* Required to remove in-between inline-block element white-space issue. */
    } 
  
    /* good */
    .block { 
    	display: inline-block;
    	/* Required to remove in-between inline-block element white-space issue. */
    	margin-left: -4px;
    } 
  

Quality tools

• .EditorConfig
  • TODO: add link to the Philips .EditorConfig file.

##Best practices

• Only use class selectors for styling (Do not use ID selectors!)
• Use as much as possible class based styling (over tag selectors), separating markup (structure) from styling. This allows flexibility of reorganizing the HTML markup without affecting the styling. Always apply this technique on sensitive SEO markup elements, such as headers (h1-h6).
• Use !important for state only (this includes overriding inline CSS values set by JavaScript)

###Style encapsulation

• Always prefix class names.

    // Sample Philips UI button
    .p-button {
  
    }
    
    // Sample for where-to-buy container
    .wtb-button {
    	
    }
  

• If prefixing is not possible, at least encapsulate CSS styles by using a name space class name.

    // Button inside WTB widget
    .wtb .button {
    
    }
  

###Organization

• Use scalable, modular and an object oriented way of organizing CSS in large projects. See principles:
  • OOCSS
  • SMACSS
  • BEM

###CSS3

• Leverage the CSS3 capabilities as much as possible. Be aware to provide proper fallback for older browsers using a graceful degradation approach. Consider using auto prefixing via build-tooling.

###Performance

• Avoid using star * CSS selector, as it might impact the UI rendering performance.
• Limit the hierarchy levels (max 5) within CSS selectors.

##Resources https://mattstauffer.co/blog/organizing-css-oocss-smacss-and-bem