Хранение изображений в схеме Flat

Форум /

Приветствую всех! Использую упрощенную схему организации файловой структуры Flat. Как я понял, при использовании данной схемы, создается для каждого блока своя директория при этом стили и скрипты всех элементов и модификаторов хранятся в одно файле.

Блок:

<input class="input input_type_seach">

Схема файловой структуры:

common.blocks
--input
----input.css ( Содержание файла: .input {} .input_type_seach{} )
----input.js

Как правильно добавить этому блоку иконку?

<input class="input input_type_seach input_icon_user">

Схема файловой структуры:

common.blocks
--input
----input.css ( Содержание файла: .input {} .input_type_seach{} .input_icon_user{} )
----input.js
----input_icon_user.png

Так ли это работает?

4 years ago

Realetive

Да.

4 years ago

vitaly-lutokhin

.input_user (модификатор user добавляет иконку с силуэтом)

.input_password (модификатор password добавляет иконку с замком)

Является ли это верным написанием? Или обязательно нужно использовать схему модификатор=значение

.input_theme_user .input_theme_password?

4 years ago

Realetive

Ключ-значение позволяет группировать модификаторы, которые не могу использоваться одновременно. Например, input может быть одновременно _disabled и _focused, но или c иконкой силуэта, или иконкой замка: модифицируется иконка, значит это модификатор иконки (а не темы) с одним из возможных значений: input_icon_user и input_icon_password — теперь никто не запутается и сразу понятно, что не может быть <input class="input input_icon_user input_icon_password"> (в отличие от <input class="input input_user input_password">).

4 years ago

vitaly-lutokhin

И последний вопрос, относится к первому посту, если не возражаете. Использую схему flat я могу хранить все изображения в отдельной папке как это указано на скрине? https://ibb.co/W36nsFJ

4 years ago

Realetive

Зависит от изображений. В смысле, БЭМ тут ни при чём. Просто удобно, когда логотип лежит в каталоге блока логотипа, а иконки — в каталоге блока иконок (+ именуются соответсвующе: logo.svg, logo_inverse.svg, icon_view_user.svg, icon_view_close.svg и т. д.).

4 years ago

vitaly-lutokhin

А вариант, когда в каталоге блока есть отдельная папка, где хранятся все изображения блока, является бредом? Отпугивают такие длинные названия у картинок icon_view_user.svg, вместо user.svg close.svg arrow.svg

4 years ago

Realetive

Если эти файлы вставляются в разметку или стили вручную, то это нормально. БЭМ-именование позволяет проще атоматизировать этот процесс, но если этой автоматизации нет, то и в именовании файлов «плюсов» мало (ну разве что мгновенный поиск файла).

4 years ago

vitaly-lutokhin

Спасибо за ответы:) появилось прояснение в голове)

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