CSS BEM methodology: what about page specific styles?

7 years ago from Francesco Bonomi, Front-end designer @ 3D Hubs

  • Jonathan SuhJonathan Suh, 7 years ago (edited 7 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