Welcome back to the 5th part of Lesson 2 of the Customize Thesis Like a Pro tutorial series. In this fifth part of the lesson, we are going to continue looking at Best Practices rules and we’ll be looking at rule #3.
The Thesis Theme Gives Priority to .custom class
Rule number 3 says to use .custom in front of all modifications to existing Thesis theme declarations. And we’ve already observed that happening when I was creating these two pieces of custom.css code. You’ve noticed that I prefaced the selector with this class .custom. Thesis is designed to add this custom class to every page and that allows you to write CSS code that will always take precedence over other CSS code.
This not only works for the Thesis theme itself, but it also works for plugins. Oftentimes, plugins insert their own CSS rules in a priority position to the theme.css style sheets. and this .custom though, in front of any style that you would like to customize, the plugin CSS will take precedence over that plugin CSS in a way that it wouldn’t if you didn’t use .custom.
So this is a very powerful tool that the Thesis theme adds and in fact, you can see that tool in operation here in this page. If we take a look at the source of this page, say if you view page source and scroll down here to the opening body tag, you can see that in the opening body tag, it added this class custom. It’s also added in the Introduction to CSS but it’s added this class of custom to this page.
And so, we can use a .custom in our selector in order to make it apply specifically to a page that has .custom in front of it. That may sound confusing and it actually is but in later lessons you’ll see how that applies itself. But for the time being, it’s important that for elements that exist in Thesis and are already defined by Thesis, you should use .custom in front of those. It’s not necessary to do that in front of HTML selectors that you may have created yourself. It’s only important to do that in these selectors that have already been defined by Thesis.
And that wraps up Part 5 of Lesson 2, Use Thesis .custom Class When Editing custom.css.