The Professionals Point: CSS Tips and Tricks: Write Simple, Short and Consistent CSS Code

CSS Tips and Tricks: Write Simple, Short and Consistent CSS Code

CSS (Cascading Style Sheets) code is used in each and every website you create. CSS is used for giving style to your webpage. So, you should know how to write better and optimized CSS code. I am going to list some CSS Tips and Tricks which will help you in writing better CSS code. This article on 'CSS Tips and Tricks' covers use of CSS Inheritance, concept of multiple selectors, use of css shorthand properties, use of global reset concept, CSS IE (Internet Explorer) Hacks, naming convention of CSS IDs and Classes and other elements, use of external and internal stylesheets and CSS comments etc. In short, main motive of this article 'CSS Tips and Tricks' is to make your css code simple, short, consistent and more readable.

1. Don’t Use Global Reset in CSS Code

Using global reset to remove default margin and padding from all HTML elements is a strict no-no. Not only it is slow and inefficient way but you’ll have to define margin and padding for each element that needs it.

*{ margin:0; padding:0; }

Better Approach

html, body, div, dl, dt, dd, ul, h1, h2, h3, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
ul { list-style:none }

2. Do not use IE Hacks in CSS Code

Though CSS hacks might be useful to maintain consistent look of the website over older browsers like IE6, but they can be problematic for newer versions of IE as newer versions like IE8 do support CSS standards to a good level and using hacks might break out the layout. You should use conditional statements instead to target specific versions of Internet Explorer.

For example, using the below lines of code within your <head> tag will load the iestyles.css file only when browser is Internet Explorer version 6 or less.

3. Use Meaningful names for IDs and Classes

Suppose you define your sidebar styles using class .leftbox and after some redesign, you float it to right, then would it be meaningful to have leftbox as name for right floated box. You should put some thought before declaring classes and IDs for elements so that they are meaningful and easy to understand later.

4. Utilize CSS Inheritance

If multiple child elements of a parent element use same styles on your web page, it will be better to define them for their parent element and let the CSS inheritance do all the work. You’ll be able to easily update your code later and it’ll also reduce the CSS file size considerably.

#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }

Better Approach

#container{ font-family:Georgia, serif; }

5. Combine multiple Selectors in CSS Code

You can combine multiple CSS selectors into one if they have common style definitions. It’ll save you time and space.

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

Better Approach

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

6. Use Shorthand Properties in CSS Code

Utilize the shorthand properties of CSS to quickly write CSS code and reduce file size. Shorthand notation can be used for margin, padding, border, font, background and also for color values.

li{
    font-family:Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    line-height: 1.4em;
    padding-top:5px;
    padding-bottom:10px;
    padding-left:5px;
}

Better Approach

li{
font: 1.2em/1.4em Arial, Helvetica, sans-serif; padding:5px 0 10px 5px;
}

7. Organize CSS Code

Organizing your CSS code in a certain pattern will make it easier to find things at later time and save you a lot of time looking for a specific style definition.

Here is a sample organization that you may use:

/*-------------------------
    CSS Reset
-------------------------*/

/*-------------------------
    Generic Classes
-------------------------*/

/*-------------------------
    Layout styles
-------------------------*/

/*-------------------------
    Section specific styles
-------------------------*/

8. Make CSS Code Readable

Writing readable CSS will make it easier to find and update a style declaration later. Either group all styles for a selector in one line or each style in its own line with proper indentation. You can also combine these two techniques together.

/*------------------------
Each Style on new line
---------------------*/

div

{
    background-color:#3399cc;
    color:#666;
    font: 1.2em/1.4em Arial, Helvetica, sans-serif;
    height:300px;
    margin:10px 5px;
    padding:5px 0 10px 5px;
    width:30%;
    z-index:10;
}

/*------------------------
    All Styles on one line
    ---------------------*/

div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

9. Add proper Comments in CSS Code

Comments can be used to separate different sections of CSS code

/*--------------------
Header
-----------------*/

#header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left; height:72px;}

/*--------------------
Content
-----------------*/

#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}
#content .posts{ overflow:hidden; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }

/*--------------------
Footer
-----------------*/

#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

10. Order CSS Properties Alphabetically

This might be a difficult way to write CSS but it’ll make it easier for you to find out any property easily at a later stage.

div
{
    background-color:#3399cc;
    color: #666;
    font:   1.2em/1.4em Arial, Helvetica, sans-serif;
    height: 300px;
    margin: 10px 5px;
    padding:5px 0 10px 5px;
    width: 30%;
    z-index:10;
}

11. Use External Stylesheets for CSS Code

It is always a good design practice to separate content from presentation. Place all of your CSS code into external stylesheets and use the <link> to reference stylesheets within a web page. By placing CSS into external files, you can easily update your styles later at one place instead of looking into html templates or files for styles.

Better Approach

12. Split CSS code into multiple files

If you are working on a large web project that has multiple modules, each with different set of styles and looks, it will be better to split your CSS files into multiple files based on the module they are applied to. You can separate stylesheets like, one for reset, one for layout, one for generic classes and one for module specific styles. This technique will let you organize your code easily in a large project but loading multiple CSS files means more HTTP requests and slower loading time, this is where Bridging CSS files come to rescue. Create a separate CSS file and import other CSS files into it.

@import "style/css/reset.css";
@import "style/css/typography.css";
@import "style/css/layout.css";

13. Compress CSS Code

Once you are ready to deploy the web design project, compress your CSS code using tools like CSS Compressor to reduce file size and improve loading time of webpage.

14. Be Consistent in Writing CSS Code

When you work on multiple web development projects, it’ll be a wise decision to choose a particular way of organizing and formatting your CSS code and stick to that way for all your projects.

The Professionals Point

Pages

Wednesday 19 December 2012

CSS Tips and Tricks: Write Simple, Short and Consistent CSS Code

No comments:

Post a Comment

About the Author