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 "-"?
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/