管理CSS爆炸

这个问题问得好。我所看到的任何地方，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 h1div.content ul.table_of_contents li h2div.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！）

管理CSS爆炸

3回答