December 4, 2010 in CSS

A handy guide to best coding practices in CSS

Whether you have been using CSS for some time now, or you are new to the world of CSS, following some commonly used coding practices can save you a lot of time and energy. If you want to build on your coding education skills then you may want to visit the Bay Valley Tech Bootcamp to hone what you already have and get deeper into software development to see what else you can do.

There are no predefined rules on how you should write you CSS code; Experts in the industry like DoMyCoding have created their own guidelines for coding. Most often, organizations or even industries can have a set of guidelines to follow but again, these are mere guidelines and not rules.

We have tried to sum up a few guidelines; you can follow these as “best practices” as these can give you a quick start or help you improve your existing coding habits.

1. Prepare the canvas: Will you be able to comfortably draw on a canvas that already have some drawings on it? The answer is obviously NO., Same is true for CSS too. All browsers have their own default CSS, which leads to most of the browser inconsistencies. So, it is important to overwrite the browser’s default CSS to bring all browsers at same level.

   Few predefined CSS files are available for your help:

   1. Eric Meyer’s Global Reset
   2. YUI Reset CSS
2. Reusable code: Create a library of helpful CSS classes and group them in different files. For example you can have multiple CSS files in your library for commonly used layout styles (single column, two columns, two columns with header and footer, etc.), you can create files for form styling, or any other commonly use classes to save time.
3. Organize your CSS code: Organizing your CSS code properly makes it more readable, and easy to maintain and tweak in the future (if needed). There are many different approaches to organize your CSS code:
   1. Multiple files: Use different CSS files for common styling rules. For example you can have files like reset.css, global.css, structure.css, form.css, print.css, etc. depending what you need. It is also a good practice to import all these style sheets in one master CSS file. [@import url(“reset.css”);]
   2. Code blocks: Separate your code into blocks of common sections with help of comments, for example /* Structure */, /* Header */, /* Footer */ etc. it improves readability of you CSS file.
4. Semantic coding: Make best use of powers given by the language, Can you imagine superman waiting on airport because of delayed flight, when he need to reach somewhere quickly for a rescue operation? Situation is same when a developer uses wrong CSS code, and then applies hacks to resolve the issues. You can address it by:
   1. Page Structure: Use elements properly to structure your document. Sometimes new developers use div’s similar to table cells to achieve desired layout. Consider other elements to structure your document, before adding an additional div to achieve desired layout.
   2. Reusable code: If you feel you have added same CSS property at many places, consider creating a common class instead. Also take benefit of cascading nature of CSS wherever possible. For example if you have two similar boxes on your webpage with only minor differences, you can style both with same code and add extra properties below to differentiate one box from the other.
   3. Avoid Hacks: Mostly hacks are used in CSS because it’s not properly coded. Don’t use hack unless it’s a known or documented bug. Best way to avoid a hack is doing some research on the issue; you will most likely find a solution batter then a hack.
   4. CSS Constants: Create a block of comments at the top of your document containing commonly used values. Mostly this block contains values for colors or width and height of design blocks. It provides a quick list of colors used in the website, and it’s easy to find and replace the color value if you need to change it at some point.

/*
Dark grey (text): #333333
Dark Blue (headings, links) #000066
Mid Blue (header) #333399
Light blue (top navigation) #CCCCFF
Mid grey: #666666
*/

1. Naming Conventions: Name all classes and IDs according to their semantics. Consider an example where you name an element as ‘column-right’. Now what if you move this right column to left or some other position, later. This name will not be valid and may be confusing to others.
2. Semantic HTML: Use HTML elements , , etc. for typographical weight/looks where possible. It adds meaning to your web page too.

Shorten your code: Small is beautiful as they say, some techniques to shorten the code save a huge no. of lines sometimes. Following are the few points that are considered as a common practice: