691

我一直在严重依赖 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 开发速度的能力。这样,将来可能在此站点上工作的其他人也将开始使用良好的编码实践,而不必像我一样去学习它。

4

15 回答 15

573

这个问题问得好。在我所见的任何地方,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">
     <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 能够处理多个类。如果解决方法不是一个选项,您将必须设置对您最重要的类(项目编号、活动或第一个/最后一个),或使用 ID。

于 2010-02-12T16:12:32.740 回答
89

这里仅举4个例子:

在所有 4 中,我的回答都包括下载和阅读 Natalie Downe 的 PDF CSS Systems的建议。(PDF 包含大量不在幻灯片中的注释,因此请阅读 PDF!)。记下她对组织的建议。

编辑(2014/02/05)四年后,我会说:

  • 使用 CSS 预处理器并将文件作为部分进行管理(我个人更喜欢 Sass 和 Compass,但 Less 也很好,还有其他的)
  • 阅读OOCSSSMACSSBEMgetbem等概念。
  • 看看像BootstrapZurb Foundation这样流行的 CSS 框架是如何构建的。不要忽视不太流行的框架——因纽特人是一个有趣的框架,但还有很多其他的。
  • 在持续集成服务器和/或 Grunt 或 Gulp 等任务运行器上通过构建步骤组合/缩小文件。
于 2010-02-12T16:39:18.870 回答
73

不要在 CSS 中写标题

只需将部分拆分为文件。任何 CSS 注释,都应该是注释。

reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css

使用脚本将它们组合成一个;如有必要。您甚至可以拥有一个不错的目录结构,并且只需让您的脚本递归地扫描.css文件。

如果你必须写标题,在文件的开头有一个目录

TOC 中的标题应该与您稍后编写的标题完全一致。搜索标题很痛苦。更糟糕的是,有人想知道您在第一个标题之后还有另一个标题吗?附言。编写 TOC 时不要在每行的开头添加类似 doc 的 *(星号),它只会让选择文本更烦人。

/* Table of Contents
   - - - - - - - - -
   Header stuff
   Body Stuff
   Some other junk
   - - - - - - - - -
 */
...
/* Header Stuff 
 */
...
/* Body Stuff 
 */

在规则内或规则内写评论,而不是在块外

首先,当您编辑脚本时,您有 50/50 的机会会注意规则块之外的内容(特别是如果它是一大堆文本;))。其次,(几乎)没有情况需要您在外面发表“评论”。如果它在外面,99% 的时间都是一个标题,所以保持这样。

将页面拆分为组件

大多数时候组件应该有position:relative, nopadding和 no 。margin这大大简化了 % 规则,并允许更简单absolute:position的元素 'ing,因为如果存在绝对定位容器,则绝对定位元素将在计算top, right, bottom,left属性时使用该容器。

HTML5 文档中的大多数 DIV 通常是一个组件。

组件也是页面上可以被视为独立单元的东西。用外行的话来说,如果将某物视为黑盒是有意义的,则将某物视为一个组件。

再次使用 QA 页面示例:

#navigation
#question
#answers
#answers .answer
etc.

通过将页面拆分为组件,您可以将工作拆分为可管理的单元。

将具有累积效应的规则放在同一行。

例如bordermarginpadding(但不是outline)都添加到您正在设计的元素的尺寸和大小。

position: absolute; top: 10px; right: 10px;

如果它们在一行上不那么可读,至少将它们放在附近:

padding: 10px; margin: 20px;
border: 1px solid black;

尽可能使用简写:

/* the following... */
padding-left: 10px;
padding-right: 10px;
/* can simply be written as */
padding: 0 10px;

永远不要重复选择器

如果您有更多相同选择器的实例,那么您很有可能不可避免地会遇到相同规则的多个实例。例如:

#some .selector {
    margin: 0;
    font-size: 11px;
}
...
#some .selector {
    border: 1px solid #000;
    margin: 0;
}

当您可以使用 id/classes 时,避免使用 TAG 作为选择器

首先,DIV 和 SPAN 标签是个例外:永远不要使用它们!;) 仅使用它们附加一个类/ID。

这...

