Search code examples
cssbem

Can you name a class in BEM with _ in it?


Many people name their classes this way: header-menu, while I personally prefer header_logo; as it's easier to read as well as copy-paste for a lazy coder.

Is there any significant difference in BEM between naming a class with "_" or "-"?


Solution

  • Unfortunately _ is used to separate element or block modifiers. So it is not valid to use with BEM.

    Valid names for your example:

    header-menu
    headerMenu
    

    More related examples:

    Hyphen style:

    header-menu -> block
    header-menu__logo -> element
    header-menu_theme_xmas -> block modifier
    header-menu__logo_size_big -> element modifier
    

    camelCase style:

    headerMenu -> block
    headerMenu__logo -> element
    headerMenu_theme_xmas -> block modifier
    headerMenu__logo_size_big -> element modifier
    

    From the docs:

    Naming rules block-name__elem-name_mod-name_mod-val

    Names are written in lowercase Latin letters.

    Words are separated by a hyphen (-).

    The block name defines the namespace for its elements and modifiers.

    The element name is separated from the block name by a double underscore (__).

    The modifier name is separated from the block or element name by a single underscore (_).

    The modifier value is separated from the modifier name by a single underscore (_).

    For boolean modifiers, the value is not included in the name.block-name__elem-name_mod-name_mod-val

    More info on naming conventions: https://en.bem.info/methodology/naming-convention/