use the following search parameters to narrow your results:
e.g.(and 'dog' reddit:'aww' site:'imgur.com')
(and 'dog' reddit:'aww' site:'imgur.com')
see the search faq for details.
advanced search: by author, community...
Is there reason for using both ID and classes when styling a website? (self.web_design)
submitted 3 months ago by embryo
I know how they differ, but I don't understand why you'd even want to use IDs. They're 'unique', but so what?
Wouldn't you achieve the exact same result with classes?
[–]maloney7 8 points9 points10 points 3 months ago*
I use IDs for JavaScript hooks and for naming different sections and containers. I use classes for reusable styles.
Strictly speaking, neither are necessary as CSS selectors such as nth-of-type, ~ and > (amongst others) can pick out any element you like.
[–]x-skeww 0 points1 point2 points 3 months ago
CSS selectors such as nth-type, ~ and >
nth-of-type, nth-child, and the like are pseudo classes. ~, >, +, and ' ' (space) are combinators.
[–]Legolas-the-elf 9 points10 points11 points 3 months ago
Stop thinking about IDs and classes in terms of CSS. They are first and foremost part of HTML.
When you use an ID, you are talking about a particular element. When you use a class, you are talking about a particular group of elements. Use the id and class attributes in this way.
id
class
A class that is only applied to one element is not equivalent to an ID. It means you are talking about a group of elements that happens to only contain one member. You're talking about a group of elements, not an element.
Using class for everything is like using <div> for everything. Sure, you can do that, but that doesn't mean it's a good idea. id and class have different semantics.
<div>
[–]Ibuildwebstuff 0 points1 point2 points 3 months ago
I'd argue in this case performance is more important than semantics. Benchmarks.
[–]Legolas-the-elf 0 points1 point2 points 3 months ago
I think worrying over the difference in the amount of time it takes to render a page is premature optimisation in almost all cases. The time it takes to render most pages is nothing at all compared with the time it takes for the content to be loaded from the network. Have you profiled your sites and found the rendering to be a significant part of the time it takes to load a page?
[–]hupcapstudios 9 points10 points11 points 3 months ago
We're all humans. We all have two arms and two legs. So, if an alien were to come down from space and say "HEY HUMAN, LET ME PUT THIS RECTAL PROBE IN YOUR BUTT" People would look around wondering who has to put the rectal probe in their butt. But, if the alien said "Hey Bob Ferdinky, you get the rectal probe". We'd all know exactly who the alien was talking about.
So, in summary, Rectal probes.
[–]m4xm4n 1 point2 points3 points 3 months ago
That's a fantastic and surprisingly fitting analogy. Surprising because it involves anal probes.
[–]angerZen 0 points1 point2 points 3 months ago
Surprise! Aliens.
[–]mtx 2 points3 points4 points 3 months ago
IMHO, it's about documentation. If I have to edit someone else's html/css, I would find it easier to read if I knew which elements are being used repeatedly and which ones are unique.
[–]DexDark 0 points1 point2 points 3 months ago
This tutorial might be helpful http://learncss.tutsplus.com/lesson/ids-and-classes/
[–]Bankzzz 1 point2 points3 points 3 months ago
Here is one point I can bring to the table: When I am working on someone else's style sheet, if I see a certain element that I have to modify has a "class" I then have to go through the code and check to see if there are other elements that have the same class so that I don't mess up other things in the process.
With that being said, the reasons to use classes are just as few as using ID's when you can make a lot of the same selections and cut down on code just by using more advanced selection techniques. I still use them for CERTAIN things when I have to but only IF I have to.
[–]WoollyMittens 1 point2 points3 points 3 months ago
If there's one of 'em, use an id. If there's several of 'em, use a class name.
[–]x-skeww -6 points-5 points-4 points 3 months ago
You're right. There is no reason to use IDs on the CSS side. There are many people who stopped using them (me included).
IDs are nice for JavaScript and fragment links. Use them for that stuff.
[–]pointy 8 points9 points10 points 3 months ago
I do not agree with this, at least not as a universal rule. There are performance considerations with CSS just like there are with JavaScript. If there's an element on a page that's naturally unique and of significance for page styling, using an id is appropriate.
[–][deleted] 2 points3 points4 points 3 months ago*
There are bigger client performance considerations to think about in regard to things like box-shadow. Unless you're working on a a highly complex site, nobody is going to feel it. Here are the following benchmarks.
.selector { /* Takes about 0-1ms per 1 element (still 1ms for 14) */ } #selector { /* Takes about 0-1ms per 1 element */ }
Even worse, if you have a highly complex site, using an ID for everything would mean needing to assign different ID's, and then reassign them again in CSS if you're to style them differently.
Now, in terms of javascript, it can make a difference, but the new Selectors API is something to get excited about.
Back to CSS
I do use classes in all my css now because of specificity, this is how it's measured:
By not using ID's you're removing a variable that's going to later fuck you up when you visit your stylesheet in 6 months.
How do you remember your username?
[–]x-skeww 1 point2 points3 points 3 months ago
Look at the numpad. It's a pattern.
[–][deleted] 1 point2 points3 points 3 months ago
Good question.
Have you ever decided to try to memorize Pi? I'm not very good, as I can only seem to recall 4 digits past the decimal... but numbers are relatively easy for me. It helps that the numbers form "Xi" on the numpad, but I can do it without the pad as well.
Was thinking about going longer, 9 characters just isn't enough.
I think if I ever get another account, it will be: 698741235374129638527418965
[–]x-skeww -1 points0 points1 point 3 months ago
Another thing I'd like to add:
Primary performance considerations (apart from things like reflows and expensive drawing operations) are file size, the number of selectors, and the average token count per selector. These are generally higher in projects which use IDs. (Side effects + human nature, it's unavoidable.)
In order to beat the specificity, IDs need to be carried over. And then again... and again... and again. This may be repeated 100+ times. I've seen that very often.
Every rule which becomes "infected" with an ID can't be reused.
Also, there aren't any things which are "naturally unique". Header, footer, logos, left side bar, right side bar, main container... All of those things may occur several times. There will be changes. There will be changes before going live and of course there will be also changes along a project's lifetime. Expect the unexpected.
Another problem is that people tend to get their abstraction levels wrong (typically by trying to get a 1:1 relationship with backend components). E.g. they will say there can be only one login box. Therefore it shall use an id. And then they go ahead and use that silly login ID in every related selector. And then they try really hard to make it look like any other box or form... just with some color/background variation of the box. Using composition and maybe one modifier (=just one additional selector with one property/value pair) would have been the better option.
That whole "this is a completely unique and oh-so-special" thinking is generally oh-so-wrong. By default, everything should just look like more of the same. That's what naturally happens if you reuse your bricks. If you do so, you'll only have to add those few tiny things which are different (if any).
[–]x-skeww -2 points-1 points0 points 3 months ago
There are performance considerations with CSS just like there are with JavaScript.
Using IDs on the CSS side doesn't improve performance. Querying and matching are completely different things.
Matching in general is very fast.
If there's an element on a page that's naturally unique and of significance for page styling, using an id is appropriate.
The point is that it doesn't improve anything. Now you can use that element at most once per page. How does that make anything better? What did you gain by that?
That's right. Absolutely nothing.
But you have to pay for that. You now have one more specificity digit to deal with.
[–]tree_wex -1 points0 points1 point 3 months ago
ids get selected faster than classes, but are obviously less flexible and versatile.
[–]x-skeww 2 points3 points4 points 3 months ago
You're confusing this with JavaScript.
[–]LousyBog 1 point2 points3 points 3 months ago
IDs are selected faster when processing stylesheets as well.
Unless you open a page with over 9000 selectors on a 2006 netbook running IE6 you won't probably ever notice any difference since CSS processing is ridiculously fast. But still, tree_wax is right.
In an over the top micro benchmark you can get a ~1msec difference. In the real world, you won't even get that. Realistically speaking, there is no difference.
[Well, actually there is a difference. If you don't use IDs, it's way easier to keep your CSS cruft free. The result are smaller files with fewer selectors. This is faster. Additionally, it saves time and money, because things are a tad easier to handle now. There are many people who tried, researched, and experienced these things.]
Drawing one box shadow or one gradient or one rounded box or doing one simple query with JavaScript is several times (easily 100 or even 1000 times) slower. Even decoding and drawing one lousy image is super heavy in comparison.
Gzip your favicon. There. Bigger gain. Fits into one packet now.
Seriously, if it would be worth it, Steve Souders (and friends) would tell us to use IDs. Google and Yahoo would tell us to use IDs. Browser vendors would tell us to use IDs. YSlow, Page Speed, and CSS Lint would tell us to use IDs. They don't.
Only people who heard about the performance benefits on the JS side and who haven't done any kind of research, religiously believe that there must be massive performance gains on the CSS side, too. Spoiler: There aren't any.
[–]LousyBog 0 points1 point2 points 3 months ago
I completely agree with you, I was just trying to be an smartass.
Although any JavaScript-heavy website seriously benefits from having IDs instead of classes, I was a class-only developer myself until I started to incorporate JS.
any JavaScript-heavy website seriously benefits from having IDs instead of classes
Yes. But that doesn't mean that you should use those IDs which were added for JavaScript on the CSS side. Separation of concerns is a good thing. You really don't want to introduce any kind of coupling between unrelated parts of the stack.
all it takes is a username and password
create account
is it really that easy? only one way to find out...
already have an account and just want to login?
login
[–]maloney7 8 points9 points10 points ago*
[–]x-skeww 0 points1 point2 points ago
[–]Legolas-the-elf 9 points10 points11 points ago
[–]Ibuildwebstuff 0 points1 point2 points ago
[–]Legolas-the-elf 0 points1 point2 points ago
[–]hupcapstudios 9 points10 points11 points ago
[–]m4xm4n 1 point2 points3 points ago
[–]angerZen 0 points1 point2 points ago
[–]mtx 2 points3 points4 points ago
[–]DexDark 0 points1 point2 points ago
[–]Bankzzz 1 point2 points3 points ago
[–]WoollyMittens 1 point2 points3 points ago
[–]tree_wex -1 points0 points1 point ago
[–]x-skeww 2 points3 points4 points ago
[–]LousyBog 1 point2 points3 points ago
[–]x-skeww 0 points1 point2 points ago
[–]LousyBog 0 points1 point2 points ago
[–]x-skeww 0 points1 point2 points ago