CSS: Classes Vs. IDs

One of the things that I have beat my head against a wall repeatedly about was the difference between class and ID Selectors in my CSS code. It has taken me a long time, and I still need reminders (which I keep on a sticky note on my desk), of which Selector indicates class and ID.

I don’t know how many times I made a change or even just wrote the code for the first time, saved it, and refreshed the page only to find absolutely nothing changed. Nothing. As I’m sure you can imagine, this was always beyond frustrating, the first five times I attempted variations of the same problem. The first time this happened, it took me what felt like days to figure out what the problem was. And when I did finally have my light bulb moment, I felt like a moron. I just spent 3 days, coming back to the problem over and over again, and the problem was solved by changing a “.” to a “#”.

I made this mistake time and time again over a period of several weeks. Each time I got lost however, I was able to find my way back quicker. Changing that one little character to another and everything starting clicking again. Until the next time I got them mixed up and the hair pulling began all over again.

The way that I have been most successful in remembering which is which was pretty basic actually. IDs are intended to be specific to one element and they are designated with a “#” symbol. That just so happens to be the same way people designate a number. Such as a phone number, which is particular to one person. I just associate an ID with a phone number, and as I writing this it is sinking in even more.

I can’t seem to come up with a good way to remember the class Selector but considering we are only dealing with two things here I don’t really see the need for both. Next time I will write a little bit about padding vs margins. I know these might seem a bit short but I’ve never been a huge fan of articles or blogs that I have had to come back to a few times to finish, so you probably won’t get any novels out of me. Anyhow…

~Until next time, Squatch out~

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s