代码之家  ›  专栏  ›  技术社区  ›  JasCav

管理CSS爆炸

organization css
  •  672
  • JasCav  · 技术社区  · 15 年前

    我一直在很大程度上依赖于我正在工作的一个网站的CSS。现在,所有的CSS样式都是以每个标记为基础应用的,所以现在我正试图将其转移到更多的外部样式,以帮助将来进行任何更改。

    但现在的问题是,我已经注意到我得到了一个“CSS爆炸”。对于我来说,决定如何最好地组织和抽象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开发速度的能力。这样,将来在这个站点上工作的其他人也将进入使用良好编码实践的实践中,而不是像我那样去学习。

    15 回复  |  直到 7 年前
        1
  •  553
  •   Pekka 웃    7 年前

    这是一个很好的问题。无论我在哪里看,CSS文件都会在一段时间后失去控制,尤其是在团队中工作时。

    以下是我自己努力遵守的规则(不是我一直努力遵守的规则)。

    • 尽早重构,经常重构。 经常清理CSS文件,将同一类的多个定义融合在一起。删除过时的定义 立即 .

    • 在修复错误的过程中添加CSS时,请就更改的作用留下注释(“这是为了确保框在IE<7中保持对齐”)。

    • 避免冗余,例如在 .classname 和 .classname:hover .

    • 使用注释 /** Head **/ 建立一个清晰的结构。

    • 使用一个更漂亮的工具,有助于保持不变的风格。我用 Polystyle 我很高兴(花了15美元,但花得还不错)。我相信周围也有免费的(更新:比如 Code Beautifier 基于 CSS Tidy ,一个开源工具,我还没有使用过,但看起来很有趣。)

    • 构建合理的类。请参阅下面的一些注释。

    • 使用语义,避免使用DIV SOUP <ul> 例如,用于菜单。

    • 在尽可能低的级别上定义所有内容(例如默认字体系列、颜色和大小 body 及使用 inherit 如果可能的话

    • 如果你有非常复杂的CSS,也许一个CSS预编译程序可以帮助你。我正计划调查 xCSS 因为同样的原因很快。周围还有几个人。

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

    • 如果在一个团队工作, 做 考虑使用版本控制。它使事情更容易跟踪,编辑冲突更容易解决。这是非常值得的,即使你“只是”进入HTML和CSS。

    • 不与合作 !important . 不仅因为ie=<7不能处理它。在复杂的结构中,使用!重要的是经常试图改变一个无法找到源头的行为,但是 毒药 用于长期维护。

    建立合理的班级

    这就是我喜欢建立合理的类的方式。

    我首先应用全局设置: 

    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 & GT; ,它们都具有相同的字体大小,并且这些项彼此相邻(与默认呈现的 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 has problems with multiple classes ,因此此示例使用 id S. 

    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>

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

    注释 在上面的例子中,这种对多个类的分配 does not work properly in IE6 .有一个 workaround 为了使IE6能够处理多个课程;我还没有尝试过,但看起来非常有希望,来自迪安爱德华兹。在此之前,您必须设置对您最重要的类(项目编号、活动的或第一个/最后一个)或使用ID。(Boo IE6!)

        2
  •  88
  •   Community Tales Farias    7 年前

    这里只有4个例子:

    在所有4个问题上,我的答案都包括了下载和阅读Natalie Downe的pdf的建议。 CSS Systems . (PDF包含了大量不在幻灯片中的注释,请阅读PDF!).注意她对组织的建议。

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

    • 使用CSS预处理器 并且把你的文件作为一部分来管理(我个人更喜欢用指南针的sass,但少一些也很好,还有一些其他的)
    • 阅读以下概念 OOCSS , SMACSS 和 BEM 或 getbem .
    • 看看CSS框架有多流行 Bootstrap 和 Zurb Foundation 是结构化的。不要低估不受欢迎的框架- Inuit 很有趣,但还有很多其他的。
    • 在持续集成服务器和/或类似grunt或gulp的任务运行程序上,通过构建步骤组合/缩小文件。
        3
  •  72
  •   Hemerson Varela    11 年前

    不要在CSS中写标题

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

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

    使用脚本将它们组合成一个;如有必要。你甚至可以有一个很好的目录结构,只需让你的脚本递归扫描 .css 文件夹。

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

    目录中的标题应该与您稍后编写的标题完全相同。搜索标题很痛苦。另外一个问题是,有人怎么知道在第一个头之后还有另一个头呢?另外,在编写TOC时,不要在每行的开头添加类似于DOC的*(星号),这只会使选择文本变得更麻烦。 

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

    使用规则或在规则内编写注释,而不是在块外

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

    将页面拆分为组件

    组件应具有 position:relative 没有 padding 而且没有 margin 大多数时候。这大大简化了%规则,并允许更简单的 absolute:position 元素,因为如果有一个绝对定位的容器,绝对定位的元素在计算时将使用容器。 top , right , bottom ,请 left 性质。

    HTML5文档中的大多数div通常是组件。

    组件也可以被视为页面上的独立单元。用外行的术语来说,如果把某物当作一个组件是有意义的,那么就把它当作一个组件来对待。 黑匣子 .

    再次使用QA页面示例: 

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

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

    在同一行上放置具有累积效果的规则。

    例如 border , 边缘 和 衬垫 (但不是) 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/类时,请避免使用标记作为选择器。

    首先,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;
}

    因为那里额外的悬垂沙发没有为选择器添加任何内容。它们还强制使用不必要的标记规则。例如,如果你要改变, .answer 从A div 到A article 你的风格会被打破。

    或者如果你更喜欢清晰: 

    #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 属性是一种特殊属性,仅当应用于 table . 如果 .statistics 不是一个 桌子 这不应该适用。

    一般规则是邪恶的!

    • 如果可以,请避免编写一般/神奇规则
    • 除非是用于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;
}

    复杂的“逻辑”注释不起作用:)

    如果你写了这样的话:“这个值取决于废话加上废话的高度”,那你就不可避免地会犯错误,而且会像纸牌屋一样倒塌。

    保持你的评论简单;如果你需要“逻辑操作”,考虑那些CSS模板语言,比如 SASS 或 LESS .

    我怎么写彩色托盘?

    把这个留到最后。为您的整个彩色托盘准备一个文件。如果没有这个文件,您的样式在规则中应该仍然有一些可用的颜色托盘。您的彩色托盘应该覆盖。您使用非常高级别的父组件(例如 #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选择器(提示:指向sitemap.xml)这样的工具来帮助您找到一些隐藏在CSS核和carnies中的垃圾。

    保持一个 unsorted.css 文件

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

    原因如下:

    • 完成后重构更快,然后搜索规则(可能不存在)并注入代码。
    • 你会写一些你要删除的东西,注入代码只会让你更难删除代码。
    • 附加到原始文件很容易导致规则/选择器重复
        4
  •  55
  •   Zimbabao    14 年前

    看一看 1。 SASS 2。 Compass

        5
  •  31
  •   Moin Zaman    12 年前

    我见过的最好的反击方式 CSS Bloat正在使用面向对象的CSS原则。

    甚至还有一个 OOCSS 框架很好。

    有些思想与上面的答案相悖,但一旦你知道如何设计 CSS 在面向对象的方式中,您会看到它实际上在保持代码精简和平均化方面起作用。

    这里的关键是识别站点中的“对象”或构建基块模式,并用它们进行构建。

    Facebook雇佣了OOCSS的创建者, Nicole Sullivan 在他们的前端代码(HTML/CSS)中可以节省很多钱。是的,实际上您不仅可以在CSS中获得节省,而且还可以在HTML中获得节省,通过它的声音,这对于您来说是非常有可能的,正如您提到的转换 table 基于大量布局 div 的

    另一个伟大的方法在某些方面与OOCSS相似,就是从一开始就计划和编写可扩展和模块化的CSS。 Jonathan Snook 写了一篇精彩的文章和一本关于 SMACSS - Scalable and Modular Architecture for CSS

    让我给你链接一下:
    5 mistakes of massive CSS - (Video)
    5 mistakes of massive CSS - (Slides)
    CSS Bloat - (Slides)

        6
  •  16
  •   Robusto    15 年前

    你还应该了解级联,重量,以及它们是如何工作的。

    我注意到您只使用类标识符(div.title)。你知道你也可以使用身份证吗,而且一个身份证比一个班级更重要吗?

    例如, 

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

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

    至于重量,请记住CSS轴从最普通/最轻移动到最具体/最重。也就是说,在CSS选择器中,元素说明符被类说明符覆盖,而ID说明符被类说明符覆盖。数字计数,因此具有两个元素说明符(ul li)的选择器将比只有一个说明符(li)的选择器具有更大的权重。

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

    顺便说一句,除非与class=“title”的其他元素发生冲突,否则不需要将元素说明符添加到类(div.title)中。不要增加不必要的重量,因为你以后可能需要使用这个重量。

        7
  •  13
  •   Abhishek Mehta    13 年前

    我可以建议 Less CSS Dynamic framework

    它与前面提到的SASS类似。

    它帮助维护每个父类的CSS。

    例如。 

     #parent{     
  width: 100%;

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

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

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

    另外,child1特定的CSS属于父级。

    这会使 

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

#parent #child2
{
 width: 100%;
 background: #F1F8E2;
 padding: 15px;
}
        8
  •  12
  •   Paul D. Waite    11 年前

    我发现困难的是将一个站点所需的设计转换成一系列规则。如果站点的设计是清晰的、基于规则的,那么您的类名和CSS结构就可以从中流出。但是,如果随着时间的推移,人们随机地在网站上添加一些不太有意义的内容,那么在CSS中就没有多少可以做的了。

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

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

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

    3. 显示在每页上的组件的样式(页眉、页脚等)

    4. 用于站点中不同位置的组件的样式

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

    如您所见,其中大部分取决于站点的设计。如果设计清晰而有条理,你的CSS就可以了。如果没有,你就重新拧紧了。

        9
  •  7
  •   G-Wiz RameshVel    15 年前

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

    您似乎在正确的路径上使用了命名语义,但它可以进一步发展。在没有结构修改的情况下重复出现在站点上的HTML部分(称为“模块”)可以被视为选择器根,从中可以确定相对于该根的内部布局。这是 面向对象的CSS 你可以 read/watch more about it in this talk by a Yahoo engineer .

    重要的是要注意,这种干净的方法可能与性能问题相反,这有利于 基于ID或标记名的短选择器 . 找到这种平衡取决于你自己,但是除非你有一个庞大的网站,否则这应该只是你脑后的一个指南,提醒你保持选择者的简短。 More about performance here .

    最后,你会有一个 单CSS文件 对于整个站点,还是多个文件(一个用于每页或节文件的基文件)?单个文件的性能更好,但在多个团队成员中可能更难理解/维护,并且可能更难测试。为了测试,我建议您 单个CSS测试页 这包括每个受支持的CSS模块来测试冲突和意外的级联。

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

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

        10
  •  5
  •   madr    11 年前

    如我之前所说:进入OOCSS。sass/less/compass很有诱惑力,但是在普通的css被使用之前,sass/less/compass只会让事情变得更糟。

    首先,阅读高效的CSS。试试谷歌网页速度,看看Souders写了什么关于高效的CSS。

    然后,输入oocss。

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

    它将彻底改变编写CSS的每一个方面。我重新焕然一新,并且热爱它。

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

        11
  •  3
  •   Jack Kinsella    9 年前

    合理CSS的核心原则,摘自 CSS Refactoring: From append-only to modular CSS

    写在萨斯。 放弃变量、混合等等的优势是愚蠢的。

    不要使用HTML ID进行样式设置;总是使用类 . 正确使用HTML ID时,整个页面只显示一次,即 与可重复使用性完全相反,可重复使用性是 合理的工程设计。而且,很难重写选择器 包含ID,并且通常唯一能压倒HTML ID的方法是 创建另一个ID,使ID像 它们是害虫。最好将HTML ID留给不变的javascript 或集成测试挂钩。

    通过它们的可视化函数而不是特定于应用程序的函数来命名CSS类。 例如,说“.highlight box” 而不是“捆绑产品折扣箱”。以这种方式编码意味着 您可以在角色退出时重新使用现有的样式表 副业。例如,我们开始卖法律票据,但是 最近改为法律教师。我们的旧CSS类的名称如下 “.下载文件盒”,一个在说话时有意义的类名。 关于数字文档,但仅在应用于新文档时才会混淆 私人导师领域。一个更好的名字,适合现有的 “服务”和任何未来的“服务”都是“漂亮的”无情的“盒子”。

    避免用特定的网格信息命名CSS类。 在CSS社区中曾经(现在仍然)有一种可怕的反模式 CSS框架的设计者和创建者 Twitter引导程序 ) 相信“SPAN-2”或“COLS-8”是CSS的合理名称 类。CSS的目的是让您能够修改 您的设计不会对标记产生太大影响。硬编码网格 HTML的大小阻碍了这一目标,因此建议在任何 该项目预计将持续一个周末以上。更多关于我们如何避免 以后的网格类。

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

    最小化嵌套。 引入新类而不是嵌套选择器。sass消除了重复选择器的痛苦 当筑巢并不意味着你必须筑巢五层深。 永远不要过度限定选择器(例如不要使用“ul.nav”where.nav 可以做同样的工作。)并且不要在 自定义类名(例如“h2.highlight”)。相反,只要使用类 只命名并删除基本选择器(例如上一个示例 应该是“.highlight”)。合格的选择器不会添加任何 价值。

    仅当为整个应用程序中应该一致的基本组件设计样式时,才为HTML元素(例如“h1”)创建样式。 避免使用像“header ul”这样的广泛选择器,因为很可能 无论如何,必须在某些地方覆盖它们。正如我们一直说的,大多数 每当你想使用一个特定的,名字很好的类时, 想要一种特别的风格。

    包含基本的块元素修饰符。 例如,您可以在这里阅读。我们用得很轻,但还是有帮助 我们经常组织CSS样式。

        12
  •  2
  •   Mitchel Sellers    15 年前

    很多时候,我会看到一些人将文件分成多个部分,每个部分之间有一个标题注释。

    类似的东西 

    /* Headings and General Text */

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

/* Main page layout */

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

    它工作得很好,可以让你以后很容易地回去找到你正在做的事情。

        13
  •  1
  •   Toni Leigh    9 年前

    你应该看看 边界元法 .

    理论

    BEM试图为CSS选择器的组织和命名提供一套说明,以使其更具可重用性和模块化,并避免此类选择器之间的冲突,这类冲突通常会导致意大利面条代码和特殊性头痛。

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

    • 当样式被添加到元素中时,它们会按预期执行
    • 样式不会泄漏,只会影响添加到的内容
    • 样式与文档结构完全分离
    • 风格不需要被迫互相超越

    BEM与SASS很好地合作,将几乎面向对象的风格引入到CSS中。您可以构建模块化文件,处理单个UI元素的显示,并包含变量,例如颜色和“方法”,例如如何处理内部元素。虽然一个硬核的OO程序员可能会拒绝这个想法,但实际上,应用的概念带来了OO结构中许多更好的部分,例如模块化、松散耦合、紧密的内聚和上下文无关的可重用性。您甚至可以通过使用 Sass and the & operato R.

    一篇来自《粉碎》杂志的更深入的文章可以 found here 还有一个来自CCS奇才的Harry Roberts(任何参与CSS的人都应该读过) is here .

    在实践中

    我已经用了好几次了,同时也用了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!

    Web组件

    2015年,我们开始研究Web组件。我对这些还不太了解,但他们希望把所有前端功能都放在独立的模块中,有效地尝试将BEM到前端的各种原则作为一个整体应用,并将分散但完全耦合的组件(如DOM片段、JS(MVC)和CSS)应用于构建相同的UI小部件。

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

    有一些进一步的阅读 here 同时也是一个框架 Polymer here 哪个值得一看

    终于

    我也认为这是一个 excellent, modern best practice css guide -专门为防止大型CSS项目变得混乱而设计。我尽量遵循这些原则。

        14
  •  0
  •   Nightfirecat peSHIr    13 年前

    我建议你看看 "Compass Style" CSS framework .

        15
  •  0
  •   quinton    12 年前

    这里有一些很好的材料,有些在回答这个问题时花了很长时间,但是当涉及到单独的样式表或单独的样式表时,我会使用单独的文件进行开发,然后在部署时将站点上使用的所有通用CSS合并为一个文件。

    这样,您就可以在开发过程中获得两个方面的最佳效果,提高性能(减少从浏览器请求的HTTP请求)和分离代码关注点。

    推荐文章
    Yunusović  ·  我无法用css更改html段落颜色
    1 年前
    Blake  ·  无法使用CSS旋转Angular 15中的字体图标
    1 年前
    Maarten -Monica for president  ·  将图像放在锚点标记内时调整网格中的图像大小
    1 年前
    Phil Lucks  ·  如何制作边界的外半径?
    1 年前
    roy_meir  ·  创建自定义下拉式元素
    1 年前
    Community wiki  ·  如何为触摸设备优化网站
    1 年前
    Paras Chandravanshi  ·  为什么<ul>没有从其父<p>元素继承?
    1 年前
    tpetzoldt  ·  如何在有光泽的情况下抑制图像的抗锯齿?
    1 年前
    boyenec  ·  反应如何将css样式应用于我从api respose获得的页面的spcifc部分
    1 年前
    manofconstsorrow  ·  点击导航项目关闭汉堡菜单
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号