CSS样式指南问题

有关使用CSS设计HTML元素的最佳做法是什么？什么是HTML元素样式的首选粒度？即，你有很多的CSS样式指南问题

div.searchbox input 

div.searchbox p 

div.searchbox p.help

input.searchbox 

p.searchbox 

p.searchboxhelp

哪个CSS代码被认为是容易维护？正在使用网格框架并重新考虑最佳实践？

谢谢

来源

2010-03-24 Zero

就是你们的榜样是否正确？ 'div.searchbox p'与'p.searchbox'不一样。 – Rob 2010-03-24 12:03:12

虽然他在问一个非常相关的问题，即我们应该通过包含div还是附加类来进行范围？ – stephenmurdoch 2010-03-24 17:21:10

如果你使用类似于http://lesscss.org的东西，那么它会让它稍微简单一些，并且生成的所有代码都与第一个示例中的一样。 – 2010-03-24 17:36:26

我完全喜欢第一种方法。搜索框是一个具有特定样式规则的已定义实体。如果搜索框具有独特的视觉设置，即页面上没有其他元素，通常是这种情况，那就是要走的路。

如果有添加任何全球性规则，你会在不同部分的样式表的全局定义他们：

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

如果有任何规则，一些在页面上输入元素（不是全部在搜索框中）应该共享（例如“搜索输入字段，并且登录输入字段应该突出一点，并具有黄色背景”），您可以创建一个全局类另外到“本地”规则：

input.highlight { background-color: yellow }

和类定义添加到每个输入：

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

但基本的基础应该永远是一个“局部”的一套规则，你在你的第一个例子做IMO。

来源

2010-03-24 12:04:03

我通常试图达成的折衷：

input.searchbox

和

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

来源

2010-03-24 17:34:14

CSS样式指南问题

回答

相关问题