Styling

CSS

File Stack

Current File Stack

Our current structure has a common.css file that is used for all businesses and a dynamic.css file with a reset.css imported into it.

  • common.css
  • reset.css
  • dynamic.css

What we should have

We should be applying reset.css before the common.css to ensure that we are starting at an even playing field for all browsers.

  • reset.css
  • common.css
  • dynamic.css

Naming Conventions

camelCase

camelCase, also known as lower camelCase, should be used for all id's and classes.

Example
    .contentWrap
      //styles here
    
Not:
    .content_wrap
      //styles here
      
    .content-wrap
      //styles here
    

Rules

Think about long term maintanence when naming classes.

Always describe classes and id's based on what the are not what they look like.

Example:
      class="warning"
    
Not:
      class="red"
    

*All css is written in SASS, which brings us to our next topic...

SASS

We use SASS with Compass to precompile CSS.

With great power comes great responsibility.

Do not nest more than three levels down to make your code more readable.

    .contentWrap
      //Style here
      .content
        //style here
        .section
          //STOP!
    

For more information and references visit: sass-lang.com or compass-style.org

Do Nots

Do not use !important

  • !important is a band-aid.
  • It is a solution that has not fixed the problem.
  • If you find yourself needing to write !important on something it is probably not classified correctly in the html or their is CSS that does not belong in the common.