Ahmad Awais

NAVIGATE


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?

I help businesses understand developers 📟 Just launched Node.js CLI Automation Course 👨‍🏫 Edutainer at VSCode.pro 🎩 An award-winning GitHub Star open-source engineer & advocate 🦊 Google Developers Expert Web DevRel 🌳 Node.js foundation Community Committee Outreach Lead ✌️ Author of various open-source dev-tools and software libraries used by millions of developers worldwide ⓦ WordPress Core Developer 📣 TEDx Speaker 🙌 Leading developers and publishing technical content for over a decade 💜 Loves his wife (Maedah) ❯ Learn more →

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

📨

Developers Takeaway

Takeaway my professional opinion on open-source, developer relations, growing your business with family, and everything in between! Delivered to your inbox a couple of times every year. I'm even funny at times. I hate spam — pinky-promise!

👨‍💻👩‍💻 118,947 Developers Already Subscribed
Comments 12
  • Harish
    Posted on

    Harish Harish

    Reply Author

    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?


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      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.


  • Donna
    Posted on

    Donna Donna

    Reply Author

    Love this (and the link to your simple grid). I’ve been enjoying your posts, thanks!

    Looking forward to the S post.


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Thanks, Donna! I am documenting it internally, will post about it sooner than later.


  • Kimi
    Posted on

    Kimi Kimi

    Reply Author

    Thank for good article Ahmad. I’ll try it for a while to see how can it make me more productive or not :)


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Do share what you find after using BEM in a project or two.


  • Ali M
    Posted on

    Ali M Ali M

    Reply Author

    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.


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Sure, I am planning to write about it.


  • Daniel Crabbe
    Posted on

    Daniel Crabbe Daniel Crabbe

    Reply Author

    hello – where is this part ‘S’?!


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Which `S` are you talking about? :)


  • mcClane
    Posted on

    mcClane mcClane

    Reply Author

    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.


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      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.