Ответы пользователя по тегу CSS
  • Как назвать классы по БЭМ?

    ImEugene
    @ImEugene
    Вёрстка+JavaScript
    Раз вы читали про БЭМ, то особо вдаваться в теорию не буду и притяну пример за уши и опишу как бы я думал и именовал HTML-элементы на примере логотипа.

    Каждый сам выбирает по какой системе понимать: где блок, где элемент, а где модификатор. Как это делают в Яндексе описано в документации по БЭМ, я придержусь этого способа именования

    Классы стоит присваивать после того как вы определились: это блок или элемент? А может вообще модификатор.

    Расписываю на примере лого:
    Сначала я бы понял, что это блок в системе ценностей БЭМ и именовал класс так "logo" (блок -- самодостаточный элемент).
    Допустим, потом мне бы потребовалось на каких-либо страницах сайта флетовое (flat) лого. Получается, что я буду делать модификацию логотипа. Поняв, что это модификатор я бы добавил следующие классы: "logo logo_flat" -- класс блока "logo" и соответственно, класс модификатора "logo_flat"
    Далее, если бы мне потребовалось в логотипе разместить текст (название фирмы, слоган и т.п.). То я бы сначала разобрался -- это блок, это элемент или модификатор? Явно не модификатор (никакой CSS-модификации в существующие элементы не добавляется), значит блок или элемент. Согласно БЭМ-методологии, блок -- самодостаточная единица, а элемент не может существовать вне блока. Соответственно, текст внутри лого это элемент. Я бы в блоке лого разместил текст в HTML-элементе и присвоил класс "logo__company-name" (класс элемента включает в себя в качестве префикса название блока. Это связано с тем, что элемент может существовать только в контексте блока)
    Ответ написан
  • Как заставить выпадающий список меню выпадать только по клику?