Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clarify how to apply block modifiers to the elements #308

Open
collimarco opened this issue Jul 28, 2023 · 1 comment
Open

Clarify how to apply block modifiers to the elements #308

collimarco opened this issue Jul 28, 2023 · 1 comment

Comments

@collimarco
Copy link

For example, if you have:

<div class="article article--featured">
  <h1 class="article__title"></h1>
</div>

Now I want to have a bigger h1 for the variant article--featured.

  1. Should I add the class article__title--featured to h1 if I want to apply some styles to that element for the variation?
  2. Or should I add a class article--featured__title?
  3. Or should I keep only the class article__title and style it in CSS using a descendant selector .article--featured .article__title?

This is not clear from the spec.

@ghost
Copy link

ghost commented Nov 7, 2023

I'm not an expert but if I had to choose, I'd go for the first one. The other two make no sense for me. The second one implies there is a property with a block name indicator, which would break your naming in the future. BEM doesn't use other selectors other than class-based ones, so avoid descendant selectors if you want to keep everything fully BEM.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant