哪些策略可跟踪大量CSS规则？我们如何组织文件，代码块和规则？

解决方案

回答

通常，我会尝试将规则从通用改为特定。例如，文档的开头可能具有body，div，h1等规则。在那之后，我将进入类的特定规则。最后是ID的规则。

我也看到人们通过使用规则将规则分组在一起。例如，如果页面有一个表格；我们可以将样式表，单元格和数据的所有规则归为一组。可能在css文件中添加一些注释，以解释每个部分的用途，以便以后查找。

回答

我发现，基于id或者class的选择器比基于我的位置的选择器更不易更改，并且更易于维护。然后，我们将规则分为站点(全局)规则和应用程序规则。在每个文件中，我们按字母顺序组织内容(从最小到最具体)(根据CSS规范)。我们不会最小化或者以其他方式降低规则的可读性，并像对待代码一样对它们进行注释。重构HTML页面时，我要做的第一件事是从内容中剥离样式，并将其移到CSS文件中。我知道这一点很明显。

/艾伦

回答

我使用几种技术：

• 按＃ID /类别分组
• 注释主要块，使用下划线以方便搜索(/ * _IDName / *)
• 使用CSS速记有助于减小文件大小，使其更易于管理。

我已经在网上使用了一些不错的文章。我将尝试再次找到它们。

回答

对于很大的部分，将工作表分解成较小的逻辑块也很不错，每个逻辑块都有自己的工作表和链接标签。这样，当我们需要调整导航栏样式的一小部分以支持精美的新按钮时，其余样式中的大多数都是未更改的工作表，因此仍会缓存在用户计算机上。

回答

通常，我将根据规则在页面上的显示位置将主要的css文件分成几部分，以便于网页标题的一部分，导航栏的另一部分等等。

我还为打印介质分解了一个单独的文件。

像程序文件一样，我使用注释块来指示下一节中的规则。

我不相信与单个大文件相比，拥有多个小文件没有明显的性能优势。

回答

将布局规则与颜色和样式规则分开。

回答

我喜欢将CSS存储在Content文件夹中，该文件夹包含网站的静态内容。
然后，我通常尝试在每个"业务上下文"中使用一个CSS文件。因此，如果我有一个网站部分，那里的用户注册了贸易展览，则URL可能是" [host] / shows /"，而我的css文件将是" [host] /content/styles/shows.css"。
如果事情变得更加复杂而"节目"变得太大，那么我可能会创建一个"内容/共享/"文件夹和一个"内容/节目/"文件夹以匹配"节目"的子域。使用Resharper或者"查找并替换"，重命名问题变得无关紧要。

回答

我的4个秘诀：

组织CSS以使子项目比其他项目缩进更多：

#main_side {
    width: 392px;
    padding: 0;
    float: right; }

    #main_side #featured_articles {
        background: #fff; }

    #main_side #frontpageads {
        background: #fff;
        margin: 8px 0; }

使用速记：

margin:5px 0 4px 10px;

将样式表分为几个特定的​​部分：

全局样式(正文，段落，列表等)，标题，页面结构，标题，文本样式，导航，表单，注释，其他

可选：使用压缩器将代码压缩为较小的文件大小。

回答

我的基本方法是从程序化和风格化的角度进行研究。

• 避免重复
• 注释大块代码
• 如果可能，请使用CSS速记属性
• 合理地标记类，避免像class_001 / tom_cruise这样的无意义的事情

像这样订购CSS文件：

• 元素声明
• 下一个全球课程
• 布局容器和部分。

有用的链接：http://www.456bereastreet.com/archive/200610/useful_tips_for_writing_efficient_css/

回答

我特别感谢本文提供的技巧。

回答

分为几个部分和小部分，在顶部有一个目录。按字母顺序。

回答

