Warning: I am not the greatest writer and this literally just went from my brain to this post. Sorry in advance for the rambling!
So I am working on building a custom theme for my website. I just went through the trouble of setting up a build process so that I can use SASS to build out my CSS components.
After all this, I came across the WordPress CSS Coding Standards which I know about and use most of the time, but to be honest I haven't looked over in a while. I decided to click through to it and refresh my memory a bit and make sure I am not doing anything way off. While I was skimming through this line caught my eye (in reference to CSS selectors):
"Similar to the WordPress PHP Coding Standards for file names, use lowercase and separate words with hyphens when naming selectors. Avoid camelcase and underscores."
Emphasis is mine, but it's what I want to discuss. I have primarily been a back-end developer for a long time building plugins and various custom functionalities behind the scenes that don't usually require a lot of front-end work. Recently, however, I have been diving into a lot more front-end work and have picked up using the BEM naming convention. If you are not familiar with it I suggest you read about it, but long story short is that BEM uses a lot of underscores.
So with that in my mind and seeing the WordPress standard (which I will be ignoring in this case 😄) it got me thinking if they need a bit of an update. After reading through some more of the standards it looks like they don't account for newer methods of writing CSS really at all. For example, "Refrain from using over-qualified selectors" is another item in the list. Well, that's easy if you are writing plain CSS, but what about when I am writing something like this in SASS:
.button {
padding: 2rem;
&__red {
&--small {
padding: .5rem;
}
.borderless {
border: none;
}
.thick-border {
border: 5px solid #f00;
}
background: #f00;
}
}
When it is compiled it will break a lot of the WP standards, unfortunately, but I don't want to write plain CSS just because of the standards.
Anyway, I am just ranting now - I am sure you get the point. What do you all think? Would love to have an awesome discussion about it and hear if this matters to your workflow or if anyone even cares about the standards at all 😂
Top comments (4)
Not that I use WordPress, or SASS, or BEM, or write class names based on how I want an element styled, but I'd say that a coding standards guide is just that - a guide. The primary objective there is to deliver some consistency. If you want to follow a different standard, that's fine. It doesn't make the WordPress guide wrong.
On the other hand, "Refrain from using over-qualified selectors" is sound advice, the purpose of which is to avoid specificity wars. If you don't follow that, you will need your own strategy to avoid them.
That's a good point. I guess I think it would be important if this is something that a new WP developer comes across and feels like they shouldn't start developing because of it. It could turn away some that think they have to write code like this to make it into the various repos or something.
I so agree with the overqualified CSS selectors bit - thay was kind of a heat of the moment thing. I still do think we tend to be more careless of that rule though when using something like sass since everything starts getting nested real quick.
Thanks for your comment!
I think you're making a good case for why these rules would not help make your CSS better, so why bother with them?
I look at those coding standards as guidelines that apply to WordPress core development absolutely and may or may not be applicable beyond that. If I'm writing a plugin, for the PHP I prefer to follow PSR standards, beacuse PSR standards are better for my needs than WordPress'.
This is actually a really great point. I spent years developing some sort of major plugins and while I followed the code styles for development there definitely were a lot of things that we ignored in order to use more modern techniques (i.e. not using class-*.php as a filename because we used namespacing). So now that you have compared it to that it definitely makes me feel a little silly that I cared so much about it for CSS.
Thanks for sharing your thoughts!