Pages

Wednesday, 19 December 2012

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.

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.

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.

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 ---------------------*/

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.

<style type="text/css" > #container{ .. } #sidebar{ .. } </style>

OR

<li style="font-family:Arial, helvetica, sans-serif; color:#666; " >

Better Approach

<link rel="stylesheet" type="text/css" href="css/styles.css" />

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.

Great post i really appreciate this post because a student i really want to become aWeb Designer and i'm looking also Wordpress Courses i was planning to learn more about wordpress also. but anyways i will keep update your site for more free informative post. thanks for this post it helps me a lot.