• 我为一些默认规则制作了一个默认文件(适用于大多数子页面)
• 每个子页面都有自己的.css样式表(如果需要)
• 我使用速记(背景：#FFF url(../ images / header_1.jpg)0 0 repeat-x;)
• 如果给定类具有多个元素，则类ony(如果一个元素-使用id)
• 如果可以继承，请避免重复-做到这一点

回答

CSS的最有效使用涉及对类的大量重用。尽管有时可以根据类和ID在页面上的显示位置对它们进行分组，但是当我们开始适当地重用最终出现在多个区域的类时，此方法很快就会失效。

另外，我们应该避免在CSS类出现后对其进行命名，例如h1.blue或者tr.55. 以这种方式命名CSS类完全违背了使用CSS的目的。请记住，有一天我们可能想要将蓝色的所有内容更改为红色。如果我们将类命名为.blue和.red，则必须触摸标记才能完成任务。但是，如果我们将类命名为.moduleHeader或者类似名称，则可以在css文件中更改这些moduleHeader的颜色，而无需触摸标记。

精心构造且具有重用性的css文件最好按类按字母顺序进行组织。这种方法将始终被组织起来，并且对从事项目的每个人都有意义。

我更喜欢按字母顺序将我的班级分成一个大块，然后按字母顺序将另一个块用于我的ID。

根据站点的大小，最好将结构元素放入一个文件中，并将"样式"元素(颜色，字体选择等)放入另一个css文件中。这使我们可以仅使用结构元素就拥有一个完美可用的网站，并且还可以仅通过触摸或者换掉"样式" css表来"重新设计"该网站。

实际上，我更喜欢使用一个较大的css表，其中包含"漂亮"的东西和结构，因为在生产环境中在两者之间进行交换会很烦人。但是，根据团队结构，在另一种安排下，它可能对我们更好。

在一个类或者id声明中，我也按字母顺序组织属性。我尝试了其他组织结构，但是在没有任何培训的情况下，似乎唯一适合其他人使用的结构是按字母顺序排列的。

回答

对于一大堆CSS规则，我将以这种方式进行组织

• 首先提供所有重置的CSS规则
• 提供任何通用/通用规则(例如p {color：＃553423;}接下来
• 将剩余文档按页面各部分划分
• 将每个规则与一般规则排在一条线上，然后再加上更具体的规则
• 每个规则中按字母顺序排列的选择器

例子：

/*****
/*  ~masthead
/*****

#masthead {background-color: #cc00ff; color: #fff; width: 950px; }
#masthead h1 { background: transparent url(logo.png) no-repeat; text-indent: -9000px; width: 200px; }

/*****
/*  ~content
/*****

#content { background-color: #fedefd; margin:0; width: 357px; }
#content h1 { font-size: 120%; font-weight: bold; margin: 50px 20px 50px 70px; }
#content p em { color: magenta; }

这样你可以

• 轻松地搜索部分(搜索〜标头，我们就位于该部分的顶部)
• 轻松地一次扫描一个部分的所有规则，以确定是否覆盖了某些内容
• 即使排长队，也可以轻松调整规则。按字母顺序排列的选择器可确保"颜色"在同一规则中不会出现两次

回答

使用CleverCSS，这是一种小型标记语言，可以减轻编写和组织CSS的痛苦。

回答

我将所有样式直接放置在样式表的最顶部，直接放在标签上。下面是所有常规CSS类。

之后是主要结构，通常是全局结构。通常，我发现按后继者进行连续选择比较容易，例如：

#container { width: 600px; ... }
#container #header { .... }
#container #header h1 { font-size: massive; }

#container .column [ .. }
#container #left-column {.. }
#container #left-column #content { ... }

这具有提供一种缩进的好处，并且我们可以很容易地从CSS内看到页面的结构。有时，我们将不得不重命名样式规则的是页面结构的更改，但这并不重要。当所有规则都放在一行上时，这种样式最有效。

当涉及样式表的内容部分时，我会稍作更改，然后从内容div处直接下降。

#content h2 { ... }
#content h3 { ... }
#content ol, 
#content ul, 
#content dl { ... }

最后，我以特定页面的样式规则结束。我发现，根据男孩的文件名或者URI给男孩一个ID，而给男孩一个文件当前目录的类，这是最有意义的。这使得将主CSS中的样式规则定位到特定页面或者页面组(如果需要)非常容易。 (显然，我们应该权衡一下是否包含新的样式表。)

在样式规则声明中，我使所有规则井井有条，从显示属性，位置，大小，边距，边框，填充，背景，颜色，文本属性，线条属性，单词属性到字体属性。从概念上讲，是从外到内的(我们可以说字体属于文本属性的上方。只要我们保持一致，那就很重要了)。

我使用速记来表示框(例如，边距和边框)，因为必须记住它们(顶部，右侧，底部，左侧)。我避免将速记用于背景和字体，因为它们要记住起来有些棘手。

例如：

.rule { 
  display: block; visibility; visible; 
  position: relative; float: left; z-index: 1; top: 3px; left: 10em; 
  width: 100px; height 30px; overflow: hidden; 
  margin: 1px 3px 5px 1px; border:3px dotted #ff0; padding: 5px; 
  background-color: #f0f; background-image: url(/foo/bar); color: #000; 
  text-align: left; text-decoration: none; line-height: 3px; word-spacing: 2px; letter-spacing: 1px; 
  font-family: sans-serif; font-weight: bold; }

回答

我同意这里发布的大部分内容。我还发现，将设计与样式区分开来最终带来的是痛苦而不是帮助，尽管从理论上讲听起来不错。我确实想将CSS分成多个文件。通常，我对网站的主要设计元素有一个主要的CSS，然后是几个较小的文件(通常是按层次结构排列)，因为我需要更专业的设计元素。与此相关的一个问题是，很难知道哪个css文件包含我感兴趣的样式元素，但是我使用具有搜索工具的Aptana来组织我的项目。此外，Firebug可以。

我还发现，我更喜欢使css规则或者多或者少地独立存在，而不是将它们分成较小的规则，然后将它们串联在类定义中。我发现，如果一个div的所有代码都在一个或者两个规则中，而不是在我可能要搜索的许多规则中，则维护起来会更容易。这可能意味着有一些代码重复和更大的css文件，但是差别似乎没有那么大，我更喜欢可维护性。

回答

我在Twitter上通过@smashmag偶然发现了这个组织者，效果比我想象的要好

完成并准备好交付时，或者当样式表变得太乱而无法处理时，我将通过它运行CSS。

回答

除了别人提到的所有技巧外，我还倾向于将CSS分成多个文件。一个用于主导航的文件，一个用于页脚的文件，一个用于主字体的文件，一个用于表单的文件，一个用于页面上每个不同的"对象"的文件。

然后，我创建一个通用样式表，将所有文件" @import"。当我准备部署到生产环境中时，一个小的Ruby脚本会将那些@import语句扩展到单个文件中，从而减少了所需的HTTP请求数量。

以我的经验，这比在开发过程中将所有内容保存在一个文件中要好得多。

另外，我尝试尽可能多地评论我的CSS规则。我将多行注释用于规则的一般描述，并使用单行注释来解释单行：

#some_object {
  /*
   * What, where, why, how...
   */
  font-size: 1.2em; /* 12px */
}

最后，我使用CSSEdit组和缩进来组合相关规则：

/* @group My section title */
    #some_rule {
        ...
    }
/* @end */

回答

我终于把笔放到纸上，这样可以说出我所遵循的方法及其背后的原因。

http://milanadamovsky.blogspot.com/2010/04/advanced-css-style-order.html

米兰·阿达莫夫斯基

回答

尝试ProCSSor或者Styleneat，两者都很棒。

回答

如果将CSS拆分为单独的文件，并且有很多文件，请注意Internet Explorer最多只能包含31个CSS文件。它将不会加载超出该限制的任何样式。

另外，当然，如果我们有很多文件，那么我们将为Web服务器创建额外的工作并增加连接数量，这将减慢页面加载速度(再次，尤其是在Explorer中)，因此最好结合使用CSS部署站点时，即使将它们在开发过程中分开，也可以将它们集成到一个整体文件中。