定义样式的最佳方法是什么？班级名称或相对路径？

Question

本周我加入了一个新项目，我注意到设计师（创建所有.css文件）以不同于我习惯的方式使用css。 我习惯主要有类和类名称引用的元素，例如有一个定义

.myClass { display:block; }

并在我的元素中使用class="myClass"属性。

这位设计师使用这种参考来构建整个设计：

form#myForm div a { display:block; }

或类似的。这将获得id = myForm。

形式的div内的所有锚点

哪一个是最好的方法？主要使用类或主要使用其他方法（我不知道如何调用它）？

谢谢！

Answer 1

有些东西没有人包含在他们的答案中，奇怪的是，这一切都取决于你想要/需要选择的具体程度。

基础知识：

如果要在页面上选择多个元素，只需使用类选择器即可：

.non-unique-elements{
    // some style
}

如果您想要更具体一些，或者想要在页面上选择唯一元素，请使用ID选择器：

#unique-element{
    // some style
}

进一步造型

现在，正如你的coleague所做的那样，只有在具有其他属性的情况下，才能通过选择元素ID来获得更具体的信息。例如，您可能希望选择包含某个类名但但类型为form

的所有元素

form.some-class{
    // style
}

最具选择性的CSS将覆盖不太有选择性的CSS

因此，请考虑以下示例：

.some-class{

}

被覆盖：

#some-id{

}

被

覆盖

div#some-id{

}

Answer 2

这实际上取决于目的。 类应该用于定义一般样式，其中ID应该用于选择特定项目。

Answer 3

这是一个问题，你所写的css属性是否取决于html标签与其父母（和兄弟姐妹）之间的关系：

来说明，

我想将页面中部分文字的颜色设置为红色 - ＆gt;仅使用类.redtext

我想在特定div中设置某些文字 的颜色 - ＆gt; .mydiv .redtext

我想仅以特定的形式设置所有输入的宽度 - ＆gt; #myform input

请记住，使用长css选择器会使它们非常依赖于Page结构，因此很脆弱。