CSS选择器最佳实践

Question

我又把时间浪费在小事上了.我问自己 - 现在你 - 的问题是:CSS选择器/ HTML标记的"最佳方式"是什么？

我是否会不惜一切代价避免课程,让HTML保持纯净和漂亮,或者我是否想要添加类别的东西？

例如,如果我想设置我网站的各种表单按钮的样式,我该去

input[type="submit"] { /* styles */ }

或者我为他们所有人添加一个"表单按钮"类

.form-button { /*styles */ }

在这个简单的例子中,人们可能不会想太多,但如果我想用第三个链接来定义 - 语义,而不是表示 - 列表不同,我可以做到

.navigation ul:nth-of-type(2) a:nth-of-type(3) { /* styles */ }

而只是给那一个链接一类"不同的链接"和使用

.different-link { /* styles */ }

据我所知,在2013年,他们运行的所有计算设备和浏览器应该足够快,技术上次优的CSS选择器不应该对最终用户产生任何差别.

所以最后,它似乎是一个问题"我是否混乱了HTML(带有类),还是混乱了CSS(带有冗长的选择器)？"

有什么意见吗？

Answer 1

HTML和CSS之间的关注点分离

尽管从HTML CSS中外部化应该被认为是独立的,但实际上并不是在插入HTML元素特定选择器的情况下.在您的选择器与实际HTML元素相关的情况下,它们的层次结构使您的CSS与HTML源紧密相关.这使得你的CSS不灵活,可能比它应该更大.

因此CSS类.每当您使用类时,只要定义了足够的属性,这些定义就可以附加到任何HTML元素.确实,虽然您的HTML因其他属性而变得更大,但语义不会改变.

为什么.form-button比input[type=submit]那时更好？

因为你可能会改变你<input type=submit />对<button type=submit>那是一个容器,并给出更多的设计自由度来UI设计师.如果您使用CSS类,那么您可能不会对其属性进行太多更改,但如果您使用了标记名称,则必须对您的CSS文件进行大修并进行修改.

另一个例子是其他类型的输入,即取消按钮.如果它在视觉上与提交按钮完全相同,则设计人员可能会说" 提交"是主要操作," 取消"是次要操作,因此应将其显示为纯粹的链接.使用类将导致再次减少维护.

为什么只有类的CSS也不是魔术子弹呢？

某些元素可能具有特定的CSS属性,而其他元素则没有.以(未)有序列表为例.在这种情况下,编写基于标记的选择器来定义适用于特定HTML元素的CSS样式是有意义的.但是为了避免在页面上选择相同类型的所有元素,建议将CSS选择器定义为基于标记和基于类的选择器的组合.这样就可以说CSS类选择器约束在这种情况下是有意义的.

建议仅将公共样式属性与基于类的选择器分开,并将特定样式添加到基于标记+类的选择器,其约束为(LESS/SCSS语法):

/* generic */
.navigation {
    background-color: #999;
    margin: 0;

    .item {
        display: inline-block;
        padding: 10px;
    }
}

/* specific to UL */
ul.navigation {
    list-style: none;
}

这为您提供了最大的自由度,并提高了最大可维护性.

结论:基于类的选择器是首选^提示:OOCSS

是.大多数时候.通过这种方式,您将能够编写面向对象的CSS(SmashingMag,GitHub repo 上的文章),减少代码重复和异常.它将提高您的CSS可维护性.

重要说明:与任何代码一样,您也不应过度设计CSS.我已经向您展示了如何提供灵活的样式定义,但您不应该总是遵循这些规则.您应该在开始时提供足够的灵活性,并在您离开时根据需要进行重构.但是大多数时候都要把自己放在课堂上.