[/cc]
ID’s are designed to be unique, but there are times we don’t, and it doesn’t’ seem to matter.
When it comes to using ID’s for styling, I’ve heard philosophy both ways:
- Don’t use ID’s for styling.
- ID’s are efficient for styling.
Here are the facts, so you can decide how you want to handle ID’s and classes:
- Your stylesheet doesn’t care which you use for styling, and the load time isn’t noticeable.
- JavaScript cares about ID’s, and moves much faster when using ID’s. JavaScript will use the first ID it finds, so this is another reason you should make sure you are using unique ID’s.
- ID’s have more power. For good or for bad, ID’s rule over classes and will take precedence every time.
A good rule of thumb is this:
- When you only have one, use an ID.
- When you want to apply the same style to multiple things/places, use classes.
I hope this clears the air, as you can begin to make educated decisions.
Whitespace Doesn’t Matter
[cc lang=”css”]div{color:red}[/cc]
This means the same as:
[cc lang=”css”]div {
color : red
}[/cc]
Of course, these are not the same;
[cc lang=”css”]ulli { }[/cc]
[cc lang=”css”]ul li { }[/cc]
So, what does this mean?
Find what you’re the most comfortable doing! There are multiple ways to layout your CSS. Some like one line, some like to break it down. Whatever makes the most sense to you.
Semicolons Matter
You may have noticed that in the example above, there is a missing semicolon.
It’s allowed only when it is the last property listed in a group!
I make a habit of always using a semicolon, that way when I’m making edits or add a property, it’s already taken care of.
This, for example, won’t work:
[cc lang=”css”]div {
-webkit-border-radius: 10px
-moz-border-radius: 10px
border-radius: 10px
}[/cc]
No semicolons = FAIL
If you are tooling around in someone elses’ stylesheet, this is something to keep in mind, since it is a small detail that can wreck your design.
I hope these were helpful, and as I said yesterday, share with us a basic CSS concept that was a major “ah-ha” moment for you.
[via CSS Tricks | Image via Squirrelly Mae]
Like this:
Like Loading...
Enjoy some more ChurchMag:
Eric Dye
Support Lead at Valet, and Proprietor of DYECASTING. Human by day, gamer at night, lover of coffee, and all things spicy.
Great tips Eric! I had never heard a definitive answer as to why one would use an id or a class in a certain situation. Makes much more sense now!
Awesome. 😀