与jQuery选择器一起使用的CSS类命名的最佳实践

|| 在构建大量使用Java的Web应用程序时，为CSS类命名以保持Javascript代码和CSS样式表整洁且UI结构灵活的最佳实践是什么？选项1：唯一命名每个元素。例如，

// HTML
<div id=\"list\">
  <button class=\"list-delete\" />
  <div class=\"list-items\">
    <div class=\"item\">
      <button class=\"item-delete\" />
      <h1 class=\"item-name\">Item 1</h1>
    </div>
  </div>
</div>

// CSS
.list-delete {
  color: black;
}

.item-delete {
  color: blue;
}

// Javascript
$(\".list-delete\").show();
$(\".item-delete\").hide();

优点：选择样式或JS操作的项目很容易缺点：元素名称开始变得很长，很难追踪更改HTML结构需要重命名选项2：以语义命名每个元素，然后分层选择元素。例如，

// HTML
<div id=\"list\">
  <button class=\"delete\" />
  <div class=\"items\">
    <div class=\"item\">
      <button class=\"delete\" />
      <h1 class=\"name\">Item 1</h1>
    </div>
  </div>
</div>

// CSS
#list > .delete {
  color: black;
}

#list > .items > .item > .delete {
  color: blue;
}

// Javascript
$(\"#list > .delete\").show();
$(\"#list > .items > .item > .delete\").hide();

优点：命名感觉更自然，名称简短明了缺点：选择样式或操作元素很麻烦更改HTML结构需要更改许多选择器，因为名称与层次结构相关选项3 ... n：某种混合方法？完全不同的方法？在将来添加更多元素时，请记住名称冲突的问题，尤其是当您嵌套元素时。同样，理想的解决方案将使更改现有元素的HTML结构变得容易，而不会在其他地方造成太多干扰。

已邀请:

6 个回复

坝胺绣敝

尝试使用唯一名称可以在小型项目中很好地工作，但是获得的名称越大，冲突的可能性就越大。这就是为什么我喜欢第二种方法。但是，为了简化操作，可以使用SASS来预处理css文件。然后，您可以像这样进行嵌套：

#list {
    .delete {
    }
    .items {
        .item {
        }
    }
}

您将获得与第二个示例类似的代码，而无需全部编写。至于jQuery选择器，如果您想这样做的话，仍然需要将它们写出来，但是拥有这样的复杂选择器通常被认为是不良设计的标志。

痰降锭骂奸

在向HTML添加类和ID时，我建议尽可能保守一些。在大多数情况下，将ID用于内容的主要部分并使用标签选择器将与将类放在所有内容上一样有效。您示例中的HTML可以更简洁地重写为：

<div id=\"list\">
  <button class=\"delete\" />
  <div class=\"items\">
    <div>
      <button class=\"delete\" />
      <h1>Item 1</h1>
    </div>
  </div>
</div>

然后，jQuery选择器将是：

$(\"#list > .delete\").show();
$(\".items .delete\").hide();

（您可以使用更具语义的HTML5标签，从而减少对类的依赖，但是我认为这超出了问题的范围。）

喷乡顾沥沪

最干净的解决方案是解耦所有内容：HTML-CSS-JS。为此，您将使用第一种方法（单独的命名允许将CSS类应用于任何HTML元素），但另外还要为JS添加专门命名的类。这样，如果他们删除了CSS类，就不必担心破坏JS，反之亦然。很好地了解了如何最好地实现这样的命名约定： http://nicolasgallagher.com/about-html-semantics-front-end-architecture/

// HTML
<div id=\"list\">
  <button class=\"list-delete js-list-delete\" />
  <div class=\"list-items\">
    <div class=\"item\">
      <button class=\"item-delete js-item-delete\" />
      <h1 class=\"item-name\">Item 1</h1>
    </div>
  </div>
</div>

// CSS
.list-delete {
  color: black;
}

.item-delete {
  color: blue;
}

// Javascript 
$(\".js-list-delete\").show();
$(\".js-item-delete\").hide();

膝垫富顷

这实际上取决于页面的结构和大小。在某些情况下，使用选项1会表现更好，而在选项2下会更好。我通常会选择“针对此特定情况的最佳选择”

疮痪徘弦漏

选项1：为每个元素命名独特地这几乎是不可能的，而且绝对不是最佳实践。我认为最好使用可以通过对相关样式和属性进行分组的有意义的类。选项2：为每个元素命名在语义上，并选择元素分层地。我喜欢这个。至少您知道流程和事物的位置。选项3 ... n：某种混合方法？一个完全不同的方法？总有一种混合方法和完全不同的方法。我认为每个开发人员都有自己的编码风格。如果它在语义上正确且结构合理，那将是最好的方法。

捐焦

这是一个很好的问题。我认为您的第一个选择（为每个元素唯一命名）是正确的选择，因为：元素类（不是名称）没有那么长，无论如何，重点是整个组，因此该组的HTML结构不应经常更改，并且这样可以更轻松地发现UI结构中的缺陷。也就是说，我将使用稍微不同的标记：

<div id=\"list\">
    <button class=\"delete\" />
    <div class=\"list-items\">
        <div class=\"list-item\">
            <button class=\"delete\" />
            <h1 class=\"list-item-name\">Item 1</h1>
        </div>
    </div>
</div>

要回复问题请先登录或注册

与jQuery选择器一起使用的CSS类命名的最佳实践

6 个回复

发起人

jquery

class

naming_conventions

jquery_selectors

css

问题状态

与jQuery选择器一起使用的CSS类命名的最佳实践

与内容相关的链接

6 个回复

发起人

jquery

class

naming_conventions

jquery_selectors

css

问题状态