我一直非常依赖CSS来处理我正在开发的网站.现在,所有的CSS样式都是基于每个标签应用的,所以现在我试图将它移动到更多的外部样式,以帮助进行任何未来的更改.
但现在问题是我注意到我正在进行"CSS爆炸".我很难决定如何在CSS文件中最好地组织和抽象数据.
我在网站中使用大量div标签,从一个基于表格的网站转移.所以我得到了很多看起来像这样的CSS选择器:
div.title {
background-color: blue;
color: white;
text-align: center;
}
div.footer {
/* Styles Here */
}
div.body {
/* Styles Here */
}
/* And many more */
Run Code Online (Sandbox Code Playgroud)
这还不算太糟糕,但由于我是初学者,我想知道是否可以就如何最好地组织CSS文件的各个部分提出建议.我不想为我网站上的每个元素都有一个单独的CSS属性,而且我总是希望CSS文件相当直观且易于阅读.
我的最终目标是使CSS文件易于使用并展示其提高Web开发速度的能力.这样,将来可能在这个网站上工作的其他人也会参与使用良好编码实践的做法,而不是像我那样去做.
嘿大家 - HTML5 Boilerplate和HTML5重置是两个HTML,CSS和JavaScript模板,内置了许多现代最佳实践.他们的目标基本相同:
显然,它们在功能上非常相似.它们的实现方式有何不同(例如,可能使用不同的技术实现IE特定的CSS修复)?它们的范围有何不同?看起来HTML5 Boilerplate有点大(构建工具,服务器配置等),但是当涉及到人们会看到的实际网站时,很难知道HTML5重置的范围.
可能重复:
如何管理CSS爆炸
我打算用一致的样式和一致的CSS方案构建我的网站.但是当我调整单个页面(特别是主搜索表单)时,样式已经失控.
我已经完成了一次破坏样式和几乎从头开始重建的过程,现在看起来是时候再次这样做了.我怎么能有效率呢?我正在寻找一种方法,而不是软件实用程序(虽然我愿意接受那些建议......除非他们花钱......).
补充说明: 我使用的是CSS框架,很难保持padding和margin协调.
补充说明2: 此帖子的初始回复是关于CSS的最佳做法.我们假设我已经尝试过遵循最佳实践(事实上,我做过).现在这是我正在寻找的清理程序.
添加了注释3: 截至6月14日,将此回复(我刚发现)与下面的帖子相结合可能是一个全面的答案.
关闭说明:
我知道我的问题太笼统了,因此我希望我没有发布它.(也许这就是为什么它得到了一次投票......我将永远不知道没有评论来解释原因.)另一方面,我得到了我需要的东西,所以我很高兴我发布了它.
我很惊讶我没有对我的答案进行投票 - 即使有其他人无价的投入,我认为它很好.
从我的观点来看,我的接受主要取决于答案的可用性 - 这一观点令人遗憾地无法消化一些更令人兴奋和全面的答案.
作为完全重复关闭
我只是尝试再次发布这个(主题,正文,标签),看看是否会建议帖子"如何管理CSS爆炸".有趣的是,它没有.我在refactoring该帖子中添加了标签.