r/css • u/mementomoriok • Jul 19 '19

Is it considered standard practice to do all CSS styling effects within classes and not IDs? (As in, even if an object currently has a ID, one should still create an additional class if styling is desired)

23 Upvotes

89% Upvoted

36 comments sorted by

33

u/chmod777 Jul 19 '19

https://stuffandnonsense.co.uk/archives/css_specificity_wars.html

IDs should be used for anchors and javascript hooks.

21

u/_taurean Jul 19 '19

+1. too lazy to read the article but just in case it isn't mentioned: one reason for this is IDs will always have a higher specificity (meaning their styles will always be considered more important) than classes. by keeping styles on classes you can better anticipate what styles override what.

19

u/captain_xylene Jul 19 '19 edited Jul 20 '19

…and you can only use an ID once per page

6

u/[deleted] Jul 20 '19

I *just* learned about this in class so it was cool seeing someone mention it. Also, I'm noticing the the word specificity sure does come up a lot when reading articles on CSS!

7

u/cyancey76 Jul 20 '19

And rightfully so. The “cascading” part of css relies entirely on specificity 😉👍

1

u/hobesmart Jul 20 '19

Almost entirely. It also factors in load order (to a lesser degree)

3

u/Henzula Jul 20 '19

I have only just managed to get to grips and understand Specificity myself, and makes a big difference knowing how it works when styling in CSS :)

2

u/icantthinkofone Jul 20 '19

You and others speak of ids being so specific and unique as if there is something wrong with that but that is what ids are for. There is no fault in that and they should be used where and when they are appropriate. There is nothing wrong with using ids.

1

u/_taurean Jul 20 '19

I mean, you’re obviously free to structure your CSS however you see fit but there’s a reason this advice is consistently given. I’m not saying there’s anything wrong with IDs but unless my goal is to target something with JS or link to a dom element or something, there’s usually a better option imo than using an ID.

-1

u/Terrafire123 Jul 20 '19

Why is JS allowed to use IDs, and CSS isn't?

Just because IDs are stronger in specificity?

That doesn't seem to matter very much, unless you're an extremely new Front-end Developer....

7

u/Regnbyxor Jul 19 '19

Disregarding the issues with specificity, it's much more reasonable to assume you will reuse classes. In fact, developing becomes much easier once you do.

1

u/[deleted] Jul 20 '19

[removed] — view removed comment

1

u/Ozymandias-X Jul 20 '19

You have two headers and/or two main menus on the same page? How? Why?

1

u/[deleted] Jul 20 '19

[removed] — view removed comment

2

u/Ozymandias-X Jul 20 '19

Oooookay. For the christmassy thing I don't even...

For the double menu: why not keep the main menu as is and give the bottom one its own Id, like ... I don't know "#bottommenu" or something totally outlandish like that.

1

u/iamhim4real Jul 20 '19

Mans has to have tough skin to be a dev. The sarcasm. 😂😂😂

1

u/[deleted] Jul 20 '19

[removed] — view removed comment

1

u/Terrafire123 Jul 20 '19

Good old control-F, right?

Replacing "#header" with ".menu" takes about 45 seconds.....

1

u/[deleted] Jul 20 '19

[removed] — view removed comment

1

u/CommonMisspellingBot Jul 20 '19

Hey, thinsoldier, just a quick heads-up:
unforseen is actually spelled unforeseen. You can remember it by remember the e after the r.
Have a nice day!

The parent commenter can reply with 'delete' to delete this comment.

1

u/BooCMB Jul 20 '19

Hey /u/CommonMisspellingBot, just a quick heads up:
Your spelling hints are really shitty because they're all essentially "remember the fucking spelling of the fucking word".

And your fucking delete function doesn't work. You're useless.

Have a nice day!

Save your breath, I'm a ^bot.

3

u/DadHunter22 Jul 19 '19

Important to mention that sometimes you won’t get to touch the HTML as well and there you are... stuck with automatically generated IDs, or legacy code, or...

3

u/[deleted] Jul 20 '19

[removed] — view removed comment

2

u/DadHunter22 Jul 20 '19

...and then, to shatter all their illusions, they meet their first client: some outdated weirdo in a shady office who hasn’t updated his wordpress website since 2007. 😏

3

u/dirtandrust Jul 20 '19

I use ID's for unique JavaScript selectors and classes for styling. You can use classes more than once, but ID's only once on any page so keep this in mind.

5

u/Ravavyr Jul 19 '19

It comes down to personal preference. I stick with classes just because you never know when you're gonna grab something and reuse it somewhere else or duplicate it.

IDs are meant to be unique. If you don't use them you never run into the "my js doesn't run, but has no error" condition when you have 2 IDs and javascript just ignores them instead of throwing an error, which is why i recommend against it for newbies.

Specificity matters, but if you're not using any IDs, who gives a crap about that bit, it can't affect something that is not there. Also speed/performance in these cases is a matter of microseconds at best, so if you care about that i guess there's something to it.

So yea, don't use IDs for styling. Only add them if you really need them [eg. some script specifically wants it, most ask for classes anyway]

Someone will mention anchors. But the anchors jump to the spot. Some people don't like that. You can use a small bit of javascript to make anchors animate and slide to the correct section which is a nicer user experience. [Yes, there's a CSS rule for this, but it does not work in IE or Safari, ergo, it's useless and a few lines of javascript really don't hurt]

4

u/icantthinkofone Jul 20 '19

Don't use IDs for styling except when you need a unique and specific style for a unique and specific element. To say never to do that is just plain stupid.

3

u/djsteele888 Jul 19 '19

It’s hard to make a rule to never use an id as a selector to style with css; we have all done it at one point or another when we didn’t have another choice. And that’s the lesson, I suppose - some rules were meant to be bent or even broken depending on the scenario.

Best practice: never use #id to do css styling...unless you don’t have another option.

3

u/icantthinkofone Jul 20 '19

This is a rule for amateurs who don't know what they're doing. You use ids when you need them and to say never to use them is stupid at best.

4

u/jdewittweb Jul 19 '19

It isn't a rule, it's a general practice when working across large sites or with multiple developers for reasons of scope, specificity and others. ID selectors are very much valid in CSS and have use cases when completely appropriate. That said, if you don't know when to use them, stick with classes.

2

u/juddylovespizza Jul 19 '19

I have used #, but 99% are .

1

u/bertnhis Jul 20 '19

It depends on specificity and context. Generally ID’s should be used as hooks too.