What are some of the most common mistakes made by CSS-Designers?
24 Answers
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.
-
13On a related note, are you aware you can create a selector that looks for two or more classes using div.Disco.Center { }?– JoelJul 27, 2009 at 22:43
-
6what happens if you want to change your site design and you no longer want that element centered? now you have "disco center highlight" left aligned! hmmmm...– JasonJul 27, 2009 at 23:19
-
@Joel: I know about using two classes. I did not know about the dual selector. That's cool.– NotMeJul 28, 2009 at 14:51
-
now forget about dual selectors again, because there is always an Inevitable Exception among browsers– n1313Sep 1, 2009 at 14:41
-
“are you aware you can create a selector that looks for two or more classes using
div.Disco.Center
” — doesn’t work in IE 6 though. Feb 18, 2010 at 4:10
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
-
1Agree, resetting standard rendering should be the first step. Saves headaches later. Jul 27, 2009 at 22:18
-
6
-
1@Staticsan, modify the reset to accommodate your needs. My suggestion isn't meant to suggest only Meyer's reset. If you have a smaller, less-involved, stylesheet - use it :)– SampsonJul 27, 2009 at 23:52
-
3I prefer a "set" to a "reset". It's pointless to zero all margins and padding and then add them back again later. There aren't a huge amount of elements that need their margins reset (e.g.
div
,form
,table
). Often the defaults are fine anyway and browsers mostly adhere to the defaults at w3.org/TR/CSS2/sample.html Jul 27, 2009 at 23:59 -
1@DisgruntledGoat - Meyers' "reset" doesn't set all margins and padding to zero. You must be thinking of somebody else's reset...– SampsonJul 28, 2009 at 1:07
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.
-
1Yep, way too many times I've seen something like: .Red { colour: #ff0000; } Jul 27, 2009 at 22:29
-
1i can argue by saying: .NewsItem is not good either, what if I want to reuse the "style" again, do I have to create a new one with a proper name? I am going to reuse the style that is for sure, I dont want to go back to the stylesheet and create new names every time... to me, .red is more indicative of a "style" than .newsTitle– AyyashJul 27, 2009 at 22:54
-
9@ayyash - incorrect. something like .newsTitle is way more explanatory than .red. what if you want to change the design of your site a year from now and you want all your headlines to be yellow? now you've got news titles with .red classes that are actually yellow!– JasonJul 27, 2009 at 23:17
-
1using such rules as a mini css framework will save a huge time in the design phase, I think.– sepehrJul 28, 2009 at 1:41
-
1It's also worth nothing that inline html styles are illegal in strict HTML/XHTML Jul 28, 2009 at 18:13
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).
Using CSS hacks instead of conditional comments when writing styles for IE.
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.
Failing to understand the cascade and inheritance thus ending up with a lot of repeated code.
-
9
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.)
-
3"It was an excellent website, and even had an original music score that played when you went through the galleries" Bullet point 16; > Making websites with background music :P Jul 28, 2009 at 1:33
-
6This is full of bad advice. Using absolute positioning is fine if you know how to use it (normally within relatively positioned blocks). And your reasoning applies to every single CSS rule. #ffffff vs #fff is a style issue, nothing more (I prefer consistency with the longer style). Jul 28, 2009 at 1:50
-
If you're a multimillion dollar corporation, you're probably paying somebody enough money to put music on your website in a way that it's going to add something of value to the website. Especially in an art-related industry. It's all part of the experience, mannnnnn. Jul 28, 2009 at 1:50
-
IF YOU KNOW HOW TO USE IT. If you know how to use it, you wouldn't be making mistakes, now would you? If you are new to css, and you don't understand box model, or how to lay things out fluidly, using absolute positioning is not a viable alternative. Jul 28, 2009 at 1:52
-
1Without going into too much detail, drop down menus. Typically you set each
li
to a relative position, then the nestedul
to an absolute position, moving it across or down. Also vital any time you want to position an element in, say the bottom right of an element. Jul 31, 2009 at 12:49
Misunderstanding or not even considering selector specificity.
body div a.mylinkclass { }
is more specific than
a.mylinkclass { }
-
Sorry, but this is incorrect. Try it/read the specification. (
0, 0, 0, 3
and0, 0, 1, 1
.)– andreasAug 2, 2009 at 12:14 -
not understanding what floats are, how to use them correctly, and how to clear them!
Not accounting for internet explorers broken box model in quirks mode.
-
11Even going into quirks mode in the first place is a mistake that should be avoided.– thedzJul 27, 2009 at 22:23
-
1Some times you are stuck with it when maintaining an old crap website ... Jul 27, 2009 at 22:27
-
-
5
Not setting width for floating div
s.
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.
-
But what if they exist in two separate sheets (body controlled by someone other than me) and you want to force #ff0 on the h2?– JoelJul 28, 2009 at 0:19
-
1In that case, we are made to force the extra style. But what I am trying to point here is - we generally tend to forget the concept of Cascading. Jul 29, 2009 at 18:02
- 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
-
I wouldn't class the full width thing as a mistake. Lines of text that get really long make them difficult to read. Jul 28, 2009 at 1:45
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?
-
Absolutely, but on some sites this is necessary. Sometimes CMS (vendors) split things into fairly small chunks and modules so that your CSS ends up looking like this.– dylanfmJul 27, 2009 at 22:40
-
2Usually you can get around this by wrapping a container div around the HTML and giving that a class name and then use inheritance eg. <div class="news"> <div class="header"> content </div> </div> .header { color:blue; } .news .header { color:red; } Jul 27, 2009 at 22:48
-
1I'd rather too specific than too generic. It's confusing when css classes act on elements that you weren't expecting them to.– oliveJul 31, 2009 at 19:32
-
@lhnz That is down to bad practise and nothing to do with using generic names. I'd rather have a generic class called .list than one called .newslist and not be able to apply it to, say, an events list because the name is confusing. Inheritance is how you sort this out, not naming. Jul 31, 2009 at 19:56
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
"
-
3This isn't really a "mistake" because it has no negative effects, they are both the same. But it is pointless to define units when the value is zero. Jul 28, 2009 at 0:03
-
3That's not a mistake. I often do this to differentiate between things that are in px, %, and em. Jul 28, 2009 at 0:22
-
1@Sneakyness: but if the value is 0 then 0px=0%=0em=0en=0pc etc. How does adding px differentiate anything? Jul 28, 2009 at 16:11
-
1It wouldn't make any difference, but I think it looks neater to be explicit.– oliveJul 31, 2009 at 19:30
- 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!).
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.
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 */}
Try to use either margin or padding, rather than both, on an element. You can save yourself from some browser issues.
-
3They have separate and distinct purposes (especially when it comes to backgrounds). You just have to be aware of how they affect the box model. Jul 28, 2009 at 1:51