Question

使用CSS设置HTML元素样式的最佳做法是什么？样式化HTML元素的首选粒度是什么？即，你有很多

div.searchbox input

div.searchbox p

div.searchbox p.help

OR

input.searchbox

p.searchbox

p.searchboxhelp

哪种css代码被认为易于维护？使用网格框架并重置被认为是最佳实践吗？

由于

Answer 1

我完全偏爱第一种方法。搜索框是具有特定样式规则的已定义实体。如果搜索框具有唯一的视觉设置，页面上没有其他元素（通常是这种情况），那么就是这样。

如果还有任何全局规则，您可以在样式表的不同部分全局定义它们：

input { font-size: 16px; color: blue }

如果有任何规则，页面上的许多输入元素（不是搜索框中的所有元素）都应该共享（例如“搜索输入字段，登录输入字段应该突出一点，并且有一个黄色background“）您可以创建一个全局类以及到”本地“规则：

input.highlight { background-color: yellow }

并将该类定义添加到每个输入：

<div class="searchbox">
 <input type="text" class="highlight">  <!-- Gets applied the "highlight" 
                                             and the "searchbox" styles -->
</div>

但基本的基础应该始终是一套“本地”规则，就像你在第一个例子IMO中所做的那样。

Answer 2

我通常会尝试在以下方面达成妥协：

input.searchbox

和

body div#layout div#main div#content div.section div.subsection form input.searchbox

CSS样式指南问题

2 个答案: