|
[By Abhyuday.P.Pal]
Basics & Standards
3 Things to keep in mind while making a css
Functionality : Code made for the style must work.
Readability : Code must be easy to read.
Small size : Resulting file must not have unwanted stuff, the file size be as small as possible
You can include all the above in one and call it as :
Structure : A good code will have a easier to understand structure, that can be understood at a single glance.
Example:
Wrong approach:
.green-text{color:green;}
Right approach:
div#main-content p.text span.green-text {
color:green;
}
Shows exactly where the element is located in.
There are 3 different types of CSS defination
Inline styles
Embedded styles
External CSS file
Inline styles
<span style=‘color:green;’>Green</span>
Avoid inline CSS:
The most important advantage of using CSS is the separation of design(CSS) from content(HTML)
Embedded styles
<style type=‘text/css’>
<!—
.green-text {
color:green;
}
-->
</style>
This is the CSS code that is given in the <style>--</style> block in the head area of the HTML file.
When using this, remember that you will not be able to change the appearance of the page without editing the page.
External CSS file
<link rel=‘stylesheet’ href=‘style.css’ type=‘text/css’>
This is the best method:
- The design is separated from the content.
- The browser will load the CSS file only once
If multiple pages linking to the same CSS file are viewed, the browser will load the CSS file from its cache and use it.This will save your precious bandwidth.
- Changing one file can change the appearance of the whole file.
The X commandments of CSS coding style.
Comments
Case
Naming Conventions
Name Type
Indentation and White space
Selectors
Shorthand
Comments
CSS is not a programming language, so comments are not very necessary.
Avoid comments which will save some bytes of bandwidth.
But for some portion its necessary always use comments in CSS only for
Separating different areas of the code.
Example:
/*General*/
body { margin:0; }
a {
text-decoration:none;
}
/*Header*/
div#header {
width:100%;
}
/*Navigation Bar*/
div#navigation {
float:left; width:20%;
}
The different sections are clearly labeled - using the minimum amount of chars.
I did not use
/**************** Header ***********/
because I want to make the file size of the CSS file as low as possible.
Another area where comments are necessary is when you are using CSS hacks - but more about that later.
Case
Simple rule – Lower case all the time.
In XHTML, all the elements must be in the lower-case so the CSS defination should also be in lowercase.
Naming Conventions
Hyphen(-) - Example left-menu-links. This will visually separate the words - and will confirm to the CSS language style. CSS defections use this separator ie. font-weight or text-align. I use this style.
Underscore(_) - Example left_menu_links. Very visual separation of the words. This is the most commonly used variable word separator for programming languages.
Hungarian Notation - Example aLeftMenuLinks('a' stands for anchor). The ability to use prefixes will allow more information in the name - use your imagination for creating the prefixes - 'a' stands for anchor, 'i' for image, 'p' for paragraph and so on. Also this eliminates using an extra character as the separator - again reducing the size. A notable disadvantage is that there is no visual separation of the words.
Name type
Name based of Appearance
This style will name the elements based on how they will appear.
Example...
.bright-red {
color:red;
font-weight:bold;
}
Name based on Functionality
A more practical approach in my opinion.
Here, the name of the class will be 'main-text' - the name will depend on how the class will be used rather than on its appearance. It is change friendly.
Indentation and white space
No space before the selector(the selector must touch the left margin).
A single space between the selector name and the '{' - #sidebar {.
A tab character before the beginning of the rule.
No space before and after the colon separating the property and value - (color:red;).
Each rule separated by a new line character.
All the grouped selectors(.content/.text/p) must be separated by a new line.
Example:
#sidebar {
width:20%;
float:right;
border:1px solid black;
text-align:right;
background-color:#bbcaf3;
}
.content,
.text,
p {
color:#000;
text-align:justify;
}
Selectors
Simple
Context
Class
Id
Pseudo Element
|
Research & Insights 
