Tips for Writing Better CSS
For a Website Developer CSS(Cascading Style Sheets) is a very important thing. It not difficult to learn and master the CSS but sometime in large projects it become difficult to manage the CSS. So we are discussing few things that will help in managing the CSS. Below are some tips for writing better CSS
-
Use CSS Reset
Before writing the CSS style it is advisable to reset stylesheets. It will allow you to take your browser to zero and then apply your defined style to the elements.it becomes much easier to ensure that every browser is displaying items properly after reseting the CSS.
-
Avoid Use of Global Reset
Don’t use the global reset to remove the margin and padding from all the html elements because it’s a slow and inefficient way. If you use global reset then you will have to define margin and padding for each element that needs it.
Don’t Use
*{margin:0;padding0;}
Do Use
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 }
-
Use Indentation for CSS rules
Try to indent the CSS rules. Indenting the rules will help you in easy scanning of the CSS rules.
Don’t Use
.demo { background: #FFF; border: 0; color: #252525; float: left; margin: 0; padding: 0; }
Do Use
.demo{ background: #FFF; border: 0; color: #252525; float: left; margin: 0; padding: 0; }
The indented rules will help you in easily scanning the CSS classes and IDs.
-
Avoid IE Hacks
CSS rules may help in maintaining the consistent look of the website over different browsers. It may also cause problems with the newer versions of IE like IE8. So it is advisable to use conditional stylesheets instead of hacks.
-
Take Proper IDs and Classes Names
Use proper and meaningful names for the classes and Ids. For example suppose you are applying style to a div which contains the content of the page. you can use .contentdiv or #contentdiv as you class or ID name resp.
-
Make Use of Comments
Comments are always the best friends of the developers. They helps in easy scanning and understanding. You can use comments for a block or for a rule. This will help in scanning and finding the css rules in the style sheet easy.
/********** Menu Style code here **********/
-
Use CSS Inheritance
Use the css inheritance to apply the same rule to the multiple elements within an element. For example:
.content p{text-align:justify;} .content span{text-align:justify;} .content li{text-align:justify;}
The above styles can be combined as
.content {text-align:justify;}
Usage of inheritance will reduce the file size.
-
Combine multiple Selectors
Try to combine multiple selectors having the same style.
p{font-size:14;font-weight:200;} span{font-size:14;font-weight:200;} div{font-size:14;font-weight:200;}
Instead of writing the above code you can combine them.
p,span,div {font-size:14;font-weight:200;}
This will save the time and reduce the file size.
-
Use Shorthand Properties For CSS Styles
Use CSS shorthands for writing the CSS codes. The shorthand can be used for properties like Font,Border,Margin,Padding, Background.
.main{ padding-left: 10px; padding-right:5px; padding-top: 2px; padding-bottom:1px; }
The above can be written as
.main{ padding: 2px 5px 1px 10px; }
-
Create and Use a Table of Contents
Writing Table of content at the top of the style sheet will help you and someone who looks at the stylesheet in finding the rules in the stylesheet. They can easily scroll and move to the section they want.
/***************************************************** 1. HEADER code 2. NAVIGATION code 3. CONTENT code 4. SIDEBAR code 5. FOOTER code *****************************************************/
-
CSS Rules Should be Readable
Group all the styles for an selector either in one line or each style in its own line. This will make your css easy to read and update later.
.demo{ background: #FFF; border: 0; color: #252525; float: left; margin: 0; padding: 0; } or .demo{background: #FFF;border: 0;color: #252525;float: left;margin: 0;padding: 0;}
-
Order CSS Properties Alphabetically
Arrange all the rules within a selector alphabetically. This will help you in finding the proper line of code you want to change. For Example
.demo{ background: #FFF; border: 0; color: #252525; float: left; margin: 0; padding: 0; }
-
Use External Stylesheets
It is advisable to separate you style from the presentation. Keep all your style in external sheet and add your stylesheet using to your html page. This will help you in updating the styles later on. At that time you don’t have to go to html files and update your styles.
-
Compress CSS code
When you are finished with the development and ready to deploy your projects at that time compress your css by using various compression tools. This tools compress your CSS by removing white spaces from you stylesheet.
-
Be Consistent in Writing CSS
It is advisable to follow the consistent way to develop the stylesheets. try to use the same approach for writing the multiple stylesheets in the application.
-
Split CSS into multiple files
If you are working on a big project then try to split you styles in various stylesheets based on the functionality. After splitting the css you can import them in one other based on the requirement. this is also called as Bridging of css files. This Helps in reducing the HTTP request. You can import CSS like this
@import "style/css/reset.css"; @import "style/css/news.css"; @import "style/css/video.css";
These are some tips for writing better CSS
Latest posts by Rajat Jain (see all)
- How to reset the Icons cache in windows - February 3, 2014
- Filling Dropdown in asp view in MVC3 - December 3, 2013
- Tips for Writing Better CSS - November 27, 2013
Way cool! Some extremely valid points! I appreciate you writing this write-up
plus the rest of the site is really good.
Hello! I could have sworn I’ve been to this blog before but after going through some of the posts I realized
it’s new to me. Nonetheless, I’m definitely happy I came across it and I’ll be bookmarking it and checking bzck often!
These are genuinely impressive ideas in concerning blogging.
You have touchhed some nice factors here. Any
way keep up wrinting.
I am really impressed with your writing skills as
well as with the layout on your blog. Is this a paid theme or did you modify it yourself?
Anyway keep up the nice quality writing, it is rare to see a nice blog like this one nowadays.
Wow, this paragraph is pleasant, my sister is analyzing these
things, therefore I am going to tell her.
My developer is trtying to persuade me to move to .net from
PHP. I have always disliked the idea because of the costs.
But he’s tryiong none the less. I’ve been using Movable-type
on a variety of websites for about a year and am worried about switching too another platform.
I have heard great things about blogengine.net.
Is there a way I can transfer all my wordpress posts inro it?
Any kind of help would be greatly appreciated!
Hello Parajumpers Denali,
We will not say anyone wrong but as per my knowledge now a days trend is different people were switching from .net to php and many other open source languages. So it will be your decision to decide on which technology you want to work.
You can export your wordpress post to an XM file using tools -> Export option in wordpress and you can use that exported file where you want to use by creating a script or functions (if destination application does not support the format)
we hope that this will help you. In any case if you need any support you can contact our technical support team Aadi IT Services.
I enjoy what you guys are usually up too. This sort
of cllever work and reporting! Keep up the excellent works guys I’ve added you guys to my personal blogroll.
Your way of explaining all in this paragraph is
in fact nice, every one can easily be aware of it, Thanks a lot.
I need to to thank you for this wonderful read!! I absolutely enjoyed every little bit of it.
I’ve got you bookmarked to look at new things you post…
Terrific article! This is the kind of info that are supposed to be shared around the internet.
Shame on the search engines for now not positioning this put up higher!
Come on over and seek advice from my site . Thank you =)