Welcome back to the 6th part of Lesson 2 of the Customize Thesis Like a Pro tutorial series. In this part of the lesson, we are going to look at rule #4 which is when creating your own HTML structures, make sure you always use descriptive and unique names for the class and id selectors that you name.
We aren’t going to be doing this in the very early stages of learning how to customize CSS but in a few lessons, we will start creating HTML structures where you won’t need to use .custom when specifying the CSS for them. And when that’s the case, you should always use descriptive and unique names for the class and id selectors.
What is a Descriptive Name for Class and ID?
By descriptive, I mean that you should be able to easily identify what they relate to. So for example, on my Thesis theme site in my CSS, I have a banner in the header that has a specific height and size and I have called that byob banner. I use the term banner because it’s descriptive of what it is. The same thing could be said for byob membership message. The name membership message is much clearer than just byob message.
What is a Unique Name for Class and ID?
This raises the second point. The first was to use descriptive names and the second is to use unique names for the class and id selectors. This is especially important in later lessons when we are editing PHP but in this case you want to use names that you know are not going to clash with other potential names. So you are not going to say logo or something like that. You want to preface it with some sort of a prefix. And this is what I do on all of my own styles. I will use a .byob as a prefix in front of these and when I’m creating a style sheet for a client, I’ll use their initials or the initials of the website.
One of the reasons for doing this is that you’re always going to know when the element is something you’ve created. And another reason is, of course, it sets it apart as being unique and not likely to be in conflict with some other classification.
Okay that wraps up Part 6 of Lesson 2 of the Customize Thesis Like a Pro tutorial series.