【问题标题】:What's the proper way of Naming a class? [closed]命名类的正确方法是什么? [关闭]
【发布时间】:2018-06-05 22:30:05
【问题描述】:

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

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

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

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

谢谢!

【问题讨论】:

    标签: css naming-conventions classname bem


    【解决方案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 等等。

      【讨论】:

        猜你喜欢
        • 2012-04-15
        • 1970-01-01
        • 1970-01-01
        • 2019-02-12
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2016-02-27
        • 2015-09-02
        相关资源
        最近更新 更多