命名类的正确方法是啥？ [关闭]

Posted 2023-03-16

【中文标题】命名类的正确方法是啥？ [关闭]

【英文标题】：What's the proper way of Naming a class? [closed]命名类的正确方法是什么？ [关闭]

【发布时间】：2018-06-05 22:30:05

【问题描述】：

许多人这样命名他们的类：header-menu

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

用“_”或“-”命名类有什么明显区别吗？

我真的很好奇，很想用最好的方法；请赐教；

谢谢！

【参考方案1】：

不幸的是，_ 用于分隔元素或块修饰符。因此与 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

来自文档：

命名规则 block-name__elem-name_mod-name_mod-val

名称以小写拉丁字母书写。

单词用连字符 (-) 分隔。

块名称定义了其元素和修饰符的命名空间。

元素名称与块名称用双精度分隔 下划线 (__)。

修饰符名称由块或元素名称分隔 单下划线 (_)。

修饰符值与修饰符名称之间用单个分隔 下划线 (_)。

对于布尔修饰符，该值不包含在 name.block-name__elem-name_mod-name_mod-val 中

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

【参考方案2】：

没有正确的方法，只需使用您喜欢的任何 css 名称约定。当然，您可以遵循或忽略一些准则，例如：BEM、SMACSS 等等。