div#answers div.answer table.statistics {
    border-collapse: collapsed;
    color: pink;
    border: 1px solid #000;
}
div#answers div.answer table.statistics thead {
    outline: 3px solid #000;
}

应该这样写:

#answers .answer .statistics {
    border-collapse: collapsed;
    color: pink;
    border: 1px solid #000;
}
#answers .answer .statistics thead {
    outline: 3px solid #000;
}

因为那里额外的悬空 DIV 不会向选择器添加任何内容。他们还强制执行不必要的标签规则。例如,如果你要改变你.answer的风格divarticle你的风格就会被打破。

或者,如果您更喜欢更清晰:

#answers .answer .statistics {
    color: pink;
    border: 1px solid #000;
}
#answers .answer table.statistics {
    border-collapse: collapsed;
}
#answers .answer .statistics thead {
    outline: 3px solid #000;
}

原因是该border-collapse属性是一种特殊属性,仅在应用于 a 时才有意义table。如果.statistics不是,table则不应适用。

通用规则是邪恶的!

  • 如果可以,请避免编写通用/魔术规则
  • 除非是用于 CSS 重置/取消重置,否则您所有的通用魔法都应该适用于至少一个根组件

它们不会节省你的时间,它们会让你的脑袋爆炸;以及使维护成为一场噩梦。当您编写规则时,您可能知道它们适用于何处,但这并不能保证您的规则以后不会惹恼您。

添加到这个通用规则是令人困惑且难以阅读的,即使您对您正在设计的文档有所了解。这并不是说您不应该编写通用规则,只是不要使用它们,除非您真的打算让它们成为通用规则,甚至它们也会尽可能多地在选择器中添加范围信息。

像这样的东西...

.badges {
    width: 100%;
    white-space: nowrap;
}

address {
    padding: 5px 10px;
    border: 1px solid #ccc;
}

...与在编程语言中使用全局变量有同样的问题。你需要给他们范围!

#question .userinfo .badges {
    width: 100%;
    white-space: nowrap;
}

#answers .answer .userinfo address {
    padding: 5px 10px;
    border: 1px solid #ccc;
}

基本上是这样写的:

components                   target
---------------------------- --------
#answers .answer   .userinfo address
-------- --------- --------- --------
domain   component component selector 

每当我知道的组件是页面上的单例时,我都喜欢使用 ID;您的需求可能会有所不同。

注意:理想情况下,您应该写得足够多。然而,与提及较少的组件相比,在选择器中提及更多的组件是更宽容的错误。

让我们假设您有一个pagination组件。您在站点的许多地方都使用它。这将是您何时编写通用规则的一个很好的例子。让我们说你display:block个人的页码链接,并给他们一个深灰色的背景。要使它们可见,您必须具有以下规则:

.pagination .pagelist a {
    color: #fff;
}

现在假设您将分页用于答案列表,您可能会遇到这样的事情

#answers .header a {
    color: #000;
}
...
.pagination .pagelist a {
    color: #fff;
}

这将使您的白色链接变黑,这是您不想要的。

修复它的错误方法是:

.pagination .pagelist a {
    color: #fff !important;
}

修复它的正确方法是:

#answers .header .pagination .pagelist a {
    color: #fff;
}

复杂的“逻辑”评论不起作用:)

如果你写这样的话:“这个值取决于 blah-blah 和 blah-blah 的高度”,你不可避免地会犯错误,它会像纸牌屋一样倒塌。

保持您的评论简单;如果您需要“逻辑操作”,请考虑其中一种 CSS 模板语言,如SASSLESS

你怎么写一个颜色托盘?

把这个留到最后。为您的整个调色板准备一个文件。没有这个文件,你的样式在规则中应该仍然有一些可用的调色板。您的颜色托盘应该覆盖。您使用非常高级的父组件(例如#page)链接选择器,然后将您的样式编写为自给自足的规则块。它可以只是颜色或更多。

例如。

#page #header .description,
#page #categories .description,
#page #answers .answer .body
{
    color: #222; background: #fff; 
    border-radius: 10px;
    padding: 1em;
}

这个想法很简单,您的颜色托盘是一个独立于您级联的基本样式的样式表。

更少的名称,需要更少的内存,使代码更易于阅读

使用更少的名称会更好。理想情况下使用非常简单(而且很短!)的单词:文本、正文、标题。

我还发现简单单词的组合比长长的“适当”单词汤更容易理解:postbody、posthead、userinfo 等。

保持词汇量小,这样即使有陌生人进来阅读你的风格汤(几周后就像你自己;))只需要了解单词的使用位置而不是每个选择器的使用位置。例如,.this每当一个元素被认为是“选定的项目”或“当前项目”等时,我都会使用它。

自己清理干净

写 CSS 就像吃饭,有时你会留下一团糟。确保你清理了那些乱七八糟的东西,否则垃圾代码就会堆积起来。删除您不使用的类/ID。删除您不使用的 CSS 规则。确保一切都很好,并且您没有冲突或重复的规则。

如果您按照我的建议将某些容器视为您的风格中的黑盒(组件),在选择器中使用这些组件,并将所有内容保存在一个专用文件中(或使用 TOC 和标题正确拆分文件),那么您的工作要容易得多...

您可以使用诸如 firefox 扩展 Dust-Me Selectors 之类的工具(提示:将其指向您的 sitemap.xml)来帮助您找到隐藏在您的 css 核武器和 carnies 中的一些垃圾。

保留一个unsorted.css文件

假设您正在设计一个 QA 站点,并且您已经有一个“答案页面”的样式表,我们将其称为answers.css. 如果您现在需要添加很多新的 CSS,请将其添加到unsorted.css样式表中,然后重构到您的answers.css样式表中。

造成这种情况的几个原因:

  • 完成后重构更快,然后是搜索规则(可能不存在)并注入代码
  • 您将编写将要删除的内容,注入代码只会使删除该代码变得更加困难
  • 附加到原始文件很容易导致规则/选择器重复
于 2011-01-20T17:16:54.380 回答
55

看看 1. SASS 2.指南针

于 2010-08-08T12:57:51.827 回答
31

我见过的对抗CSS臃肿的最好方法是使用面向对象的 CSS 原则。

甚至还有一个非常好的OOCSS框架。

一些意识形态与顶级答案中所说的很多内容背道而驰,但是一旦您知道如何以CSS面向对象的方式进行架构,您就会发现它实际上可以保持代码精简和平均。

这里的关键是在您的站点中识别“对象”或构建块模式并与它们一起构建。

Facebook 聘请了 OOCSS 的创建者Nicole Sullivan来节省大量前端代码(HTML / CSS)。是的,您实际上不仅可以节省 CSS,还可以节省 HTML,听上去,这对您来说是非常有可能的,因为您提到将table基于布局的布局转换为大量div's

另一个很好的方法在某些方面类似于 OOCSS,是从一开始就计划和编写你的 CSS 以可扩展和模块化。Jonathan Snook就SMACSS - Scalable and Modular Architecture for CSS撰写了精彩的文章和书籍/电子书

让我给你一些链接:
大规模 CSS 的 5 个错误 -(视频)
大规模 CSS 的 5 个错误 -(幻灯片)
CSS 膨胀 -(幻灯片)

于 2011-01-27T05:18:19.450 回答
16

您还应该了解级联、重量以及它们的工作原理。

我注意到您只使用类标识符(div.title)。您是否知道您也可以使用 ID,并且 ID 比课程更重要?

例如,

#page1 div.title, #page1 ul, #page1 span {
  // rules
}

将使所有这些元素共享一个字体大小,比如说,颜色,或者任何你的规则。您甚至可以使所有作为#page1 后代的DIV 获得某些规则。

至于重量,请记住 CSS 轴从最一般/最轻到最具体/最重。也就是说,在 CSS 选择器中,元素说明符被类说明符否决,被 ID 说明符否决。数字很​​重要,因此具有两个元素说明符 (ul li) 的选择器将比仅具有单个说明符 (li) 的选择器具有更大的权重。

把它想象成数字。个位列中的 9 仍小于十位列中的 1。具有 ID 说明符、类说明符和两个元素说明符的选择器将比没有 ID、500 个类说明符和 1,000 个元素说明符的选择器具有更大的权重。当然,这是一个荒谬的例子,但你明白了。关键是,应用这个概念可以帮助你清理大量的 CSS。

