CSS has an important role in web application development. HTML is the skeleton of the web site. But CSS provides flesh and shape and beauty to the HTML skeleton. Now a days, web is available to common man. They access various websites on different devices. It is interesting that most of the users are particular about the look and feel of a web application which they are using. In this scenario, the importance of CSS comes. Here are some Tips for CSS coding for the UI developer, who is a beginner in this field.
1. Use Reset CSS
Different browsers have different ways of handling the styles. Or different browsers have different default styles for rendering the HTML, like font size, style, weight, margin, padding etc… All the HTML elements have some default styles and it varies depending on the browser. So how we can manage this is to use reset.css, a seperate style sheet for resetting the browser specific styles. For eg. refer Eric Meyer’s Reset CSS
2. Understanding CSS Selectors
CSS selectors are used for applying css rule to an element. CSS selectors are: element selectors or tag selectors (div, a, span, h1, h2 etc..), class selectors (.myclass, .newclass etc…), ID selectors (#header, #footer, #container etc..), pseudo-class selector (a:hover, a:link etc..), selectors based on relationship (div > span, div ul li). Use the selectors intelligently for the better use of css.
3. Re-usability of CSS
When you code css for a web application, always think about the re-usablity of the css. Use class for adding styles, so that the same styles which is common for different elements or blocks of html can be used. Using classes is always better than using element selectors.
4. CSS Grouping
CSS grouping will help us to reduce the css code. Elements/selectors which has some common styles, can be grouped together.
h2 {
color: #000;
}
.title {
color: #000;
}
.secondtitle {
color: #000;
}
//Grouped css
h2, .title, .secondtitle {
color: #000;
}
5. Use Short-hand CSS
One of the main advantages of using CSS shorthand is reduction in web page download time. Using CSS shorthand will reduce number of css lines, it makes the code clean and easier to understand. Refer example of font short hand css.
6. Avoid Superfluous Selectors
Sometimes our CSS declaration can be simple. Instead of using “ul li”, we can use directly “li”. When we are using multiple list items in a page, it is better to avoid using tag selectors, instead use class selectors.
7. Use of !important
Any style marked with !important will be taken into use regardlessly if there’s a overwriting rule below it. !important is used in situation where you want to force a style without something overwriting it. Or defining a rule with the !important ‘attribute’ discards the normal concerns as regards the ‘later’ rule overriding the ‘earlier’ ones.
.header { background-color:red !important;
background-color:green;
}
Here the background color of the header class will be red even if the green color rule is declared after the first rule.
8. Replace Text with Image
It is a common practice to replace the text title with image. For example, usually image is used for Logo in a web, than using a text.
#logo {
background:url("logo.jpg") no-repeat 0 0;
display: block;
width:150px;
height:100px;
text-indent:-9999px;
}
text-indent:-9999px; throws your text title off screen, replaced by an image declared by background: {…} with a fixed width and height.
9. Use a master stylesheet
It is always better to use a master style sheet which includes other style sheets.
@import url("reset.css");
@import url("global.css");
@import url("structure.css");
10. Keep a library of helpful CSS classes or reusable classes.
.width100 { width: 100%; }
.width75 { width: 75%; }
.width50 { width: 50%; }
.floatLeft { float: left; }
.floatRight { float: right; }
.alignLeft { text-align: left; }
.alignRight { text-align: right; }
.clear { clear: both}
11. Proper naming of classes and IDs
Use a common naming system. Having a naming system for id’s and classes saves you a lot of time when looking for bugs, or updating your document. Especially in large CSS documents, things can get a big confusing quickly if your names are all different. Name your classes and IDs properly, according to their semantics. “We want to avoid names that imply presentational aspects. Otherwise, if we name something right-col, it’s entirely possible that the CSS would change and our “right-col” would end up actually being displayed on the left side of our page. That could lead to some confusion in the future, so it’s best that we avoid these types of presentational naming schemes.
