• Colm TuiteColm Tuite, almost 6 years ago

    i'm not sure how BEM would solve this.

    It wouldn't. I'm just saying this is one of the many problems which surface when you use nesting.

    When styling a component and its child elements, you usually have 3 options:

    1. You can add a class to each element in the component (using a smart naming convention), then extend your styles to those classes.
    2. You can litter the component's html with all the classes necessary to style it.
    3. You can add a class to the parent and style all its children via nested CSS on element type selectors.

    I never, ever use option 3. It's by far the worst of the 3 options. I go back and forth between options 1 and 2, depending on the complexity of the component; if I think the html is getting too messy, I transfer it into a component.

    The goal is to end up with highly reusable styles, form separated from function and the ability the edit the html without breaking any styling. Nesting CSS simply cannot accomplish this.

    0 points