顺便说一句,除非您遇到与具有 class="title" 的其他元素的冲突,否则不需要将元素说明符添加到类 (div.title)。不要增加不必要的重量,因为您以后可能需要使用该重量。

于 2010-02-12T16:46:11.193 回答
12

我发现困难的事情是将网站所需的设计转化为一系列规则。如果网站的设计清晰且基于规则,那么您的类名和 CSS 结构就可以从中受益。但是,如果人们随着时间的推移在网站上随机添加一些没有多大意义的内容,那么您在 CSS 中就无能为力了。

我倾向于像这样组织我的 CSS 文件:

  1. CSS 重置,基于Eric Meyer 的. (因为否则我发现,对于大多数元素,我至少有一个或两个规则只是重置默认浏览器样式 - 例如,我的大多数列表看起来不像列表的默认 HTML 样式。)

  2. 网格系统 CSS,如果站点需要的话。(我的基础是960.gs

  3. 每个页面上出现的组件的样式(页眉、页脚等)

  4. 在整个站点的各个地方使用的组件的样式

  5. 仅与单个页面相关的样式

如您所见,其中大部分取决于网站的设计。如果设计的清晰和有条理,你的 CSS 就可以了。如果没有,你就完蛋了。

于 2010-02-12T16:32:24.500 回答
12

我可以建议Less CSS 动态框架吗

它类似于前面提到的 SASS。

它有助于维护每个父类的 CSS。

例如

 #parent{     
  width: 100%;

    #child1
    {    
     background: #E1E8F2;    
     padding: 5px;    
    }

    #child2
   {
     background: #F1F8E2;
     padding: 15px
   }
 }

这是做什么的:将宽度:100% 应用于 #child1 和 #child2。

此外,#child1 特定的 CSS 属于 #parent。

这将呈现为

#parent #child1
{
 width: 100%;
 background: #E1E8F2;
 padding: 5px;
}

#parent #child2
{
 width: 100%;
 background: #F1F8E2;
 padding: 15px;
}
于 2011-04-07T19:28:06.847 回答
7

我的回答是高层次的,以解决你在问题中提出的高层次问题。可能有一些低级的组织技巧和调整可以使它更漂亮,但这些都不能解决方法上的缺陷。有几件事会影响 CSS 爆炸。显然,网站的整体复杂性,还有命名语义、CSS 性能、CSS 文件组织和可测试性/可接受性等。

您似乎在命名语义方面走在了正确的道路上,但可以更进一步。在网站上重复出现而没有结构修改的 HTML 部分(称为“模块”)可以被视为选择器根,并且您可以从那里确定相对于该根的内部布局。这是面向对象 CSS的基本原则,您可以在 Yahoo 工程师的这次演讲中阅读/观看更多有关它的信息

重要的是要注意,这种干净的方法可以与性能问题相反,后者有利于基于 id 或 tag name 的短选择器。找到这种平衡取决于你,但除非你有一个庞大的网站,否则这应该只是你脑后的一个指南,提醒你保持你的选择器简短。 更多关于性能的信息

最后,您是要为整个站点创建一个 CSS 文件,还是使用多个文件(单个基本文件与每页或 -section 文件一起使用)?单个文件的性能更好,但可能更难与多个团队成员一起理解/维护,并且可能更难测试。对于测试,我建议您使用一个包含所有支持的 CSS 模块的CSS 测试页面来测试冲突和意外级联。

或者,您可以使用多文件方法,将 CSS 规则范围限定为页面或部分。这需要浏览器下载多个文件,这是一个性能问题。您可以使用服务器端编程来动态指定和聚合(和缩小)CSS 文件到单个文件中。但是由于这些文件是独立的,并且对它们的测试也是独立的,因此您可能会在页面/部分之间引入不一致的外观和感觉。因此测试变得更加困难。

由您来分析客户的特定需求,并相应地平衡这些问题。

于 2010-02-12T16:46:52.253 回答
5

正如我之前所说:进入 OOCSS。Sass/Less/Compass 很诱人,但除非以正确的方式使用原始 CSS,否则 Sass/Less/Compass 只会让事情变得更糟。

