我一直非常依赖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 */还算不错，但是作为我的初学者，我想知道是否可以就如何最好地组织CSS文件的各个部分提出建议。我不想为网站上的每个元素都拥有单独的CSS属性，并且我一直希望CSS文件相当直观且易于阅读。我的最终目标是简化CSS文件的使用并展示其强大功能以提高Web开发速度。这样，将来可能在此站点上工作的其他个人也将参与使用良好编码实践的实践，而不必像我以前那样去实践。
3 回答
蛊毒传说
TA贡献1895条经验 获得超3个赞
这个问题问得好。我所看到的任何地方，CSS文件都会在一段时间后变得失控-特别是（但不仅限于）团队合作时。
以下是我本人想要遵守的规则（并非我总是设法做到）。
尽早重构，经常重构。经常清理CSS文件，将同一类的多个定义融合在一起。立即删除过时的定义。
在修复错误期间添加CSS时，请留意更改的内容（“这是为了确保该框在IE <7中保持对齐”）
避免冗余，例如在.classname和中定义相同的内容.classname:hover。
使用注释/** Head **/来构建清晰的结构。
使用有助于保持风格不变的修饰工具。我使用Polystyle，我很高兴（售价15美元，但花得很值）。我确定周围也有免费的（更新：例如，基于CSS Tidy的Code Beautifier，这是一个开放源代码工具，我还没有用过，但是看起来很有趣。）
建立明智的课程。请参阅下面的一些注意事项。
使用语义，避免DIV汤- <ul>例如，将s用于菜单。
在尽可能低的级别上定义所有内容（例如，中的默认字体系列，颜色和大小body），并inherit在可能的情况下使用
如果您有非常复杂的CSS，则CSS预编译器可能会有所帮助。我正计划出于同样的原因研究xCSS。周围还有其他几个。
如果是团队合作，请同时强调CSS文件的质量和标准。每个人都非常重视其编程语言的编码标准，但是很少有人意识到这对于CSS也是必要的。
如果是团队合作，请考虑使用版本控制。它使事情更容易跟踪，而编辑冲突也更容易解决。即使您只是“简单”地学习HTML和CSS，这也确实值得。
请勿使用!important。不仅因为IE = <7无法处理它。在复杂的结构中，！important的使用通常很容易改变无法找到源的行为，但这对于长期维护来说是有毒的。
建立明智的班级
这就是我喜欢建立明智的班级的方式。
我首先应用全局设置：
body { font-family: .... font-size ... color ... }
a { text-decoration: none; }
然后，我确定页面布局的主要部分-例如顶部区域，菜单，内容和页脚。如果我编写了不错的标记，这些区域将与HTML结构相同。
然后，我开始构建CSS类，指定尽可能多的祖先和明智的方法，并尽可能将相关的类分组。
div.content ul.table_of_contents
div.content ul.table_of_contents li
div.content ul.table_of_contents li h1
div.content ul.table_of_contents li h2
div.content ul.table_of_contents li span.pagenumber
将整个CSS结构视为一棵具有越来越具体定义的树，离您的根越远。您希望将类的数量保持在尽可能低的水平，并且希望很少重复。
例如，假设您具有三个级别的导航菜单。这三个菜单看起来不同，但是它们也具有某些特征。例如，它们都是<ul>，它们的字体大小都相同，并且所有项目都彼此相邻（与的默认呈现相反ul）。此外，所有菜单都没有任何项目符号（list-style-type）。
首先，将通用特征定义为名为menu：
div.navi ul.menu { display: ...; list-style-type: none; list-style-image: none; }
div.navi ul.menu li { float: left }
然后，定义三个菜单中每个菜单的特定特征。级别1高40像素；2和3级20像素。
注意：您也可以为此使用多个类，但是Internet Explorer 6的多个类存在问题，因此本示例使用id。
div.navi ul.menu#level1 { height: 40px; }
div.navi ul.menu#level2 { height: 20px; }
div.navi ul.menu#level3 { height: 16px; }
菜单的标记如下所示：
<ul id="level1" class="menu"><li> ...... </li></ul>
<ul id="level2" class="menu"><li> ...... </li></ul>
<ul id="level3" class="menu"><li> ...... </li></ul>
如果您在页面上具有语义上相似的元素（如这三个菜单），请尝试首先计算出共同点，然后将它们放入类中；然后，计算出特定的属性并将其应用于类，或者，如果必须支持Internet Explorer 6，则将其应用于ID。
其他HTML技巧
如果将这些语义添加到HTML输出中，则设计人员以后可以使用纯CSS自定义网站和/或应用程序的外观，这是一个很大的优势，可以节省时间。
如果可能的话，给每个页面的主体一个唯一的类：<body class='contactpage'>这使得将页面特定的调整添加到样式表非常容易：
body.contactpage div.container ul.mainmenu li { color: green }
自动构建菜单时，请添加尽可能多的CSS上下文，以便以后进行广泛的样式设置。例如：
<ul class="mainmenu">
<li class="item_first item_active item_1"> First item </li>
<li class="item_2"> Second item </li>
<li class="item_3"> Third item </li>
<li class="item_last item_4"> Fourth item </li>
</ul>
这样，每个菜单项都可以根据其语义上下文进行样式设置：无论是列表中的第一项还是最后一项；是否为当前活动项目；和数字。
请注意，上面示例中概述的这种分配多个类在IE6中无法正常工作。有一种解决方法可以使IE6能够处理多个类。我还没有尝试过，但看起来非常有前途，来自Dean Edwards。在此之前，您将必须设置对您来说最重要的类（项目编号，使用中的或第一个/最后一个）或使用ID。（嘘IE6！）
- 3 回答
- 0 关注
- 520 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消