If you develop WordPress themes, you already have some kind of a workflow. But, what about CSS? As far as I know, some developers choose to write CSS with frameworks like Bootstrap, Foundation and what not, while other’s don’t.
I belong to the later type, people who don’t use CSS frameworks whatsoever. Which is why I end up reading a lot about standard practices of writing CSS because let’s face it, screwing up is real easy when you don’t know the standards. If you are not a Copy Paste Programmer, then you should care about stuff like this.
TL;DR You should care because I have seen too many front-end developers who know less about CSS and more about Bootstrap, which limits their thinking and we all end up with boring web design.
Some developers choose to trust standards baked in Bootstrap, I like to keep that control in my hands. Do you? There is so much more to CSS than just knowing about the properties and how they work in a particular framework.
As a good front-end web developer, you should know what CSS properties are supported in which browsers i.e. Make it a habit to visit CanIUse whenever you use a new property? Slowly and gradually you will start remembering the cross-browser compatibility of your code.
Similarly, using a grid is not the best solution while building a WordPress theme (It can be called a good solution though certainly not the best). While there is the debate about which grid is better than the other here is a 10 lines responsive CSS grid that I built. I use it in almost every other project.
BEM is a way of writing CSS and nothing more. It helps CSS speak out loud about what it does. It focuses on organizing sections of a website into purposeful blocks, which are comprised of their functional elements, and are then manipulated by modifiers.
B: Block
E: Element
M: Modifier
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Elements__ (double underscore) are the child elements of the block or component. E.g. Sign up form’s button is an element of sign up form, so it’s class name would be .sign-up-form__button
Modifiers -- (double dash) are used to define a modified state of the block. E.g. There can be a button with multiple variants like .sign-up-form__button--large and .sign-up-form__button--small
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Block: At line#1Sign up form started with the class .sign-up-form which is a block
Elements: Input fields are the elements of sign-up-form block, so they get classes like .sign-up-form__field (line#3, #4) and .sign-up-form__button (line#6)
Modifier: Let’s assume the end user submitted this form without an email so we need to display the email field with red border color. So, I have added a modifier class which will only change the border-color of a field to red. Since this is a modifier class we will use double dash in the class name i.e. .sign-up-form__field--red
BEM is a really good standard practice. It helps make your CSS more descriptive and in turn you can work better in a team. In the start, BEM might look ugly to you, but give it a try, you will start to like it. You can also learn more about BEM.
I think it is not just a good standard, but it helps you write better CSS code. BEM’s hierarchical naming convention helps a group/team of developers to understand the structure of a website to work uniformly and with harmony.
Thoughts? How about you comment below or reach out to me at Twitter?
Founder & CEO of Langbase.com — The most powerful serverless AI agents developer platform to build, deploy, and scale AI agents with tools and memory · Creator of BaseAI.
Node.js foundation Community Committee Outreach Lead, Member Linux Foundation, OpenAPI Business Governing Board, and DigitalOcean Navigator. Teaching thousands of developers Node.js CLI Automation and VSCode.pro course. Over 142 million views, 24 yrs Blogging, 108K developers learning, 200+ FOSS.
Stay ahead in the web dev community with Ahmad's expert insights on open-source, developer relations, dev-tools, and side-hustles. Insider-email-only-content. Don't miss out - subscirbe for a dose of professional advice and a dash of humor. No spam, pinky-promise!
Good read, I was already thinking about making a shift on how I write CSS. BEM seems awesome. Looking forward to the next part ‘S’ as you wrote in a comment above.
Hi Ahmad,
nice post about BEM.
I’m just starting with this topic and have a question about BEM combined with WordPress:
I’m using WordPress functions such as: ‘wp_nav_menu(…)’, so the admin can set which pages (or what so ever) should be displayed in my navigation menu. The problem I see is, that these functions return their own nested div, ul and li elements, I can’t influence their class names, so I can’t use the pure BEM concept to access them. My current solution would be to put a container div around them (with a class name), but I’d still have to use other css selectors to access the li for instance. So this isn’t pure BEM anymore, from my understanding. You know what I mean?
I’d be interested about how you deal with this or your opinion about it.
I’m glad you’re trying to figure that out. As far as I know, you can always write a custom Nav Walker class so that you can create custom class names for those menus. Search on that and you’ll be amazed.
Contact
Newsletter
RSS 
Courses
Talks
Uses
Press
Learn automation 
Become a 
Ahmad Awais
by 
Another good Post Ahmad. I am reading a book on SMACSS. I’d appreciate it if you could let me know why you picked BEM instead of SMACSS?
I think it is more of a personal preference.
Modularity, DRY, SRP, etc. is never a goal, *it’s a trait*. Don’t let the pursuit of theory get in the way of actual productivity.
That’s not to say Modularity, DRY, SRP, etc. aren’t great ideas—they are!—but understand that they’re approaches and not achievements.
I don’t use BEM, I use BEMS, I will soon write about the ‘S’ it is meant for structural and style elements E.g. wrappers, divisions, etc.
It’s fine to break these standards.
All of that said, I like BEM because it has made me write better CSS in an intuitive manner.
Love this (and the link to your simple grid). I’ve been enjoying your posts, thanks!
Looking forward to the S post.
Thanks, Donna! I am documenting it internally, will post about it sooner than later.
Thank for good article Ahmad. I’ll try it for a while to see how can it make me more productive or not :)
Do share what you find after using BEM in a project or two.
Good read, I was already thinking about making a shift on how I write CSS. BEM seems awesome. Looking forward to the next part ‘S’ as you wrote in a comment above.
Sure, I am planning to write about it.
hello – where is this part ‘S’?!
Which `S` are you talking about? :)
Hi Ahmad,
nice post about BEM.
I’m just starting with this topic and have a question about BEM combined with WordPress:
I’m using WordPress functions such as: ‘wp_nav_menu(…)’, so the admin can set which pages (or what so ever) should be displayed in my navigation menu. The problem I see is, that these functions return their own nested div, ul and li elements, I can’t influence their class names, so I can’t use the pure BEM concept to access them. My current solution would be to put a container div around them (with a class name), but I’d still have to use other css selectors to access the li for instance. So this isn’t pure BEM anymore, from my understanding. You know what I mean?
I’d be interested about how you deal with this or your opinion about it.
Hey, mcClane!
I’m glad you’re trying to figure that out. As far as I know, you can always write a custom Nav Walker class so that you can create custom class names for those menus. Search on that and you’ll be amazed.