Common mistakes for CSS-designers to avoid?

Question

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

Answer 1

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 2

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 3

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 4

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 5

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

Answer 6

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 7

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

Answer 8

• 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 9

Misunderstanding or not even considering selector specificity.

body div a.mylinkclass { }

is more specific than

a.mylinkclass { }

Answer 10

Not using Firebug

Answer 11

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

Answer 12

Not using CSS Sprites effectively, or even at all.

Answer 13

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

Answer 14

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 15

Not compressing production code with YUI's compressor

Answer 16

• 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 17

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 18

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 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 considering your audience.

Answer 21

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 22

Applying font-size, font-family or other properties which should be applied on block level to inline elements like a or span.

To give an example Once that kind of css is in use:

a {font-size:12px} /* NEVER! NEVER DO THAT */

Anytime you want to use something like:

<h2>Something about <a href='...'>this</a> and <a href='...'>that</a></h2>

You will also need to add selectors for:

h2 a {font-size:/*same size as for h2*/}

I know this may seem obvious and basic but I've seen it too many times.. The only point where your span or a should manipulate font sizes is a special css class used to make things look different:

a.different {/* do crazy stuff with your fonts */}

Answer 23

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

Answer 24

writing piss poor HTML