6 Common CSS Misuses

CSS, Web Design Comments Off

Since the inception of the internet, there has always been a struggle between HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). Clean and proper HTML is very structured and semantically organized, but not very pretty. Creativity was never part of the HTML specification, which is where CSS comes in. CSS aims to take this structured information and present it more aesthetically and in a more personal way to the user, but designing things that look nice does not always work well with the HTML box model and more often than not CSS is misused to get things to render the way you intended. CSS is flexible enough that you can use and misuse it in a variety of ways and things will probably come out correctly, but it can impact the performance, scalability and flexibility of your site in the long run. Here are 6 most common misuses of CSS that I have found in no particular order and some suggestions how to avoid them.

1. Reset All (*)

When designing a website, you want it to look the same for every user, regardless of browser choice. Every browser has its own built in stylesheet for how to render each HTML tag. Unfortunately these stylesheets are almost never identical (especially when dealing with IE) and can lead to strange rendering behavior. To deal with this it is a common practice to use what are generally known as reset classes, but a very common misuse is the dreaded RESET ALL.

Example:

* { border: 0; font-size: 1em; margin: 0; outline: 0; padding: 0; }

I cannot stress how wrong this is. DON’T EVER EVER EVER EVER DO THIS! What this simple and seemingly innocuous statement does is give every element a default margin and padding of 0. It is true that we want to reset most elements down to a baseline (be it a 0px or Xpx margin/padding/border etc) but the blanket statement will also reset thing you probably did not intend on resetting and you will be stuck redefining elements in the worst way possible. Example of this would be lists and blockquotes. These tags which we take for granted would all of a sudden lose all spacing and would look like crap.

Instead of creating this headache for yourself, list all the tags you want to be identical and reset them. Here is the definition I use in my work. Feel free to use it yourselves.

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 
abbr, acronym, address, big, cite, code, del, 
dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td 
     { border: 0; font-size: 1em; margin: 0; outline: 0; padding: 0; }

2. Styling ID’s

<div id="header"> ... </div> 
------------- 
#header { font-size: 2em; height: 100px; padding: 10px; width: 800px; }

While there is technically nothing wrong with applying a style to an ID tag, it does remove any performance benefits that a style sheet provides.Here is what I mean. When your browser requests a website, it downloads both the HTML markup and the CSS stylesheet to your computer. Then as it renders the page (top down mind you) the browser searches the CSS stylesheet by class and loads the style definitions into memory. When a style class is reused, it happens instantly allowing the page to render faster and without additional resources. Unlike classes, ID tags can only be used once per page, meaning that applying a style by ID will never get reused and provides no benefit. If you do want to style just a single element, just add a class to it, and add it as a class style definition. It will render exactly the same, except if at any point in the future you want to add another element with the same properties, you will be able to. Another thing you can do is partition the overall style into subclasses so they are more applicable. Here is an example:

<div id="header" class="bigtext container header"> ... </div>
------------
.bigtext { font-size: 2em; }
.container { padding: 10px; width: 800px; }
.header { height: 100px; }

In this example, I partitioned the the style sheet into 3 classes. One for typography, another as a generic container and the last as specific styles for the header element. Even though this particular element might never repeat, it is conceivable to have multiple elements that require large font text or lots of elements that have a set width and padding as the header element and partitioning it this way will allow for most of those to be reused. Be very careful not to over-partition though by creating overly specific definitions. Read on.

3. Overly Specific Class Definitions

<div>Regular content....</div> 
<div class="red">Sale Sale Sale!!!!</div> 
.... 
<div class="red">ERROR!</div> 
------------ 
.red { color: red; }

One of the greatest benefits that using CSS is being able to change the look and feel of an entire site simply be changing a few parameters without ever touching the HTML. By overly specifying definitions, you completely miss this point. The above example has an error and a Sale statement that both need to be rendered in red as to stand out. If we ever wanted to change the color the sale statement is rendered, we would no longer be able to just change the CSS definition as that would cause all elements with class red to change color, and would also make it nonsensical to have class red render another color. Instead we would have to either edit the HTML and change the class name to ‘blue’, for example.

Instead try to create a set of classes that are both descriptive and reusable. In the above example we have 3 types of text that would exist on the site: regular contextual text, highlighted text and error text. We can then create several reusable classes to work:

