html / css id和类的标准命名约定是什么？


What is the standard naming convention for html/css ids and classes?

它取决于您使用的平台，还是有一个大多数开发人员建议/遵循的共同约定？

有几种选择：

  • id="someIdentifier"'-看起来与javascript代码非常一致。
  • id="some-identifier"-在HTML中更像HTML5属性和其他东西。
  • id="some_identifier"-看起来与ruby代码非常一致，仍然是javascript内部的有效标识符。

    • 我认为上面的1和3最有意义，因为它们在JavaScript中的表现更好。

    有正确的答案吗？

    相关讨论

    没有。

    我一直使用下划线，因为连字符会弄乱我的文本编辑器(gedit)的语法突出显示，但这是我个人的偏好。

    我看到所有这些惯例都在各地使用。使用一个你认为最好的-一个看起来最好/最容易为你阅读，以及最容易打字，因为你会使用它很多。例如，如果您的下划线键位于键盘的下面(不太可能，但完全可能)，那么请使用连字符。只需选择最适合自己的。此外，这三种约定都很容易阅读。如果您在一个团队中工作，请记住遵守团队指定的约定(如果有的话)。

    更新2012

    随着时间的推移，我改变了编程方式。我现在使用camel case(thisIsASelector)而不是连字符；我发现后者相当难看。使用任何你喜欢的东西，这很容易随着时间的推移而改变。

    更新2013

    看起来我每年都喜欢把事情搞混…在切换到高级文本并使用引导程序一段时间后，我回到了dashes。对我来说，现在他们看起来比联合国秘书处或骆驼箱要干净得多。但我的原始观点仍然存在：没有标准。

    更新2015

    一个有趣的有惯例的角箱是生锈。我真的很喜欢这种语言，但是如果您使用除underscore_case之外的任何东西定义东西，编译器会警告您。您可以关闭警告，但有趣的是，编译器在默认情况下强烈建议使用约定。我想在更大的项目中，它会导致更干净的代码，这不是坏事。

    2016年更新(您要求)

    我已经为我的项目采用了BEM标准。类名最终会变得非常冗长，但我认为它为与之配套的类和CSS提供了良好的结构和可重用性。我想BEM实际上是一个标准(所以我的no可能变成了yes)，但是你决定在项目中使用什么仍然取决于你。最重要的是：坚持你的选择。

    相关讨论

    google提供了css&html样式指南，建议始终使用连字符：https://google.github.io/style guide/htmlcssguide.html_id_u和_class_name_分隔符。

    相关讨论

    我建议您使用下划线而不是连字符(-)，因为…

    1
    2
    3
    4
    5
    6
    7
    <form name="myForm">
      <input name="myInput" id="my-Id" value="myValue"/>
    </form>


      var x = document.myForm.my-Id.value;
      alert(x);

    您可以这样方便地按ID访问值。但如果使用连字符，则会导致语法错误。

    这是一个旧示例，但它可以在没有jquery-：)的情况下工作。

    多亏了@jean ou ralphio，有很多工作可以避免

    1
    var x = document.myForm['my-Id'].value;

    Dash样式应该是Google代码样式，但我不太喜欢它。我更喜欢身份证和班级的茶包。

    相关讨论

    对于HTML和CSS，没有达成一致的命名约定。但是您可以围绕对象设计构建您的术语。更具体地说，我称之为所有权和关系。

    所有权

    描述对象的关键字可以用连字符分隔。

    car-new-turned-right

    描述对象的关键字也可以分为四类(从左到右排列)：对象、对象描述符、操作和操作描述符。

    car - a noun, and an object
    new - an adjective, and an object-descriptor that describes the object in more detail
    turned - a verb, and an action that belongs to the object
    right - an adjective, and an action-descriptor that describes the action in more detail

    注意：动词(动作)应该用过去时(turn、did、ran等)。

    关系

    对象也可以有父对象和子对象这样的关系。操作和操作描述符属于父对象，它们不属于子对象。对于对象之间的关系，可以使用下划线。

    car-new-turned-right_wheel-left-turned-left

    • car-new-turned-right (follows the ownership rule)
    • wheel-left-turned-left (follows the ownership rule)
    • car-new-turned-right_wheel-left-turned-left (follows the relationship rule)

    最后注：

    • 因为CSS不区分大小写，所以最好用小写(或大写)写所有名称；避免使用camel或pascal大小写，因为它们会导致名称不明确。
    • 知道何时使用类以及何时使用ID。这不仅仅是一个ID在网页上被使用过一次。大多数情况下，您希望使用类而不是ID。Web组件(如按钮、窗体、面板等)应始终使用类。ID很容易导致命名冲突，应该谨慎地用于标记的名称间距。上面的所有权和关系概念适用于命名类和ID，并且有助于避免命名冲突。
    • 如果您不喜欢我的CSS命名约定，还有其他几种：结构命名约定、表示命名约定、语义命名约定、BEM命名约定、OCSS命名约定等。

    再考虑一个替代标准：

    1
     

    在你的剧本里：

    1
    var variableName = $("#id_name .class-name");

    这只使用了camelcase、under-score和hyphen-ation分别用于变量、ID和类。我在几个不同的网站上阅读过这个标准。尽管在css/jquery选择器中有点多余，但冗余使捕获错误变得更容易。如果你在你的css文件中看到.unknown_name或#unknownName，你就知道你需要弄清楚它实际上指的是什么。

    相关讨论

    许多人喜欢在css id和类名中使用连字符的另一个原因是功能性。

    使用键盘快捷键，如option+left/right(或在Windows上使用ctrl+left/right)，逐字遍历代码，在每个破折号处停止光标，允许您使用键盘快捷键精确遍历ID或类名。未检测到下划线和camelcase，光标将在它们上面漂移，就好像它们都是一个单词一样。

    相关讨论

    我最近才开始学习XML。下划线版本帮助我从Java、JavaScript(CAMEL CASE)等编程语言中分离XML相关的所有东西(DOM、XSD等)。我同意您的看法，使用编程语言中允许使用的标识符看起来更好。

    编辑：可能是无关的，但这里有一个链接，用于链接我在命名ID时遵循的有关命名XML元素的规则和建议(部分"XML命名规则"和"最佳命名实践")。

    http://www.w3schools.com/xml/xml_elements.asp