Продолжаю разбираться с БЭМ.
Рассмотрим простую поисковую форму. С точки зрения БЭМ, данная форма является блоком, состоящая из двух, например, элементов: поле ввода и кнопка. В спецификациях также сказано, что блок есть "кирпичик", а элемент - часть блока, не имеющая смысла вне этого блока. Таким образом файловая структура поисковой формы выглядит следующим образом:
blocks/
search/
search.xsl
search.css
__input/
search__input.xsl
search__input.css
__button/
search__button.xsl
search__button.css
Тепрь перейдем к блоку авторизации, в которой пристствуют следующие элементы: поля ввода (логин и пароль) и кнопка.
blocks/
login/
login.xsl
login.css
__input/
login__input.xsl
login__input.css
__button/
login__button.xsl
login__button.css
В итоге мы имеем, скажем, два css-файла (search__input и login__input) с идентичным содержанием.
Вопрос: есть ли смысл дублировать файлы? Ведь можно поле ввода считать не элементом, а отдельным блоком. В случае необходимости прописывать модификатор. Конечно же, все это примеры; то касается и других элементов: заголовки, списки и прочее. В модификаторы мы уже записываем, так сказать, оригинальные стили - чем одни элементы отличаются от других. Как-то так...
Таким образом структура будет выглядеть следующим образом:
blocks/
input/
input.xsl
input.css
_type/ <!-- При необходимости вешаем модификаторы -->
input_type_login.xsl
input_type_login.css
input_type_search.xsl
input_type_search.css
button/
button.xsl
button.css
_type/ <!-- При необходимости вешаем модификаторы -->
button_type_login.xsl
button_type_login.css
button_type_search.xsl
button_type_search.css
И нет никаких папок "search" или "login", нет никаких дублей.
Быть может, я изначально неправильно понял методологию? Быть может, все так и есть? Повторяю, пока разбираюсь с файловой структурой и классами на тестовом примере в ручном режиме. После того, как пойму все "азы", перейду на полноценный БЭМ.
Простой
