命名 class 的正确方法是什么?
What's the proper way of Naming a class?
许多人这样命名他们的 classes:header-menu
个人比较喜欢header_logo;因为对于懒惰的编码人员来说,它更易于阅读和复制粘贴。
用“_”或“-”命名 class 有什么显着差异吗?
我真的很好奇,很想用最好的方法;请赐教;
谢谢!
不幸的是_
用于分隔元素或块修饰符。因此 not 与 BEM 一起使用是有效的。
您的示例的有效名称:
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 等等。
许多人这样命名他们的 classes:header-menu
个人比较喜欢header_logo;因为对于懒惰的编码人员来说,它更易于阅读和复制粘贴。
用“_”或“-”命名 class 有什么显着差异吗?
我真的很好奇,很想用最好的方法;请赐教;
谢谢!
不幸的是_
用于分隔元素或块修饰符。因此 not 与 BEM 一起使用是有效的。
您的示例的有效名称:
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 等等。