Common mistakes for CSS-designers to avoid?

Question

What are some of the most common mistakes made by CSS-Designers?

Answer 1

Not using a reset file.

"The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on."

- Eric Meyer, Meyerweb.com

Answer 2

Using CSS hacks instead of conditional comments when writing styles for IE.

Answer 3

Not accounting for internet explorers broken box model in quirks mode.

Answer 4

Misunderstanding or not even considering selector specificity.

body div a.mylinkclass { }

is more specific than

a.mylinkclass { }

Answer 5

Thinking that:

<div class="topMargin15"></div>

with

.topMargin15 {
    margin-top: 15px;
}

Is somehow and improvement over writing it directly into the style attribute. You are supposed to be defining what it is in the HTML, and what it looks like in the CSS.

Answer 6

Failing to understand the cascade and inheritance thus ending up with a lot of repeated code.

Answer 7

Using class names that are too specific and not generic enough. Eg.

.redLeftNewsHeader

rather than

.header

What happens when you decide to restyle your site with a blue theme? What happens when you want to use the class on items that are not related to news?

Answer 8

Not compressing production code with YUI's compressor

Answer 9

Try to use either margin or padding, rather than both, on an element. You can save yourself from some browser issues.

Answer 10

Not realizing till a year into it (like me), that you can apply more than 1 class at a time.

.Center {text-align:center}
.Disco {background: red; text-decoration: blink;}
.Highlight { font-weight: bolder;}

    <div class="Disco Center Highlight"></div>

Is valid and it will combine them all.

Answer 11

Not checking cross-browser as you develop.

It's best to catch and fix the differences before the whole site is done.

I've lost count of the "My site looks great in Firefox/IE/Safari but it's all screwed up in IE/Safari/Firefox." questions.

Answer 12

Using "0px" instead of "0". Now I consider myself fairly good with CSS and yet I still do it sometimes...

Example: "padding: 0px" instead of "padding: 0"

Answer 13

Not using CSS Sprites effectively, or even at all.

Answer 14

not understanding what floats are, how to use them correctly, and how to clear them!

Answer 15

Not setting width for floating divs.

Not cascading the styles.

The following is not good:

body {   color:"#ff0; }

h2{ color:#ff0; text-decoration:underline; }

This would be better

body {   color:"#ff0; }

h2{ text-decoration:underline; }

FF0 will automatically be applied, if not interfered in some other style definitions.

Answer 16

Ignorance of selectors.

For example, if you have a bunch of links in your footer that you want to style differently from normal links, don't put a class on each one, use a descendent selector.

// instead of this
.footerlink {
}

// use this
#footer a {
}

You can also group selectors with commas:

#header a, #footer a {
}

Other useful selectors include:

• child selector: E>F
• sibling selector: E+F
• attribute selector: input[type="text"]
• first child pseudo class: :first-child (incredibly useful for headings - you don't want the first heading in a div to have a top margin, but you do for subsequent headings)

Unfortunately, those latter few don't work in IE6 so use for progressive enhancement only (if you support IE6).

Answer 17

• Not understanding (or even knowing about the existence of) box model

• Not knowing what selectors are, or how to correctly use them

• Using words to name colors (not all browsers know all the words)

• Using invalid styles (padding:auto for example)

• Writing #ffffff instead of #fff. (It's 3 pairs, which can be condensed into just 3 single values)

• Not using a # on hex colors

• Not making sure your page won't break when used at 150%-200% zoom. Old people/Almost blind people use the internet, too.

• Not using enough contrast or white-space

• Not validating the markup/css

• Make sure your page degrades nicely

• Calling yourself a CSS designer, you aren't designing a stylesheet, you're designing a website, by implementing a stylesheet.

• Using absolute positioning (it's going to look fucked up on somebody's computer, somewhere)

• Not keeping the stylesheet neat and organized. Don't listen to these websites that tell you to put everything on one line, because it saves bandwidth. You should keep it the way you find it easiest to read and modify, and then compress it when you're done.

• Not putting quotes around long font names

Forgot one, my bad

• Caring about IE6. Every time you argue that it should be supported or that people haven't updated yet, that's their fault, maybe if everything looked fucked up they'd be more motivated to download something that wasn't a heaping PILE OF SHIT. I could write a 20 page essay on how much I hate IE6, and I'm not joking. I once wrote an ex-boss a 5 page essay on why IE is the worst browser to use. He forwarded it to all his friends, and they all use Firefox or Safari now.

(I quit after he told me he wanted his website to look like his industry's leading company's website. It was an excellent website, and even had an original music score that played when you went through the galleries. He was paying me something like $15/hr (I was in highschool) and only let me come into work 9 hours a week.)

Answer 18

• Using units that don't work with high dpi screens
• Not using the full width of the screen
• Not using a print stylesheet that hides everything but the content the user wants to print

Answer 19

• Trying to do anything with CSS when the browser is in quirks mode.
• Not using Firebug's tools to see the layout of your elements and refine your CSS.
• Making fixed-height containers and not dealing with overflow.
• Trying to use transparent PNG-24's in IE6. (Adobe Fireworks can make transparent PNG-8's that work in IE6.)
• Not using units at all (very bad!).

Answer 20

Not using Firebug

Answer 21

Not considering your audience.

Answer 22

I'd have to say using float's improperly and not understanding collumns. You can mutilate that kind of stuff really easily(personal experience.) so yah...float's and clear's.

Answer 23

writing piss poor HTML