Предположим, есть такая разметка:
<header id="header">
<div class="header-top">
<div class="callus">+0 000 0000 00</div>
</div>
</header>
И есть несколько вариантов:
.callus {}
#header .callus {}
.header-top .callus {}
#header .header-top .callus {}
Я обычно на сайтах наблюдаю первый вариант. Но мне кажется это не слишком хорошей идеей по 2 причинам:
- Большой шанс конфликта с будущими доработками (другому человеку придется веселиться с вашими стилями, даже если он просто хочет добавить, а не изменить что-то)
- При добавлении новости/поста на сайт, визуальный редактор может добавить какое-то свое оформление или теги(с чем я лично много раз сталкивался).
Второй вариант, вроде-бы, конкретизирует: нам нужны элементы в шапке. Но при большом уровне вложенности движок делает большой путь от каждого из элементов с классом callus
до самого верха, пока не найдет элемент с id header
Третий вариант - нечто среднее между 1 и 2. Вроде-бы и решает проблему, но шанс ошибки остается.
Четвертый вариант называют переизбыточными селекторами, если не ошибаюсь. И да, это плохо.
Что посоветуете по поводу селекторов? То что названия классов должны максимально отражать суть элемента, это понятно. А что по поводу конкретизации, уменьшению вероятности ошибок и производительности?
Система БЭМ мне нравится, но понятно все-таки далеко не все. Буду благодарен, если кто приведет css-стили для подобной разметки:
<header class="header">
<img class="logo">
<form class="search-form">
<input type="input">
<button type="button"></button>
</form>
<ul class="lang-switcher">
<li class="lang-switcher__item">
<a class="lang-switcher__link" href="url">en</a>
</li>
<li class="lang-switcher__item">
<a class="lang-switcher__link" href="url">ru</a>
</li>
</ul>
</header>
Почему, например, logo
вместо header__logo
?