Developing a CSS Strategy

written by: Maneet Puri; article published: year 2007, month 10;



In: Categories » Internet » Web design and development » Developing a CSS Strategy

When CSS Gets Messed-up

One of the great benefits of CSS is that it substantially reduces the repetitious formatting code out of the HTML mark up and consolidate the same in the CSS which saves the programmers a great deal of time and effort. The styles can be reused to build multiple text blocks and control layout and formatting on multiple pages. The best part is that it considerably saves a lot of development time having all the reusable formatting in a centralized location, especially when you edit or update your website.

On the flip-side, CSS can get all messed-up as you keep on adding more styles to the style sheet. There are different styles to redefine HTML tag attributes, class and id selectors to format different text blocks, and also different styles for page layout. Again, while some of these styles are site wide, others are applicable to individual pages. Further, there are cross-browser compatibility issues and so forth. With all these stuffs going into the style sheet, often things become confusing unless you have developed a proper CSS strategy.

Devising Your CSS Strategy

Organize You CSS Styles – The most common blunder quite a few web developers commit is that they put all the styles for the entire site into one CSS file. Although this approach works for a small site with a very few pages having specific styles, for the bigger sites it is better use multiple CSS files.

The key is to divide the style sheet file into different sections. For instance, in the main style sheet especially in the first section should contain the styles with the broadest site wide application, so it's mostly populated with styles that redefine the properties of HTML tags.  The other section can contain styles to format common page elements, such as the navigation bar or footer. The styles that control site wide page layout can be placed in another section. Subsequent sections should create groupings of styles with a progressively more specific focus.

Avoid "class-itus" – many web developers tend to overuse classes and IDs. Though it is one of the basics of CSS to add classes and IDs to the markup and define CSS styles to format page elements, some developer however, get in the mindset of creating a class for every little thing that needs formatting. Instead, it is much wiser to redefine the properties of HTML tags than creating a different class.           

Design for the best browser – Because of the its comprehensive use, most web coders tend to keep Internet Explorer browser in their mind while designing a web page. Later on, they make necessary adjustments in the style sheet to comply with other web browsers. Though, this looks pretty logical an approach. However, they by doing this they tend to write codes which contain all the idiosyncratic features of IE in the style sheet. As a result, it actually takes them a substantial time to make necessary adjustments in the codes for other browsers. Hence, they literally rework for a substantial portion of the code in the process.

If as a web developer, you want to produce standard-compliant code, then previewing Mozilla's Firefox instead of Internet Explorer would be much more helpful to you. First of all, Mozilla’s Firefox is the most standard-compliant browsers available at the moment. Secondly, it has the web developer tool bar extension on it which will help you a great deal. After you code for Mozilla’s Firefox, you can test it for the other browsers and add hacks and code tweaks to fix compatibility issues.                                                      

Author Box –                  

Maneet Puri heads Day Robinson Services, a major IT solutions provider offering outsource website maintenance India services. For over last 10 years, Maneet has been assisting many offshore clients in implementing web-based applications for their websites. His company also delivers web development India and web design India services. Maneet offers exeperts advice on other web-based applications to his overseas clients.

Maneet Puri spearheads Day Robinson Services India, a well-known name in the field of web based application services, web optimization services, and web development India services. Having over 10 years of industry experience, he has implemented web design India services for many of his international clients. He also offers expert advice on web-based application services, search engine optimization and various knowledge driven processes to his clients based overseas.

legal disclaimer

1) Our website is not responsible for the information contained by this article as well for any and all copyright infringements by authors and writers. E-articles is a free information resource. If you suspect this article for any copyright infringements, please read the Terms of service and contact us to investigate the problem.
2) The E-articles directory team is not responsible for inaccuracies, falsehoods, or any other types of misinformation this tutorial may contain and will not be liable for any loss or damage suffered by a user through the user's reliance on the information gained here. Please read the Terms of service

Useful tools and features

Translate this article to...    Send this article to you or to a friend

