CSS BEM methodology: what about page specific styles?

almost 8 years ago from , Front-end designer @ 3D Hubs

Hey DN,

it's been a few months since I adopted the BEM methodology to develop my project. I found it to be a great way to keep your CSS organised and structured and it really helps you think about the components that a website is made of. I still work quite slowly with BEM, because it requires you to think clever ways to name your blocks and it's not always easy.

Now, every time I have to work on a landing page that could have its specific styles (maybe even just a background color) I don't know where I should put these rules.

TL;DR Example: Let's say I have a block called section with just some padding applied to it, but just on a single page of the website the background has to be blue.

Following BEM methodology where would you put these styles? Creating a modifier of the block doesn't really work for me... What about you guys? I'm sure that someone of this great community has a good answer :) Thanks in advance!


  • Tim Knight, almost 8 years ago (edited almost 8 years ago )

    It’s said that one of the most complex things in computer science is naming, so I can definitely understand what you mean in terms of naming your BEM rules, but I think the time we take to name our BEM elements is worth it. That being said, I think there are a few ways you can address what you’re dealing with.

    Plain Old Modifiers

    What you are talking about is really just a modification or the block. Just because it’s BEM doesn’t mean you can’t write it using BME and immediately modify the block that has elements. For example:

    <section class=“section section--darkened”> ... </section>

    Context Based Modifiers

    Another option is context, what’s causing the section to be blue? Is it purely just for visual appeal? If so, why? What I mean by that is that you could use a context modifier with something like .has-* or .is- that would be in that particular block. So something like:

    <section class=“has-list”> ... </section>

    is another way to address it. So in a section that has a list of items that is requiring me to change the visual UI I’ve defined that as the context.

    Page Based Components

    If you’re using a preprocessor you could do a folder like /pages/ in addition to something like /components/ or /modules/ and treat the page as an element which as a modifier or context, but I think you’re going to but yourself is a sticky situation by doing something like that.

    Chainable Modifiers

    Another concept I’m seeing more and more is the idea of chainable modifiers that don’t specify the block so you have a class with -modifier or --modifier that makes an adjustment to a block. This could be added to any block so you’d have something like:

    <section class=“block --modifier --modifier”> ... </section>

    For me though, I would treat what you are doing as a traditional modifier because you are essentially modifying the block. Now if more than just the background is changing, maybe it’s a different block type altogether so it has it’s own component file. That’s something to consider too. I think the most important thing to understand is that these are things that will adapt and adjust as your project evolves. Maybe right now it’s a modifier, but as you add new sections it’s a different type of block. Be open to iteration.

    2 points
  • Jonathan SuhJonathan Suh, almost 8 years ago (edited almost 8 years ago )

    This is my personal approach but using your scenario:

    .section {background: white; padding: 0;}

    I create a separate Sass files for page-specific styles:

    .section--contact {background: blue; padding-top: 2em;}

    Keep in mind that it’s important that modifying classes must come after when compiled.

    @import "modules/section"; @import "pages/contact";

    Now for more complex scenarios where multiple child elements within a parent module are modified for a specific scenario (in this case a page), instead of adding modifying classes for each element, I declare the modifying class for the parent and rely on specificity, like such:

    .sidebar {background: white;} .sidebar-title {font-size: 1em; color: black; text-transform: uppercase;} .sidebar-paragraph {font-style: italic;} .sidebar-button {font-size: .9em; font-weight: bold; text-transform: uppercase; background: blue} .sidebar--contact { .sidebar-title {font-weight: bold; color: red;} .sidebar-paragraph {font-style: normal;} .sidebar-button {background: red;} }
    1 point