适用于jQuery选择器的CSS类命名的最佳做法

在构建一个重量很大的Web应用程序的时候，CSS类的最佳做法是保持Javascript代码和CSS样式表的清晰，UI结构的灵活性？

选项1：唯一地命名每一个元素。

例如，

@H_801_6@// 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：在语义上为每个元素命名，并分层选择元素。

例如，

@H_801_6@// 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：一些混合方法？完全不一样的方法？

在未来@L_607_9@更多元素时，请注意名称冲突的问题，特别是在嵌套元素时。此外，理想的解决方案可以轻松地改变现有元素的HTML结构，而不会在其他地方发生太多的中断。