CSS Standards and guidelines

I have a resolution and a self-made promise that I will write more even if it’s a short quick tip, but never get time.
Last month director of our UX team asked me, how do I maintain and organize CSS files and what standards do I follow while writing CSS. This made me think as these are just minor things which we do and becomes difficult to list them down as a standard or guidelines, as those have just become part of our habit, a style of writing codes. So today I would like to share with you all, hope someone will find them useful.

Few are just my personal preferences and people might disagree, please feel free to comment.

Cascading Style Sheets (CSS) is a simple mechanism for adding style or define the look and feel of one or several (x)HTML documents. CSS is designed primarily to enable the separation of document content from document presentation. Anything that is visual should be achieved via CSS.

  1. Linking CSS file to document: Below are the ways you can apply CSS  to a document:
    • Linked in the document head via the LINK element
    • Linked in the document head via a STYLE element and the @import directive
    • Added directly to the head via the STYLE element
    • Inline in the HTML element via the STYLE attribute

    I always prefer by first one i.e. keeping it in separate file and linking in the head of the document by LINK element.  You should always avoid inline style as this will fail to validate in Strict doctypes and its difficult to maintain and doesn’t serve the real purpose of CSS cascade and inheritance.

  2. Index: In the beginning of file it’s always good to have bit of introduction in comments like author, purpose, Layout and track of version.
    Reset browser styles:  I recommend using a reset style-sheet to remove the default browser styles. This speed up the development of the layout and you will get very less cross browser issues.

     

  3. Naming Convention: IDs and classes of elements should represent what these elements are, not what they look like. Always use clear and meaningful names for classes. This will help understanding CSS better and faster. So you or other person using your style-sheet will able to reuse and avoid any confusion. I always use CamelCase while naming.
  4. divitis and Classitis (class-eye-tiss) – The new CSS disease
    “divitis” and “classitis” are the latest diseases UI developers have L, “divitis” is when someone uses unnecessary <div> tags and Likewise, classitis is the over use of the class attribute. For example:
    <div id=”menu”>
    <ul class=”menuNav”>
    <li class=”menuItem”>First item</li>
    <li class=”menuItem”>Second item</li>
    <li class=”menuItem”>Third item</li>
    </ul></div>
    As you see above wrapping ul in a div is just not required. A better option is to use contextual selectors and the correct markup. So to style li we don’t need a class ’menuItem’ here, using contextual selector ul.menunav li we can style li.
  5. Readable: I place my closing brace on the same line as the last declaration to improve the visual distinction between rules which helps when scanning quickly through a large CSS document.
    Selectors should

    • be on a single line
    • end in an opening brace
    • be closed with a closing brace on a separate line without indentation

    .navigation .menuItem {
    }
    Multiple selectors should be on a single line, with no space after each comma like-
    #general  .fastStart,  #general  .refill,  #general  .orderStatus{
    Properties should be on the following line after the opening brace. Each property should:

    • be on its own line
    • be indented with two spaces, i.e., no tabs
    • have a single space after the property name and before the property value
    • end in a semi-colon

    #description {
    position: relative;
    padding: 0 5px;
    margin: 0 auto;
    width: 970px;
    }
    CSS Property Ordering:  There has been a long debate, Group Similar? Or Alphabetical? I much prefer grouping by similarity method which is logical, alphabetizing seems nothing more than beautifying the code. Usually I just write whatever comes to my mind in a logical way. Read more >>
    Colors (especially hex values) are preferred to be in lowercase.

  6. Shorthand: Shorthand in CSS is where you define several properties of the same kind as one single property. CSS Shorthand makes development much easier and keeps your CSS clean, short & accessible.
    For example- p {
    font-style:normal;
    font-variant:normal;
    font-weight:bold;
    font-size:1em;
    line-height:1.2em;
    font-family:georgia,”times new roman”,serif;
    }
    shorthand for above is- p {
    font:bold 1em/1.2em georgia,”times new roman”,serif;
    }
  7. Sprites: Combining all background images into one single image and displaying them using background positions is all we call CSS Sprites. CSS Sprites reduces the number of HTTP requests, saves bandwidth and loads faster. Also avoids image flicker.
  8. Don’t use “!important:  “!important” suffix was intended to provide a method of overriding author stylesheets. Users could define their own “user stylesheets” and could use this suffix to give their rules precedence over the author’s. Nowadays, it’s used to counteract the pain of having to deal with CSS specificity.
    h1 {color: yellow !important;}
    #heading { color: red;}The heading will be yellow, even though the ID selector has higher specificity. The !important rule takes precedence.Unfortunately narcissistic & lazy developers or out of ignorance use important when their CSS doesn’t work, this results in accessibility issues and code becomes messy to maintain as when next time you or someone else tries to alter same rule for example in above case, say in some other page one has to make heading blue color and then problem arises as important rule will make it yellow so to fix one has a choice to remove important from above but if one is not aware why it was used he can’t take chance to remove and break things somewhere else so he will also add important to his class name to get it blue now imagine how slowly your CSS will become important CSS and things will be messed up.
  9. CSS Hacks: To get a same look and feel in all the browsers developers use CSS hacks but I recommend not using hacks as this will result to errors in CSS Validation.
    An alternate to this is to have a separate browser specific CSS and include it in the HTML using conditional tags.
  10. Validate your CSS: It’s always important to validate your CSS when you build it. This is to make sure that your CSS is error free and is interpreted in the right way in all the browsers.
    The W3C Validator has been a very popular online tool that validates CSS.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s