首先,阅读有关高效 css 的信息。试试 Google Page Speed 并阅读 Souders 写的关于高效 CSS 的文章。

然后,输入 OOCSS。

  • 学习使用级联。(毕竟,我们称之为层叠样式表)。
  • 了解如何获得正确的粒度(自下而上而不是自上而下)
  • 学习如何分离结构和皮肤(什么是独特的,这些对象的变化是什么?)
  • 了解如何分离容器和内容。
  • 学会爱网格。

它将彻底改变编写 CSS 的每一点。我完全更新并喜欢它。

更新:SMACSS 类似于 OOCSS,但一般来说更容易适应。

于 2011-01-27T21:21:58.613 回答
4

明智 CSS 的核心原则,摘自CSS Refactoring:从仅附加到模块化 CSS

写在 SASS 中。放弃变量、mixin 等的优势,你会发疯的。

永远不要使用 HTML ID 进行样式设置;总是使用类。如果使用得当,HTML ID 在整个页面中只出现一次,这与可重用性完全相反——可重用性是明智工程中最基本的商品之一。此外,覆盖包含 ID 的选择器真的很难,而且通常唯一能压倒一个 HTML ID 的方法是创建另一个 ID,这会导致 ID 在代码库中传播,就像它们是害虫一样。最好将 HTML ID 保留为不变的 Javascript 或集成测试挂钩。

通过视觉功能而不是应用程序特定的功能来命名您的 CSS 类。例如,说“.highlight-box”而不是“.bundle-product-discount-box”。以这种方式编码意味着您可以在处理副业时重新使用现有的样式表。例如,我们开始销售法律笔记,但最近转而担任法律导师。我们旧的 CSS 类有类似“.download_document_box”的名称,这个类名在谈论数字文档时是有意义的,但只会在应用于私人导师的新领域时才会混淆。适合现有服务和任何未来服务的更好名称是“.pretty_callout_box”。

避免在特定网格信息之后命名 CSS 类。CSS 社区中有(现在仍然是)一种可怕的反模式,CSS 框架的设计者和创建者(咳嗽Twitter Bootstrap)认为“span-2”或“cols-8”是 CSS 类的合理名称。CSS 的重点是让您可以在不影响标记的情况下修改您的设计(很多)。将网格大小硬编码到 HTML 中会阻碍这一目标,因此建议不要在任何预计持续时间超过周末的项目中使用它。更多关于我们稍后如何避免网格类的信息。

跨文件拆分您的 CSS。理想情况下,您会将所有内容拆分为“组件”/“小部件”,然后从这些设计原子组成页面。但实际上,您会注意到您的一些网站页面具有特殊性(例如,特殊的布局,或者只出现在一篇文章中的奇怪照片库)。在这些情况下,您可能会创建一个与该特定页面相关的文件,只有在明确该元素将在其他地方重用时才重构为一个完整的小部件。这是一种权衡,是出于实际预算问题的考虑。

尽量减少嵌套。引入新类而不是嵌套选择器。SASS 消除了嵌套时重复选择器的痛苦这一事实并不意味着您必须嵌套五层深。永远不要过度限定选择器(例如,不要使用“ul.nav”,而“.nav”可以做同样的工作。)并且不要在自定义类名旁边指定 HTML 元素(例如“h2.highlight”)。相反,只需单独使用类名并删除基本选择器(例如,前面的示例应该是“.highlight”)。过度限定的选择器不会增加任何价值。

仅在样式化基本组件时才为 HTML 元素(例如“h1”)创建样式,这应该在整个应用程序中保持一致。 避免使用诸如“header ul”之类的广泛选择器,因为无论如何您可能都必须在某些地方覆盖它们。正如我们一直说的那样,大多数时候,只要您想要一种特定的样式,您就想使用一个特定的、命名良好的类。

拥抱 Block-Element-Modifier 的基础知识。例如,您可以在此处阅读有关它的信息。我们使用它非常轻松,但它仍然对我们组织 CSS 样式有很大帮助。

于 2015-10-26T10:50:20.230 回答
2

很多时候,我会看到有人将文件分成多个部分,并在部分之间添加标题注释。

就像是

