Is it necessary to prefix every css class in a theme framework?

admin管理员组

文章数量:1128745

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?

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?

• theme-development
• css

Share Improve this question edited Mar 21, 2017 at 5:15 fuxia♦ 107k3838 gold badges255255 silver badges459459 bronze badges asked Mar 21, 2017 at 5:05 EdwardEdward 43933 silver badges1717 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 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.

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.

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.

本文标签： Is it necessary to prefix every css class in a theme framework