1

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

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.

| improve this answer | |
  • 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 '17 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 '17 at 5:30
  • All I'm saying is I appreciate prefixing. I don't feel it's noise. – rudtek Mar 21 '17 at 5:49
  • 2
    Prefixing theme CSS is absolute noise! Most debug tools show the CSS file for any particular style. – Nathan Powell Mar 21 '17 at 7:30
  • if you use generic class names you are going to have problems with plugins and not just with themes – Mark Kaplun Mar 21 '17 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.

| improve this answer | |
  • 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 – Mark Kaplun Mar 21 '17 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. – Nathan Powell Mar 21 '17 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 – Mark Kaplun Mar 21 '17 at 10:02
  • This forum needs an easy way to chat. "Upvote, reply, flag,share,copy" has nothing to do with this. @meta – Nathan Powell Mar 21 '17 at 10:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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