1. CSS Reset
This is something I recently just started doing when starting a new website, I have found that it reduces the number of buggy CSS throughout a site. The purpose of a CSS reset is to help take out any inconsistencies across the major browsers (Internet Explorer, Firefox, Opera, Safari, etc). Each browser will render CSS slightly differently and some browsers more-so than others.
When I first started learning about CSS I read everything I could find that was written by Eric Meyer who at the time was really a master of all things CSS in my opinion. Eric created a really nice clean bit of code for a CSS Reset that I use at the top of all of my CSS files. Click here to see his post on his code. If you are new to CSS I highly suggest checking out the rest of his site to help you get started.
2. Multiple Style Sheets
Often times websites can become quite large and require hundreds and even thousands of lines of CSS code alone. This can cause plenty of issues when trying to find particular elements to edit and organization becomes difficult to manage. One solution which I use to help overcome some of these issues is to use multiple style sheets, each with it’s own purpose.
My primary development platform is ASP.NET which has a nifty thing called “Master Pages”, essentially it is a super powerful template which is applied to each page of your site. I always create a CSS file which is similar which I consider to be the “Master” CSS file for the entire site. In this file I set “Global” settings that get applied to everything like the body tag, link properties, heading tags and major layout containers like content area, sidebar, footer. This allows me to know exactly where all of my major CSS properties are located and it keeps my CSS size down to a minimum.
My second style sheet is a “Controls” document where I set the properties for things like textboxes, dropdown lists, buttons, etc. On almost every site I format these general controls in some sort of way, either by changing the textbox background color, border color and hover settings and other properties. In my mind it just makes sense to have a separate CSS document that I can easily transplant over into every new site that I work on without having to worry about having residual CSS information specific to any particular site cluttering up my code. In addition to setting control properties here, I also set properties for things like modal pop-ups, validation controls and info boxes for when a form gets updated or if there was an error with a form.
Most of the time two CSS documents are sufficient for most of the sites I do for small projects, but for larger projects I add more as I see fit. For instance if I have an whole admin panel area, I will typically set all my CSS for those page into it’s own CSS document. There is no reason for the general site to load all the Admin specific CSS information if they are never going to see it anyway, so I only link to that CSS file on those particular admin pages.
Lastly, I will break my CSS up into specific “Tools” if I tend to use a particular tool across multiple sites. For instance if there is a photo gallery system that I use for displaying photos, it makes sense to break this up into it’s own CSS so that I can easily port it over to numerous sites as needed. This really cuts down on re-writing code over and over.
There are numerous ways to split up CSS documents into manageable pieces, this is how I typically do mine. I encourage you to Bing other ways to see what solution works best for you.
3. @import Rule
In continuation of using multiple style sheet documents, it’s important to know how to actually link to those documents. Typically for each CSS document you would simply use the standard method of linking to the CSS file in your <head> element of your master page.
<link rel="stylesheet" type="text/css" href="/css/master.css" />
You would simply repeat that code for each style sheet you have. This could end up looking cluttered and bulky in your master page.
<link rel="stylesheet" type="text/css" href="/css/master.css" />
<link rel="stylesheet" type="text/css" href="/css/controls.css" />
<link rel="stylesheet" type="text/css" href="/css/admin.css" />
<link rel="stylesheet" type="text/css" href="/css/gallery.css" />
Instead you can use the @import rule in which you can link to just one .css file from your masterpage and then at the top of your CSS file you would add this:
@import url(’/css/controls.css’);
@import url(’/css/admin.css’);
@import url(’/css/gallery.css’);
This technique keeps your master page cleaner and easier to manage. Keep in mind however that this technique won’t work for older browsers and the code MUST be the very first thing in your CSS document or it will not work.
4. Quick Selectors (helpers)
I am not sure what else to call this section, so “Quick Selectors” is what I’m going with. Quick Selectors is CSS code that are general by nature, they quickly do something without needing a lot of code. Here is a list of what I consider Quick Selectors
- Fixer or Clear – Used after Divs which have been floated that sit inside of some sort of containing div that needs to expand with the content.
- Float Left or Float Right – Simple way to float something to the left or to the right, for instance if you want an image to the right of some text you could just drop it in a div that has a class of float right with some margin-left to keep the text from bumping directly into the image.
- Text Align (Left, Center, Right, Justify) – Simple way to quickly align text or images or anything else, when a full blown selector isn’t really important.
- Small Text – Used for things like “helper” text next to a textbox for things like saying (.jpg file types only) where the text doesn’t need to be normal size.
Here is how I write the css for each of these:
.clear{clear: both; margin: 0px; padding: 0px; height: 0px;}
.floatR{float: right; margin-left: 10px;} – Change based on if you want to float left or float right.
.alignC{text-align: center;} – Change the last letter and css property depending on how you want text aligned.
.smallText{font-size: .9em;}
I typically put these at the bottom of my master page CSS file as classes so I can re-use them as many times as needed.
5. Multiple Classes
One of the cool things about CSS is that it is always a learning experience, you could learn something new about CSS every time you work with it. Earlier this year I learned that you can apply multiple CSS classes to a single html element. This technique allows you to separate selectors into very specific values which you can then combine depending on the situation to get a desired look for a particular element without writing extra CSS classes to handle it.
For example:
p.italic{color: #666666;}
p.underline{text-decoration: underline;}
Your element would then look like this:
<p class=”italic underline”>Some text here</p>
I hope these tips are useful to some of you, I am sure there are numerous and even better ways of doing some of these same tips. In the end it comes down to what makes the most sense to you or what does your boss want to see. It can take a year or two before you really know what works and what doesn’t work especially as your websites get larger and larger.
For more information for basic CSS information check out the w3schools.com website or search in your favorite search engine for more CSS tips.
