CSS is a language that is not difficult to master, but if you use it for a large project, it can be very difficult to manage if you do not follow a defined approach while writing CSS code. Here are few tips that will help you write better and easy to manage CSS code.
1. Don’t Use Global Reset
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. Instead use subset of CSS Resets like one from Eric Meyer.
Not Good
*{ margin:0; padding:0; }
Better
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
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.
<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="styles/ie-styles.css" /> <![endif]-->
For information on conditional comments, refer to the quirksmode article on CSS Conditional Comments
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.
Not Good
#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }
Better
#container{ font-family:Georgia, serif; }
5. Combine multiple Selectors
You can combine multiple CSS selectors into one if they have common style definitions. It’ll save you time and space.
Not Good
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
h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
6. Use Shorthand Properties
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.
Not Good
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
li{
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
padding:5px 0 10px 5px;
}
Here’s a complete guide to CSS shorthand properties.
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 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
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
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.
Not Good
<style type="text/css" >
#container{ .. }
#sidebar{ .. }
</style>
OR
<li style="font-family:Arial, helvetica, sans-serif; color:#666; " >
Better
<link rel="stylesheet" type="text/css" href="css/styles.css" />
12. Split CSS 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
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.
I hope these tips will help you write better and manageable CSS code. If you would like to share a tip or two, feel free to add your comment below.