<div>Regular content....</div> 
<div class="highlight">Sale Sale Sale!!!!</div> 
.... 
<div class="error">ERROR!</div> 
------------ 
.highlight { color: red; } 
.error { color: red; }

By using this method, we are not tying the class names to the values that are set and while still having reusable classes.

4. Misuse of !important directive

.foo { padding: 0px !important; }

CSS is a very hierarchical language. It is written so that definitions that come last overrule those that come before. Perfect example:

<div class="red blue">Foobar</div> 
------------ 
.red { color: red; } 
.blue { color: blue; }

In the above example the text Foobar will render blue, but if we switch the order of the CSS class definitions as so:

<div class="red blue">Foobar</div> 
------------ 
.blue { color: blue; } 
.red { color: red; }

then the text will render red. The only exception to this rule is the !important directive. Using this directive means that nothing can overrule this definition. If we make the red class !important, than the text will always render red. Only way to overrule it at that point is to make the overruling properties important. That is where the problem comes up. Once you start using the !important directive, sooner or later you are going to be using them to over rule each other and then you got a huge mess. The other problem with them is that if you have the same class defined in different places (a common practice when splitting typesetting and layout) having one somewhere can lead to many frustrations and countless hours trying to figure out why things are not working as expected.

<div class="red blue green yellow orange purple">
 I will always be dark blue.
</div>
------------
.red { color: red; }
.blue { color: DarkBlue !important; }
.green { color: green; }
.yellow { color: yellow; }
.orange { color: orange; }
.blue { color: LightBlue; }
.purple { color: purple; }

As you can see from that example, it does not matter how many classes have been implemented and assigned and in which order. It does not even matter that we overrode that class name itself. I view the !important directive as a hack instead of a feature. If you are using it, then you are hacking around something that should have been designed differently. I have never had a case where I absolutely had to use this directive and re-arranging elements and classes could not be done. Well, there was one case where a 3rd party plugin was breaking my layout by breaking a few of these rules so I had to use it to override it.

5. Problem with catch-all definitions

.header * { line-height: 1.5em; } 
 or 
.footer div { font-family: Arial; }

Catch-All tag definitions are really powerful for setting a baseline style in your design and the fact that you can chain them provides even more flexibility, but they can be dangerous. Styling a tags this way will apply that style to EVERY instance of said tags. It is the catch all we talked about earlier and sometimes it can lead to writing more code to handle the problems when proper planning could have helped. More often than not, I have seen this used as a way to override the typesetting in a child element, except 3 lines down there is another child element overriding that one. For example:

<div class="header"> 
 <h1>TITLE</h1> 
 .... 
 <h1 class="original">OTHER INFO</h1> 
</div> 
<h1>Welcome</h1> 
------------ 
h1 { color: black; font-size: 2em; } 
.header h1 { color: red; font-size: 3em; } 
.header h1.original { color: black; font-size: 2em; }

What we get then is repeating classes and code that really don’t need to be there. Instead of being lazy, just create one baseline and use classes to override properties you want to override. Example:

<div class="header"> 
 <h1 class="title">TITLE</h1> 
 .... 
 <h1>OTHER INFO</h1> 
</div> 
<h1>Welcome</h1> 
------------ 
h1 { color: black; font-size: 2em; } 
.title { color: red; font-size: 3em; }

By just changing how I organized my classes I was able to get rid of one class definition and now don’t have to worry about if the title class will affect anything else it should not.

6. Inline Styling

The last, and one we are all guilty of is using that tempting inline style tag. Sometimes its just easier and faster to add the little style tag to your element than open your stylesheet, find the appropriate place, name it the appropriate name, etc. After all its just one little element.

<div style="padding: 10px;">I will always be 10px!</div>

I have done this. We have all done this. Hell, I still tend to do it every once in a while. Even though there is technically nothing wrong with adding a style, it does break pretty much every benefit that style provides. It is the equivalent of styling an ID tag, styling too specifically and inline styles override almost any stylesheet definition.

If you are working with multiple developers, or at some point expect to hand over the code to someone new, having a mix of stylesheet and inline style will cause a massive loss of time and energy. Just say no and do it properly.

Powered by WordPress | Theme by Bojan Beran Feedburner Posts RSS