我一直非常依赖CSS来创建我正在开发的网站.现在,所有的CSS样式都是在每个标签的基础上应用的,所以现在我try 将其转移到更多的外部样式,以帮助将来进行任何更改.

但现在的问题是,我注意到我得到了一个"CSS爆炸".我很难决定如何最好地组织和抽象CSS文件中的数据.

我在网站中使用了大量的div个标签,这是从一个基于大量表格的网站开始的.所以我得到了很多CSS Select 器,看起来像这样:

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文件,将同一类的多个定义融合在一起.删除过时的定义immediately.

  • 在修复错误期间添加CSS时,请就更改的作用留下注释("这是为了确保框在IE<;7中左对齐")

  • 避免冗余,例如在.classname.classname:hover中定义相同的内容.

  • 使用注释/** Head **/来构建清晰的 struct .

  • 使用有助于保持恒定风格的美容工具.我用Polystyle,我很高兴(花费15美元,但花得很好).也有免费的(例如基于CSS TidyCode Beautifier,一个开源工具).

  • 构建合理的类.有关这方面的一些说明,请参阅下面的内容.

  • 使用语义,避免DIV汤-例如,菜单使用<ul>.

  • 将所有内容定义为尽可能低的级别(例如,默认字体系列、 colored颜色 和大小为body),并在可能的情况下使用inherit

  • 如果你有非常复杂的CSS,也许CSS预编译器会有所帮助.出于同样的原因,我计划很快调查xCSS人.周围还有其他几个.

  • 如果在团队中工作,也要强调CSS文件质量和标准的必要性.每个人都热衷于用自己的编程语言编写标准,但很少有人意识到这对CSS也是必要的.

  • 如果在团队中工作,do可以考虑使用版本控制.它使跟踪事情变得容易得多,编辑冲突也变得容易解决得多.即使您"只是"喜欢HTML和CSS,这也是非常值得的.

  • 不要使用!important.不仅仅是因为IE=<;7不能处理它.在复杂的 struct 中,使用!important通常很容易改变其来源无法找到的行为,但使用poison进行长期维护.

Building sensible classes

这就是我喜欢构建合理类的方式.

我首先应用全局设置:

body { font-family: .... font-size ... color ... }
a { text-decoration: none; }

然后,我确定页面布局的主要部分-例如,顶部区域、菜单、内容和页脚.If I wrote good markup, these areas will be identical to the HTML structure.

然后,我开始构建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 struct 想象成一个tree,离根越远,定义就越具体.你希望尽可能少地上课,并且尽可能少地重复.

例如,假设您有三个级别的导航菜单.

首先,在名为menu的类中定义common个特征:

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像素.

Note:您也可以为此使用多个类,但是Internet Explorer 6 has problems with multiple classes,因此本例使用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>

如果页面上有语义相似的元素-比如这三个菜单-try 首先找出共性并将它们放入一个类中;然后找出特定的属性并将它们应用于类,或者,如果您必须支持Internet Explorer6,则将它们应用于ID.

Miscellaneous HTML tips

如果您将这些语义添加到您的HTML输出中,设计人员以后就可以使用纯CSS定制网站和/或应用的外观,这是一个巨大的优势和时间节约.

  • 如果可能, for each 页面的主体提供一个唯一的类:<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>
    

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

Note该多个类的赋值如上面的示例does not work properly in IE6中所概述的那样.有一个workaround可以使IE6能够处理多个类.如果无法 Select 解决办法,则必须设置对您最重要的类别(条目编号、活动或第一个/最后一个),或求助于使用ID.

Css相关问答推荐

如何在移动屏幕尺寸上包装元素?

悬停时可展开的按钮与屏幕右侧对齐,如何保持未悬停的按钮正确对齐?

Angular Material:如何同时使用2个徽章

防止在添加更多项目时扩展CSS网格行

如何将此 Select 器转换为TailWind类

如何缩小 Select 元素的背景图像?

为什么每次加载新页面时我的 React 侧边栏都会抖动?

如何将 CSS 样式应用于 Quarto 输出

React Typescript 中的自动 typewriter 效果

在嵌套的弹性框中创建弹性项目之间的空间

适合剩余高度

使用 HTML 和 CSS 滚动表格

中心表单提交按钮 HTML / CSS

更改最后一个
  • 的 CSS
  • 如何定位 CSS 网格布局中的特定列或行?

    Bootstrap 3 - 在每个网格列之后打印布局和中断

    加载资源失败:服务器响应状态为 404(未找到)

    如何更改 Angular Material 上 mat-icon 的大小?

    如何使用 Bootstrap2 使 div 居中?

    :before 和 ::before 有什么区别?