/* Headings and General Text */

.... stuff here for H1, etc..

/* Main page layout */

.... stuff here for layout page setup etc.

它工作得很好,可以很容易地稍后返回并找到您正在处理的内容。

于 2010-02-12T16:08:48.880 回答
1

你应该看看BEM

理论

BEM 试图提供一组用于组织和命名 css 选择器的指令,以试图使事情更具可重用性和模块化,并避免经常导致意大利面条式代码和特异性头痛的那种选择器之间的冲突。

如果使用得当,它实际上会产生一些非常积极的效果。

  • 将样式添加到元素时,它们会按照您的期望执行
  • 样式不会泄漏,只会影响添加到的内容
  • 样式与文档结构完全解耦
  • 风格不需要被迫相互超越

BEM 与 SASS 配合得很好,为 CSS 带来了几乎面向对象的风格。您可以构建模块化文件,处理单个 UI 元素的显示并包含变量,例如颜色和“方法”,例如如何处理内部元素。虽然铁杆 OO 程序员可能会拒绝这个想法,但实际上,应用概念带来了 OO 结构的许多更好的部分,例如模块化、松散耦合和紧密内聚以及上下文无关的可重用性。您甚至可以使用Sass 和&operator以一种看起来像封装对象的方式构建。

可以在这里找到来自 Smashing Magazine 的更深入的文章;来自 CCS Wizardry 的 Harry Roberts 的一篇(任何参与 css 的人都应该读一读)在这里

在实践中

我已经多次使用了这个,以及使用了 SMACSS 和 OOCSS,这意味着我也有一些东西可以比较它们。我也曾在一些大混乱中工作过,通常是我自己的、缺乏经验的创作。

当我在现实世界中使用 BEM 时,我用一些额外的原则来增强这项技术。我使用实用程序类 - 一个很好的例子是包装类:

.page-section {
    width: 100%;
}
@media screen and (min-width: 1200px) {
    margin: 0 auto;
    width: 1200px;
}

而且我也有点依赖级联和特异性。这里是 BEM 模块,.primary-box并且.header是特定覆盖的上下文

.header {
  .primary-box {
    color: #000;
  }
}

(我尽我最大的努力使所有内容尽可能通用和上下文无关,这意味着一个好的项目几乎所有内容都在可重用的模块中)

我要在这里提出的最后一点是,无论您的项目看起来多么小和不复杂,您都应该从一开始就这样做,原因有两个:

  • 项目复杂性增加,因此奠定良好的基础很重要,包括 CSS
  • 即使是一个看起来很简单的项目,因为它是在 WordPress 上构建的,几乎没有 JavaScript,但在 CSS 中仍然可能非常复杂 - 好吧,你不必做任何服务器端编码,所以这部分很简单,但是小册子磨损前端有 20 个模块,每个模块有 3 个变体:你有一些非常复杂的 css!

网页组件

2015 年,我们开始关注 Web 组件。我对这些还不是很了解,但他们希望将所有前端功能集中在自包含模块中,有效地尝试将 BEM 的各种原则作为一个整体应用到前端,并将分散但完全耦合的组件化DOM 片段、Js (MVC) 和 CSS 等元素都构建了相同的 UI 小部件。

通过这样做,theyb 将解决 css 中存在的一些原始问题,我们试图用 BEM 之类的东西来解决这些问题,同时使其他一些前端架构更加健全。

这里有一些进一步的阅读,还有一个框架Polymer 这里非常值得一看

最后

我也认为这是一个优秀的现代最佳实践 css 指南- 专为阻止大型 css 项目变得混乱而设计。我尝试遵循其中的大部分。

于 2015-07-23T11:57:12.637 回答
0

我建议您查看“指南针样式”CSS 框架

于 2011-02-16T15:54:58.850 回答
0

这里有一些很棒的材料,有些人花了很多时间来回答这个问题,但是当涉及到单独或单独的样式表时,我会使用单独的文件进行开发,然后将所有通用 css 用于整个站点合并部署时放入单个文件中。

这样您就可以两全其美,提高性能(从浏览器请求的 HTTP 请求更少)并在开发时分离代码问题。

于 2012-04-17T17:05:06.250 回答