命名 class 的正确方法是什么?

What's the proper way of Naming a class?

许多人这样命名他们的 classes:header-menu

个人比较喜欢header_logo;因为对于懒惰的编码人员来说,它更易于阅读和复制粘贴。

用“_”或“-”命名 class 有什么显着差异吗?

我真的很好奇,很想用最好的方法;请赐教;

谢谢!

不幸的是_用于分隔元素或块修饰符。因此 notBEM 一起使用是有效的。

您的示例的有效名称:

header-menu
headerMenu

更多相关示例:

连字符样式:

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

驼峰式大小写:

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

来自文档:

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

有关命名约定的更多信息:https://en.bem.info/methodology/naming-convention/

没有正确的方法,使用任何你喜欢的css命名约定即可。当然,您可以遵循或忽略一些准则,例如:BEM、SMACSS 等等。