Стилизация checkbox+label по БЭМ

Хочу добавить стилизацию checkbox и задумалась о корректности Вариант без стилизации

<div class="checkbox-inner">
   <input class="checkbox__control" type="checkbox" id="test">
   <label class="label__control" for="test"></label>
</div>

Стилизация внешнего вида enter image description here

Вариант стилизации 1
модификатор .checkbox-inner_theme-info

<div class="checkbox-inner checkbox-inner_theme-info">
   <input class="checkbox__control" type="checkbox" id="test">
   <label class="label__control" for="test"></label>
</div>

Вариант стилизации 2
модификатор .checkbox-inner_theme-info модификатор .checkboxcontrol_theme-info модификатор .labelcontrol_theme-info

<div class="checkbox-inner checkbox-inner_theme-info">
   <input class="checkbox__control checkbox__control_theme-info" type="checkbox" id="test">
   <label class="label__control label__control_theme-info" for="test"></label>
</div>

Какой из вариантов предпочтительнее?

Заранее благодарна на помощь!

8 years ago

tadatuta

Мы в bem-components используем первый вариант (например, https://github.com/bem/bem-components/blob/v6/design/common.blocks/checkbox/_theme/checkbox_theme_islands.post.css).

Оба варианта имеют свои плюсы и минусы. Первый лаконичнее с точки зрения разметки, но требует вложенных селекторов в стилях. Так что выбирать нужно в зависимости от требований по использованию.

8 years ago

loratokareva

Большое спасибо)

Чтобы оставлять комментарии, необходимо авторизоваться.