School Dazes: Classes, Ids, and You!
8/9/15
Classes & Ids! They sound simple when you first hear about them: classes are used repetitvely, ids are use for unique elements. Fine, what's so hard to grasp about that? As it turns out, until you're actually using them practicially, it can be hard to know just which you're meant to use. However, I have a trick I like to use to distinguish:
In high school, you had multiple CLASSES in a day... but you had just one unique student ID that you used to buy your lunch.
Alernately, you might think of it that there were many students in your CLASSES, but your ID is what made you unique.
In other words, if you're going to use it throughout the code (like classes throughout the day) you'll use a class. If you're going to use it just once - it gets a unique id, just like you did.
So, why would you use classes & ids? There are so many selectors available to us already - why would we possibly need these?
When it comes to ids, the answer should hopefully be pretty self-evident: you want to make a unique change to the document, something you won't be recreating throughout. Maybe you want every part of a word or phrase to look a little different, with alternate capitalization & colors, or maybe you just want to draw emphasis to just one or two words in a sentence, like in our example below:
I am very excited to talk to you about ids!
Here is a screenshot of my HTML & CSS side-by-side:
Can you tell how they match up?
Moving onto classes! We need classed because, in a nutshell, life isn't perfect. It would be great if everything worked in perfect patterns & you could apply styling once and be done. But the fact of the matter is, sometimes you'll need paragraphs 1, 3, 12 & 17 to look one way, and paragraphs 2, 5, 10 & 14 to look another - maybe out of personal preference, maybe for very good reasons, or maybe because your client is just wants it that way. Who knows? In the end, it doesn't matter though, because classes will help you achieve your aim.
So let's put them to use: We'll use a class or two to make change throughout this paragraph that repeat, and then you'll see how they work! Isn't that neat? Don't you feel like you learned something today? I really hope you did! Happy Sunday, friend, and happy coding!
Just one more thing: I've used my two classes earlier in the post... can you find them?