小编典典

管理 CSS 爆炸

all

我一直在严重依赖 CSS 来开发我正在开发的网站。现在,所有的 CSS
样式都在每个标签的基础上应用,所以现在我正试图将它转移到更多的外部样式,以帮助未来的任何变化。

但现在的问题是我注意到我得到了“CSS Explosion”。我越来越难以决定如何最好地组织和抽象 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
开发速度的能力。这样,将来可能在此站点上工作的其他人也将开始使用良好的编码实践,而不必像我一样去学习它。


阅读 94

收藏
2022-03-03

共1个答案

小编典典

这个问题问得好。在我所见的任何地方,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
存在多个类的问题
,因此本示例使用ids。

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">
    

  • First item

  • Second item

  • Third item

  • Fourth item

这样,可以根据语义上下文访问每个菜单项以进行样式设置:无论是列表中的第一项还是最后一项;是否为当前活动物品;并按编号。

请注意 ,上面示例中概述的多个类的分配 在 IE6
中无法正常工作
。有一种 解决方法 可以使 IE6
能够处理多个类。如果解决方法不是一个选项,您将不得不设置对您最重要的类别(项目编号、活动或第一个/最后一个),或使用 ID。

2022-03-03