Nowadays CSS development is process which makes people to think to produce good results. You may have experience with working on large CSS files, multiple developers, and long development schedule of events. If you have created more complicated CSS in your files then there is more difficulty arises in working .In this article I have tried my level best to introduce you some tips which maintains your files arranged and keep in a specified manner to make easy to work on them.
Things to keep in mind
Always you should remember some ideas
Just think about the situation that you were working on one site .Suddenly you got some problem and you have to leave your job. At that time you have to handover your work to some other developer. From that time onwards some other developer has to work on code and he has to handle your job. So always don’t think that you alone will work on this code.
Each person is preferred by one and the other thing. This will not denotes the meaning that we are not having interest to follow some simple processes to make coding environment easy.
Keeping your CSS organized
I have listed out all basic techniques
1. Avoid using inline CSS or in-page CSS
CSS can be implemented by three different ways:
• Inline (<p style=”padding-bottom:10px;”)
• On page (
<link rel="stylesheet" type="text/css" href="url_of_your_css" />
• Imported using @import
One of the best ways for keeping your CSS separate and for keep up is using imported CSS.
If you do not have choice then goes for using inline CSS. Mainly CSS are used whenever there is requirement of using properties for the current page. If you have many CSS files then best thing you can do is generating new CSS file and then go for importing.
2. Use classes and id’s where appropriate
There is a difference between a class and an id. An id can be used only once on a page. If something happens only once then use an id. If something occurs many times then go for using class. Just think about future changes which you want to implement in your site. If you want to use any style multiple times then go for class. Otherwise use an id.
3. Use a consistent style
Some time you may prefer to select following CSS inline style code
.myclass1 {font-family:Tahoma;line-height:19px;}
In block format code can written as
.myclass1{
font-family:Tahoma;
line-height:19px;
}
Code can be varied by many ways. Some developers prefer to use inline method which helps in finding selectors easily. Some developers prefer to use block format which helps in finding the properties easily. Choose the format whichever you feel easy to use and keep on continuing the use of format throughout your CSS file. Some time you may catches problem which makes you to use different format which you are not interested to use. That time you can use a CSS formatting tool to get back to your format.
4. Don’t specify the same selector more than once
Due to lack of awareness you might have been used selectors more than once. Initially you have used the some properties for lists at the top of styles. Later you got an idea of using some other additional properties with the initial one. But the thing is additional properties are added with new block at the bottom. So be aware of selectors which have been used to avoid use of same selectors more than once.
5. Use lower case selectors only
Selectors are always case sensitive.
Example: Consider #Content and #content. You should be always conscious to avoid mistakes. Always prefer to use selectors in lower case. It will bring out steady continuity on other characters which are used in your selector.
E.g: Using only underscores or dashes, not both.
6. Use standard conventions for common ids.
Nowadays web designers will know easy going approaches to name certain elements. The header has been named as #header, the footer is named as #footer, and the main menu is named as #nav or #navbar. There will be variation in container elements. You will be in safer side if you make you to attach yourself to code strategy which other developers are using. This helps other developers to interpret and grasp your code
7. Use meaningful selector names
Always select the selector’s names which are of meaningful name. So that others can interpret what is your selector is used for? In addition to this class names also related to changes which you are going to make in file. If you are wants to change red color to orange color. Just think for a while why you are changing red text to orange text. If your intention of changing color is highlighting them then call it as .important..You should go for using presentational names for style when you will not get any reasonable names for style. Example when there is class that makes the photo to be aligned left and if you are not provided with meaningful name then you can chose labels like .photo-left (or .imgleft, or .figure-left, or whatever you prefer).
The main it is deal with is continuing meaningfulness with clarity which can be easily understandable. Your code must be in a way that it should not be so strict with the semantics. With the example I will explain, the id “footer “tells about the position on the page. In a more semantic way semantic, it could be “site-meta” or something like that. Actually speaking “footer” is a much clearer label.
8. Use shorthand wherever possible
Instead of:
.myclass2 {
padding-top:10px;
padding-right:15px
padding-bottom:20px;
padding-left:25px;
}
prefer to use:
.myclass2 {
padding: 10px 15px 20px 25px;
}
9. Order properties within a selector
You have to keep the selector properties in a arranged manner if selector is equipped with many properties. There should be some ordered arrangement. Some people arrange the properties in an alphabetical manner
ul.unavi li a span strong{
color: #ffffff;
text-align: left;
outline-width: medium;
outline-style: none;
}
According to me, I prefer to arrange things by purpose. It can be like this.
ul.unavi li a span strong
{
outline-style: none;
outline-width: medium;
text-align: left;
color: #ffffff;
}
10. Use a CSS reset
All browesr’s default settings can be neutralized by CSS reset declaration. Most of all the basic elements view can be governed by the default style sheets of all browsers. Unordered lists are equipped with round bullets and a left margin. Most of all the designers desire to neutralize all these values. It is very time consuming task of overriding each setting that you wish to change. So it is better go for starting fresh one.
Eric Meyer constructed a good CSS reset that you can copy and paste into your CSS file.
11. Include a color reference
Just think about number of times you have gone for searching a proper hex value for colors which you have used in your design. It is easy for you get if you mention the colors at the top. Thing you have to do is just scroll to the top and copy and paste. Overall Code can be like this
/* Main medium green: #d7ecaa Lighter green: #f1fcdb Very light green: #e8f7c4 Medium brown: #a66c38 Lighter brown: #632f00 */
12. Otherwise, use comments only when necessary
You have use comments which specifies about style sheet which you have used. It makes others to understand why you have used style sheet. Any way developers will usually know about the style sheets. But putting comments automatically increases size of CSS file. So use comments whenever it is necessary.
13. Consider dividing your CSS into separate files
It is better thing to split the large CSS file into 2 or more files. If you implement this strategy then you can use different splitted files for particular task.
Many times I keep template layout in separate files since they will not get vary soon after the initial site built up. Even we can keep CSS reset in separate file. You will be able to develop splitted files for larger section files and it will be utilized by only certain number pages like forms.
Your list of CSS files view will be like this
reset.css content.css layout.css forms.css
Make sure that @import declarations are written in the specific order, so that we can combine correctly
14. Avoid using browser specific hacks
There are many strategies to reach our expected traffic for CSS in different browsers. This can be done by paying more attention towards rendering engine which avoids some selectors or groups of characters.
First Thing is you will not be able to represent these hacks easily with understanding. After many months and years you will be not aware of why voice-family has been used.
Second thing is new browsers which are getting introduced will always solve the problem which you are paying more attention in earlier browsers. It is most favorable if they will go to repair bugs also.
People could not able to hack if you know to write css code well .There is many things available to repair problems of standards-compliant browsers. This not holds good for Internet explorer.
15. Use minimal specificity
In CSS what happens you know Specific selectors neutralize the effect of general selectors. So let us include some padding to list items. It can be done through this way
div#wrapper ul li {
padding: 4px 0;
}
Wrapper contains Div which will be for whole page. Most of all lists will be of 4px top and bottom padding. In order to get less padding I can place the lists inside the #content div. It can be done through this way
div#content ul li {
padding: 2px 0;
}
If you use more selectors in CSS then you have to go for neutralizing the properties of selector later on. So use fewer selectors as possible.
You can also write this code instead of above code.
li {
padding: 4px 0;
}
#content li {
Padding: 2px 0;
}
If you want to know more then you can check here Specifics on CSS Specificity .
16. Make full use of CSS selectors
There is no rules like that you have to use id and class for an element which you want to style in different way. You should study about all selectors which are readily available. So that you will come to know about all selectors and their use. Let me give an example which will explain you of creating navigation key.
<div> <ol> <li><a href="https://www.webmastersun.com/forums/41-Buy-and-Sell-Websites">Websites For Sale</a></li> <li><a href="https://www.webmastersun.com/forums/42-Domains">Domains</a></li> <li><a href="https://www.webmastersun.com/forums/43-Advertising">Advertising</a></li> </ol> </div>
Your CSS view can be in this way
.megamenu p, .megamenu h1, .megamenu h2, .megamenu h3, .megamenu h4, .megamenu h5, .megamenu h6
{
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
}
/* Line 1 */
.megamenu h1, .megamenu h2, .megamenu h3, .megamenu h4, .megamenu h5, .megamenu h6
{
font-weight: bold;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
}
/* Line 1 */
.megamenu h3
{
font-size: 14px;
line-height: 28px;
}
In this one problem arises that html file will be occupied by many extra selectors which are not necessary in use. It can be solved by using descendant selectors in list items which will be in the navbar div. You can also put id to the ul
Not all the selectors are well supported by all browsers. There is chance that some selectors are not supported by some browsers. This can be solved by some improvement strategies.
17. Consider progressive enhancement
You can make use of improvement techniques and newer standers will beneficial to you. Along with that you can create newer and attractive interfaces to older browsers. Newer CSS properties and selectors are useful in optional design elements like creating rounded corners.
The thing is you can use the -moz-border-radius and -webkit-border-radius properties to create rounded corners in Firefox (using the mozilla/gecko rendering engine) and Safari (using the webkit rendering engine) . This is better than creating multple nested divs with background images to create rounded corners,
#mydiv {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
New techniques and new standards gives additional functionalities without using an extra code and and it will not lowers the functionalities of an earlier browsers.
18 Redundancy or Dependency
If you experienced writing of CSS then you would have know the problems which you will face. A lot of elements will equipped with similar kind of properties. Visual consistence is important factor in key design. In CSS most of the time you will be writing same set of properties throughout the CSS.
One thing you can do that is you can divide the common groups into their own classes. In the same way you can benefit from utilizing grouped selectors. You can employ all these classes with any elements which are in need. But there are situation arises in which you want to modify properties of one of which is used. In such situation you have to go for selecting selector which is specific of your need. If you go on continuing with this strategy you may reach situation that there will be many selectors used with particular element. If we change one property you may have go for changing other properties also.
So it is better to go for rewriting same CSS many times. Among these two methods choose method based on your perspective. Which one you feel easy and comfortable to go for using that method. Redundancy and dependency methods are useful in their own way. For smaller projects redundancy method is useful and for larger and complicated projects dependency method is useful.
If you want to know more about this topic in deep you can read this Redundancy vs. Dependency from Dave Shea.
19. Target IE using conditional comments
Adding Internet Explorer’s Conditional comments are not a difficult task. Codes are easily visible in an IE. You can also target on specific version and range.
There are different strategies to use different CSS in an IE by using conditional comments.
Let us see first strategy which just inserts a different CSS file for IE:
This holds for all versions of IE:
<!--[if IE]> <link rel="stylesheet" href="ie.css" type="text/css" /> <![endif]--> Following code is for versions less than and including than IE 6: <!--[if lte IE 6]> <link rel="stylesheet" href="ie6bugs.css" type="text/css" /> <![endif]--> Following code is for versions less than (and not including) IE 6: <!--[if lt IE 6]> <link rel="stylesheet" href="ie5bugs.css" type="text/css" /> <![endif]--> This divides IE i.e. CSS from the rest of the thing. Some designers treat this has a problem. Some time you will not come to know that the same element is also adjusted in the IE- when you are varying regular style sheet. You can also add a containing DIV around your page within an IE. After the body tag just put <!--[if IE]> <div id=”ieroot”> <![endif]--> Next thing is don't forget to close it at the bottom: <!--[if IE]> </div> <![endif]-->
In order to add extra rules use #IERoot selector in your regular CSS file. This holds only for IE.
You can study other advanced conditional comment techniques from Supporting IE with conditional comments at Dev.Opera.
Conclusion
Nowadays CSS development is kind of difficult process. In these you have to work site that contain many CSS files. It requires more time to fulfill the requirements. If the CSS are little complicated then you feel difficult to work on them. So in this article I have tried my level best to give good tips to work on CSS files and arrange them in organized manner.
