CSS: Things to Avoid
1. Avoid not resetting the browsers default setting.
When creating a new website or web page, the first thing you should do is reset everything to zero. Browsers have their own default settings, mainly for padding and margins. Resetting all the tags to zero will ensure you start from scratch. Once you have used a reset CSS file, you can now start on styling your page.
<link rel="stylesheet" href="style/reset-min.css" type="text/css" media="screen" />
2. Avoid not accounting for other web browsers.
If you have applied a reset CSS file to your page, you’re half way there. Apart from resetting the browser’s default settings, you also have to keep in mind that not all style properties work the same for all browsers. A perfect example is the difference of overflow between IE6 and Firefox. Here is a screen shot of the difference between the two:
Internet Explorer 6Firefox
See here for yourself
3. Avoid using Inline Styles.
Using inline styles can create a few issues.
One, it makes your code longer and heavy. The longer the code, the harder it is to troubleshoot and the larger the file size of the page.
Two, changing styles on one single style sheet is easier than looking for them all over the site.
Three, it can save time if you are going to be using that same style throughout the page and website. You can apply a class an endless amount of times throughout a website, with only needing to type out the properties one time.
The best way and cleanest way to apply CSS is through the use of external style sheets.
4. Avoid not formatting your CSS file.
Formatting your properties will make it a lot easier when you come back to edit them in the future. You don’t want multiple styles being strung together in one line. There are two main techniques of formatting your styles.
One line:
div {padding:5px; font-size:12pt}
Block:
div {
padding:5px;
font-size:12pt;
}
5. Avoid being redundant.
A lot times you’ll find that your styles are redundant. Sometimes you can easily simplify and combine styles. For example, instead of using:
table {padding:3px; margin-top:10px; font-weight: bold}
div {padding:3px;margin-top:10px; font-weight: bold}
You can simplify these two and use the following:
table, div {padding:3px; margin-top:10px; font-weight: bold}
6. Avoid not using a shorthand format.
This is also another method of simplifying and avoiding redundancy. Instead of spelling out each property over and over, you can put their values on one line.
Here is an example without the use of shorthand:
.style1 {
border-right-width: 2px;
border-right-style: solid;
border-right-color: #FFF;
}
Here is an example with the use of shorthand:
.style1{
border-right: 2px solid #FFF;
}
7. Avoid using style titles that are too specific to what it does.
For example, let’s say you want to make a title of a paragraph look like this:
About Our Company
You create a class named “.large-red-font” in order to create this appearance. The title itself is pretty self explanatory on what the class does, which is fine, but…
What happens if later on you change your mind or restyle your site? What happens if you don’t want that paragraph title being red and that large? The title “.large-red-font” can be confusing if you want the paragraph title to appear like the following:
About Our Company
Instead you should use less specific names, so if a change happens in the future, it’s not as confusing.
