Ahmad Awais

SHARE


BEM CSS Basics for WordPress Themes Developers

Ahmad AwaisAhmad Awais

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.

Again Why Should I Care?#

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.

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 Basics#

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.

Block#

Blocks are the components of your website that can be thought of as pieces of reusable HTML. E.g. A sign-up form class called .sign-up-form

Element#

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

Modifier#

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

A Simple Example#

So, here is the breakdown

  • Block: At line#1 Sign 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

Conclusion#

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?

📨

TheDevTakeaway: Developers' Newsletter!

Takeaway my professional opinion about Open Source, JavaScript/Cloud, Full Stack Development, building a business, growing a family, and everything in between! Delivered to your inbox once a month. 🤣 I'm even funny some times. 👻 I hate spam! Pinky Promise!

👨‍🏫 Edutainer at VSCode.pro 🎩 Full-time #OpenSourcerer 🥑 JavaScript Developer Advocate 🔥 Ridiculously hard-working Full Stack Web DeveloperRegular WordPress Core Developer 📣 TEDx Speaker ✌️ Spends 50-80% of his time building professional FOSS (Free & Open Source Software) used by over 218,900 Developers 🙌 Cloud Community Evangelist 🎯 JavaScript & DevOps fanboy 😂 Cracks silly jokes 💜 Loves his wife (Maedah) 🍕 Learn more about Ahmad ↣

Say 👋 on Twitter @MrAhmadAwais | Subscribe to the WordPress Takeaway!