5. Combine CSS files One master CSS file for common elements One project level CSS file for project specific styles One CSS file for print specific Other CSS filesOne CSS file for each cobrandOne CSS file for IE specific styles
CSS started out as a broken language with little to no support, and it still has some of that reputation today, but its getting much better
I’ve noticed a few common issues throughout all of our sites that I would just like to clear up any confusion and help us all to write the best code we can
This is a lot of files to go through, especially if you are trying to find a single css rule or even worse, trying to resolve conflicts between css rules. How can we make it better?
In the cobrand specific CSS file, only elements that will change for the cobrand should be included, such as colors and fonts. Structural elements that will not change should remain in the main CSS. It is not necessary to create a new CSS file for 10 lines of CSS; rather, it would be better to add the code to an existing file.
Theres a lot going on here, and that style attribute is making things harder to read. Is there a way we can simplify this code?
Inline styles are generally a bad idea and should be avoided whenever possible. I can only think of one extremely rare case where inline styles should be used, and I’m not going to tell you because you would know it!If something is 0, it doesn’t need a unit of measurement, zero is zero in anything
When switching from table layouts to tableless layouts you may feel like you can just replace every instance of a table or td tag with a div, but this is rarely the case. Generally, the only times you should use a div tag is when there is no other tag that would make sense to use in that situation, such as structural elements like headers. Typically our pages will follow some resemblance to this structureThere may be other places where a div may be absolutely necessary, but before you automatically use a div, try to think of how the element will be used and if another tag would be better suited in its place.
Be consistent with your naming, whether you use dashes or camel case or whatever, use the same thing, and I’ve been told its good practice to follow with whats been established before, so keep that in mindEven more important is how you are naming your elements. You want to name your classes and id’s based on what that element is, like a header, or special link, and not on what color the element is or where on the page it is. It would be pretty confusing working on a class called blue-link-left if the element was actually red and on the right
I’m sure you’ve seen this somewhere in our css files, and you might be thinking to yourself right now what exactly this hack does. But guess what?
The so called “star hack” is meant to target ie browsers before ie 7, which means that anytime you write this hack, whatever you are trying to hack will still be broken in later versions of ie. But if you’ve ever worked with css and ie, you know how frustrating it can be. That’s why there is an acceptable way to target ie browsers
This is called a conditional comment, and right now is the only acceptable and official way to target ie specific browsers. The first example is saying that if the browser is less than or equal to IE 7, do thisThe second example is calling an ie specific css file for all versions of ie
So when writing your code, and you happen upon an area where you think you need a hack, ask yourself a few questions first
So you can see that this page is easily separated into columns and rows
So on this page, you might be thinking of various places where a table might be needed, like in the top navigation. But is that true? Lets look at the code.
So instead of using a table for this, which would have involved many more lines of code, and possibly some spacer images, we see that here it is a simple unordered list. And isn’t that all a navigation menu is anyway, just a list of links?
So really, we are taking out all of the presentational elements from the HTML, and putting that in the CSS. That was the original purpose of CSS, to separate content from layout, and this idea still holds true today
You can style tags directly by using the tag name with no period or hash before The difference here is that there is no class on the p tag, which means less overhead, easier to read, better maintainabilityThis is a small example, but in situations where there are a lot of the same types of elements, the benefits will be more apparent
Lets build upon an earlier example
So by adding the class to a parent element and referencing it there, we can style more common elements with less amount of code
Since these tags both look exactly the same, its better to combine the styles into one by separating with a comma, and this will make it more readable and easier to change later
Also using shorthand rules will make your code cleaner and smallerSo as we can see here, we are using shorthand rules in 3 areas, for margin, color, and font
put a color and layout glossary at the top of your css to make things like colors and sizes easier to findFlag different sections like “starTags” or “starMain” to make it easier to jump to those sections with control F
If you’ve ever asked me for help for a layout problem, my first question to you is usually “have you validated?” What might seem like a small problem can often be a symptom of a larger issue. If tags aren’t closed or even in the wrong order, it could make the entire page unpredictable in other browsers. Also there are other visitors to our sites who look only at code, which is search engines. While its not strictly proven that and invalid page will always rank lower than a valid page, (although there have been tests done) it makes sense that these spiders would have an easier time moving through our pages if they were written correctly.
It has been mentioned that floats are one of the more difficult aspects of CSS, so I thought I’d take a few moments to talk about themElements following a floated element will wrap around the floated element.So if you have content flowing around a floated element, but you don’t want it to wrap, then you need to clear the float. The best way to do it is to pick the next element and put the clear declaration on it, but sometimes that’s not possible, so you can use this code to do it
