2

I'm working on a theme framework, prefix everything include css classes, so 'main-content' is 'framework-main-content', 'header' is 'framework-header', etc.

Recently I took a look at the famous framework Genesis, and I see no prefix for css classes at all, the HTML markup so that looks clean and also the CSS code.

It is no doubt we should prefix everything in PHP code, but is it necessary for css classes of a theme or theme framework?

3 Answers 3

3

Prefixes are used to avoid conflicts. If your framework is used to build a theme, the chances are high that there isn't a second theme framework in use at the same time. So there is no conflict, and therefore no need for a prefix.

The exception are CSS classes generated by the WordPress core, for example in the comment form. If you are using the same class names for an entirely different purpose, you need a prefix, or better class names for your use case.

7
  • 3
    I agree with toscho, but would add that I love when theme developers do prefix their themes as it helps A LOT in debugging because i can right away know if a css or div class came from that them or if i have to look elsewhere.
    – rudtek
    Mar 21, 2017 at 5:25
  • @rudtek I wouln't add so much noise to my code for so little benefit. Plugins are a different topic, they should use a prefix in their CSS classes.
    – fuxia
    Mar 21, 2017 at 5:30
  • All I'm saying is I appreciate prefixing. I don't feel it's noise.
    – rudtek
    Mar 21, 2017 at 5:49
  • 2
    Prefixing theme CSS is absolute noise! Most debug tools show the CSS file for any particular style. Mar 21, 2017 at 7:30
  • if you use generic class names you are going to have problems with plugins and not just with themes Mar 21, 2017 at 8:50
2

NO!!! Do no prefix everything, it will be crazy for anyone to deal with. What you should do is add a body_class to namespace the special theme CSS.

If I wrote a theme today, something I would do in my function.php file is:

add_filter( 'body_class', function( $classes ){
   $classes[] = 'my-bad-ass-theme';
   return $classes;
 }); 

Then overriding anything I need is accessible, yet also easy to read and specific. For example, I like headers to be different font than the rest of the site, I would put this in the CSS file:

.my-bad-ass-theme{
  font-family: Verdana;
}
.my-bad-ass-theme h1,
.my-bad-ass-theme h2,
.my-bad-ass-theme h3,
.my-bad-ass-theme h4,
.my-bad-ass-theme h5,
.my-bad-ass-theme h6 {
  font-family: Lucida-Grande;
}

I can still have a nice style to my original font but for paragraphs such as:

p {
 color: #333;
}

This leaves paragraphs open to be styled by plugins or child themes alike, without getting in the way.

Don't get carried away with the namespace, but also look into CSS preprocessors like SAAS and LESS (I suggest SASS), to take advantage of nesting and other functions.

5
  • Setting up a class on the body is actually a good idea, but in some common html structures like list of sharing buttons which might use common class names it will be still hard to know if they belong to a code generated by the theme itself or a plugin Mar 21, 2017 at 9:00
  • True, but themes are not generally used for that, nor should they be. A child theme, or plugin could manipulate something here, being the "absolute" of all things CSS until the new coder manipulates what happens in his/her install of WordPress. That's what makes good code good. Mar 21, 2017 at 9:12
  • hmm, where did I disagree? I just pointed out that it is not 100% bulletproof, but I don't think that in the real life you need to be Mar 21, 2017 at 10:02
  • This forum needs an easy way to chat. "Upvote, reply, flag,share,copy" has nothing to do with this. @meta Mar 21, 2017 at 10:13
  • It twill be not crazy, but much help for everyone. I would like to see some experience notes when I see this kind answers. If you work alone, don't connected 3d party libs, you don't need to prefix. Otherwise you should. Author rather asks about .mu-active, .mu-block classes, to differentiate from 3d party. And it's a very good practice.
    – Rantiev
    Feb 6 at 9:40
1

I use prefixes when I develop. I don't know if it's necessary but I read somewhere that it was good practice. I keep it to a 3-letter prefix. Something like .seg-text. Here, the "seg" prefix stands for "StackExchange". But it doesn't matter what it means, I just use it so that someone down the line doesn't add some CSS or JS to the page, accidentally targeting a generalized selector like .text.

Using prefixes can make development easier also if you want to rename something for example. It's easier to run a correct search-replace for seg-text than for text or title. This also applies to just using "ctrl+F" to find things: it's easier to look up specific instances of generic names when they have prefixes.

2
  • True, but I'm not sure that really answers the question about whether it's good practice for themes and plugins or actually required.
    – Rup
    Jan 22 at 10:30
  • Yes, it's a good practice, even if you have incapsulation or any namespaces.
    – Rantiev
    Feb 6 at 9:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.