Link to this article from your page   
If you like this article (tutorial), please link to it from your web page using the information above. Linking to this page, this is the only way to help us improve our service, the same time providing your visitors with a way to improve their online experience.

related articles

1. Advantages and Disadvantages of Message Based Authentication
Client credentials can also be passed along with the regular message payload. This is marginally easier to implement on the client side because adding credentials should be no more difficult than adding another parameter to the request. Remember that even if a secure (SSL) endpoint is used, the URL used for the request is still sent in the clear, so if the credentials are passed on the URL (as is the case with a REST request), they will be visible to any and all intermediaries. Advantages: Easily handled &m...

2. 7 Things You Should Not Use in Web Design to Get a Quality Web Site
If you have any of these on your website or you have built websites for other people that include some of these ‘No-No’s’ then don’t feel too bad. We all make mistakes and it’s only my opinion right? 1. Flash In The Pan Pan being a slang term for toilet – as that’s where it belongs. Okay, maybe not all use of Flash but certainly Flash introduction pages. What a nightmare they are – ever visited a site where you positively revelled in the fact you got to...

3. How To Quickly And Easily Protect Your Adsense Account From Accidental Clicks
Not a day goes by without somebody complaining that they’ve been shutdown by Adsense because of “click fraud”. Scary isn’t it? Your kids or family members accidentally “stumble” on your website as they’re browsing the net (using the home computer)… and proceed to click on YOUR ads. You accidentally click on your ads yourself while you’re “checking” your site in your browser. Now, I’m sure that some people have accidentally ...

4. What Should I Do For a Successful Business Website
There are just four cornerstone foundations you need to perfect to make your website a success. These foundations need to be central to your way of thinking about your website from now on. Whenever you make a single change to your website, whenever you have an idea about your website, whenever you think about your website in any way you need to think about the four cornerstone foundations – so here they are… Volumes The volume of people you attract to your website is crucial to your websit...

5. The 7 Deadly Sins Of Web Design
Sin 1 - Starfield backgrounds You know the sort – zillions of tiny white pixels glinting back at you from behind the text. Beautiful. Not! In a galaxy far, far away, in a time long, long ago people thought this was cool. It’s not. It sucks and people who use it should be shot. Sin 2 - Anything that moves. Okay, that’s maybe a little bit harsh – let me zero in on something more specific - animated cursors. I know 12 year-old kids that think they’re crap. Wise up an...

6. General advantages and disadvantages of HTML vs XML and XHTML
There are three markup languages. These include Hypertext Markup Language (HTML), Extensible Markup Language (XML), and the combination of the two, Extensible Hypertext Markup Language, (XHTML). HTML HTML is the primary format used on the World Wide Web. HTML can display Web pages with a wide range of colors, shapes, and objects. Although not a true programming language, HTML has increased in power over the years. HTML is actually a loosely defined subset of XML. However, whereas XML is a strict languag...

7. Wireless Markup languages ~ Overview ~ WAP WML WMLScript
The most common standard of data transfer and presentation for a handheld device involves the combination of Wireless Application Protocol (WAP) with Wireless Markup Language (WML). Although WAP can be used with other forms of presentation, its coders primarily designed it to be used with WML. WAP Because of the small size of PCS devices, and because they operate with much less bandwidth or speed, than the rest of the Internet, a special protocol was necessary to redefine how they handle data transmission. This protoc...

8. How To Configure Apache or IIS Web Server to Work with WML ~ Openwave SDK
It could be a useful exercise for you to create your own WML program and test it on a live Web server. This requires the following two items: Access to a Web server (IIS or Apache both work well) A development tool to test the programming For the development tool, we recommend that you download and use the latest version of Openwave's SDK, which is freely available to developers at http://www.openwave.com. Once you install this program, you simply need to specify where the files ...

9. Developing a Commerce Site
Developing a commerce site is similar to developing an application, and a structured approach is recommended. This article discusses a development methodology for the commerce site. An approach with the following stages is recommended here: Scope Prototype Design Implementation Testing Deployment Scope The Scope stage involves the following activities: ...