What, Where, When, Why ID’s and Classes (css)

What, Where, When, Why ID’s and Classes (css)

Learn when to use Classes vs. ID’s.

Even higher level web developers today may have missed the school lecture that explained why we use a class vs an id, or the one about multiple classes. So i like to remind the younger generation of web developers in which situations to use the correct one.
ID’s are unique, [...]

Learn when to use Classes vs. ID’s.

ID’s are unique, just like your social security number or your drivers license number an id needs to be unique, it should not be repeated any where on the page. Also an element can only have one id. Personally i use id’s for elements like header footer and navigation/menu.

Classes are awesome, first of all you can apply a class to as many elements as you want, so any element with a matching class will have the same css properties applied to it. The second thing that makes classes awesome is, you can apply multiple. I remember a while ago i had just learned about multiple css classes and i had a project with a 250 line css stylesheet. I was able to get the stylesheet down to 50 lines using multiple classes on elements. So for example if i knew i was going to set a bunch of elements to width of 300px i used:



<style>.w300 {width:300px;}</style> <div class="menu w300"></div>

How awesome was that, don’t you feel clean and super cool? Well i do, i’m weird like that. Now anytime you have an element that needs to be width 300, just add the w300 class. So use this to your advantage, if you notice repetition, something you have to specify over and over again, then feel free to make a class for it, even if you don’t shorten the amount of elements being addressed by your stylesheet you are still removing 100’s of characters from the stylesheet adding usability.

Now go out there young css experts and give ‘em hell