定义造型的最佳方式是什么?类名或相对路径

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
}

<标题>进一步样式

现在，正如你的同事所做的，你可以更具体地选择一个元素的ID只有当它有其他属性;例如，您可能希望选择包含特定类名的所有元素，但也是form

类型的元素。

form.some-class{
    // style
}

最具选择性的CSS将覆盖较不具选择性的CSS

因此，考虑以下示例:

.some-class{
}

被:

覆盖

#some-id{
}

被

覆盖

div#some-id{
}

Answer 2

这取决于目的。Class应该用于定义一般样式，而as ID应该用于选择特定项。

Answer 3

问题在于你所编写的CSS属性是否取决于HTML标签与其父(或兄弟)标签之间的关系:

说明

,

我想设置一些文本在页面中的颜色为红色->使用仅类.redtext

我想设置的颜色一些文本只有在细节div -> .mydiv .redtext

我想设置所有输入的宽度仅在特定的表单-> #myform input

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