我一直在严重依赖 CSS 来开发我正在开发的网站。现在,所有的 CSS 样式都在每个标签的基础上应用,所以现在我正试图将它转移到更多的外部样式,以帮助未来的任何变化。
但现在的问题是我注意到我得到了“CSS Explosion”。我越来越难以决定如何最好地组织和抽象 CSS 文件中的数据。
我在网站中使用了大量div标签,从一个基于表格的网站转移。所以我得到了很多看起来像这样的 CSS 选择器:
div
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 开发速度的能力。这样,将来可能在此站点上工作的其他人也将开始使用良好的编码实践,而不必像我一样去学习它。
这个问题问得好。在我所见的任何地方,CSS 文件往往会在一段时间后失控——特别是,但不仅限于在团队中工作时。
以下是我自己试图遵守的规则(不是我总是设法遵守的。)
尽早重构,经常重构。 经常清理 CSS 文件,将同一类的多个定义融合在一起。 立即 删除过时的定义。
在修复错误期间添加 CSS 时,请评论更改的作用(“这是为了确保框在 IE < 7 中左对齐”)
.classname避免冗余,例如在和中定义相同的东西.classname:hover。
.classname
.classname:hover
使用注释/** Head **/构建清晰的结构。
/** Head **/
使用有助于保持风格不变的美化工具。我使用 Polystyle ,对此我很满意(花费 15 美元,但物有所值)。周围也有免费的(例如基于 CSS Tidy的 Code Beautifier ,一个开源工具)。 ****
建立明智的课程。有关这方面的一些说明,请参见下文。
使用语义,避免 DIV 汤 -<ul>例如,将 s 用于菜单。
<ul>
在尽可能低的级别上定义所有内容(例如 中的默认字体系列、颜色和大小body)并inherit尽可能使用
body
inherit
如果您有非常复杂的 CSS,也许 CSS 预编译器会有所帮助。出于同样的原因,我计划很快研究 xCSS 。周围还有其他几个。
如果在团队中工作,还要强调 CSS 文件的质量和标准的必要性。每个人都非常重视他们的编程语言中的编码标准,但很少有人意识到这对于 CSS 也是必要的。
如果在团队中工作, 请 考虑使用版本控制。它使事情更容易跟踪,编辑冲突更容易解决。这真的很值得,即使你“只是”进入 HTML 和 CSS。
不要使用!important. 不仅因为 IE =< 7 无法处理它。在复杂的结构中,使用!important往往很容易改变一种无法找到来源的行为,但它对长期维护来说是 毒药。
!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)。
ul
list-style-type
首先,在名为 的类中定义 共同menu特征:
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。
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 class='contactpage'>
body.contactpage div.container ul.mainmenu li { color: green }
自动构建菜单时,添加尽可能多的 CSS 上下文,以便以后进行广泛的样式设置。例如:
<ul class="mainmenu">
这样,可以根据语义上下文访问每个菜单项以进行样式设置:无论是列表中的第一项还是最后一项;是否为当前活动物品;并按编号。
请注意 ,上面示例中概述的多个类的分配 在 IE6 中无法正常工作 。有一种 解决方法 可以使 IE6 能够处理多个类。如果解决方法不是一个选项,您将不得不设置对您最重要的类别(项目编号、活动或第一个/最后一个),或使用 ID。