什么是组织CSS规则的最好方法？
什么策略可以帮助您跟踪大量的CSS规则？ 你如何组织你的文件，你的代码块和你的规则？
对于一个css规则的大文件，我会以这种方式来组织它
- 首先提供任何重置的CSS规则
- 提供任何通用/通用规则（例如p {color：＃553423;}）
- 将剩余的文档按页面分割
- 把每条规则放在一条一般的规则之后，再加上更具体的规则
- 每个规则中的字母select器
例：
/***** /* ~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; } 这样你可以
- 轻松search一个部分（search〜标头，你在这个部分的顶部）
- 轻松扫描一个部分的所有规则，以确定是否被覆盖或不
- 轻松调整规则，即使排长队。 字母select器确保“颜色”不会以相同的规则出现两次
我的4个提示：
组织你的CSS缩进子项目比其余的：
#main_side { width: 392px; padding: 0; float: right; } #main_side #featured_articles { background: #fff; } #main_side #frontpageads { background: #fff; margin: 8px 0; }
使用shorthands：
margin:5px 0 4px 10px;
将样式表分成特定的部分：
全局样式 – （正文，段落，列表等），标题，页面结构，标题，文本样式，导航，表单，注释，附件
可选：使用压缩器将代码压缩到更小的文件大小。
CSS的最有效的使用涉及大量重用类。 虽然按照页面上的显示位置将class级和ID分组很容易，但是当您开始适当地重复使用最终出现在多个区域的class级时，此方法会很快崩溃。
此外，你应该避免命名你的css类，如h1.blue或tr.55。 以这种方式命名CSS类完全违背了使用CSS的目的。 请记住，有一天你可能想把所有蓝色的东西都改成红色。 如果您将类名为.blue和.red，则必须触摸标记才能完成您的任务。 但是，如果您命名类.moduleHeader或类似名称，则可以更改css文件中这些moduleHeaders的颜色，而不必触摸标记。
精心构build的具有重用类的css文件最好按字母顺序按类组织。 这种方法将始终是组织的，并将有利于每个在你的项目上工作的人。
我更喜欢按照字母顺序将我的课程组织在一个大块中，然后为我的ID按字母顺序组织。
根据网站的大小，将结构元素放入一个文件和另一个css文件中的“样式”元素（颜色，字体select等）可能是一个好主意。 这使得您只需使用结构元素即可拥有完美可用的网站，而且还允许您仅通过触摸或交换“文体”CSS表格来“重新devise”网站。
在实践中，我更喜欢有一个更大的css表格，既有“漂亮”的东西，也有结构，因为在生产环境中，这两者之间的交换非常烦人。 但是，根据您的团队结构，在另一种安排下，您可能更适合您。
在一个类或id声明中，我也按字母顺序组织我的属性。 我尝试了其他的组织结构，但是没有经过培训的似乎只为其他人工作的是按字母顺序排列的。
一般来说，我试图把规则从通用到特定。 例如，文档的开始可能有body，div，h1等的规则。 之后，我将进入类特定的规则。 最后按照id的规则。
我也看到人们通过使用将规则组合在一起。 例如，如果你的页面有一个表; 您可以将所有规则分组在一起，将表，单元格，数据样式化。 可能在css文件中添加一些注释来解释每个部分的用途，以便稍后查找。
我发现基于id或class的select器比那些基于位置的select器更易于修改和易于维护。 然后，我们将规则分割成网站（全局）和应用程序规则。 在每个文件中，我们按字母顺序组织事情，从最小到最具体（每个css规范）。 我们不会最小化或以其他方式减less规则的可读性，并将它们评论为代码。 当我重构一个HTML页面时，我所做的第一件事就是从内容中剥离样式，并将其移动到css文件中。 我知道这个可能很明显。
/艾伦
我的基本方法是从程序和文体的angular度来看待它。
- 避免重复
- 评论大块代码
- 如果可能的话使用css速记属性
- 明智地标记类，避免像class_001 / tom_cruise这样的没有意义的东西
像这样sorting你的CSS文件：
- 元素声明
- 下一个全球课程
- 布局容器和部分。
有用的链接： http ： //www.456bereastreet.com/archive/200610/useful_tips_for_writing_efficient_css/
使用CleverCSS ，这是一种小型的标记语言，可以消除编写和组织CSS所带来的痛苦。
我在twitter上通过@smashmag无意中发现了这个组织者，比我想象的更好 – styleneat.com
一旦我完成并准备好交付，或者当我的样式表变得太乱以至于无法处理时，我就会通过它运行我的CSS。
除了别人提到的所有提示，我倾向于将我的CSS分成多个文件 。 一个用于主导航的文件，一个用于页脚，一个用于主排版，一个用于表单，一个用于页面上每个不同的“对象”。
然后我创build一个通用样式表，@ @import所有这些文件。 当我准备好部署到生产环境时，一个小小的Ruby脚本将这些@import语句展开成一个文件，从而减less了所需的HTTP请求数量。
根据我的经验，这比在开发过程中保存在一个文件中要好很多。
另外，我尽可能地评论我的CSS规则 。 我使用多行注释来描述规则的一般描述，单行注释来解释单行：
#some_object { /* * What, where, why, how... */ font-size: 1.2em; /* 12px */ }
最后，我通过CSSEdit 组和缩进来合并相关的规则：
/* @group My section title */ #some_rule { ... } /* @end */
如果您将CSS分解为单独的文件，并且您已经获得了很多这些文件，请注意，Internet Explorer的CSS文件限制为31个。 它不会加载超出该限制的任何样式。
另外，当然如果你有很多的文件，你会为你的web服务器创build额外的工作，并增加连接数，这将减慢你的页面加载速度（特别是在浏览器中），所以最好把你的CSS当您部署您的网站时，即使您在开发过程中将它们分开，也可以将其整合到一个单一的整体文件中。
从颜色和文体规则中分离布局规则。
我终于放下笔来说话，记下我遵循的方法和背后的理由。
http://milanadamovsky.blogspot.com/2010/04/advanced-css-style-order.html
米兰Adamovsky
我将所有样式直接应用于样式表顶部的标签。 下面是任何一般的CSS类。
之后是主要结构，通常是全球性的。 一般来说，我发现继续select被inheritance者比较容易，例如：
#container { width: 600px; ... } #container #header { .... } #container #header h1 { font-size: massive; } #container .column [ .. } #container #left-column {.. } #container #left-column #content { ... }
这有一个缩进的好处，你可以很容易地从CSS中看到页面的结构。 有时你必须重新命名你的风格规则是页面结构的变化，但这不是什么大不了的事情。 当所有的规则都在同一行上时，这种风格效果最好。
当涉及到我的样式表的内容部分时，我稍微改变了一些东西，直接从我的内容分区下降。
#content h2 { ... } #content h3 { ... } #content ol, #content ul, #content dl { ... }
最后，我结束了特定页面的样式规则。 我发现最有意义的是给男孩一个基于文件名或URI的身份证，身体是文件当前目录的一个类。 这使得将主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; }
我使用几种技术：
- 按#ID /类分组
- 注释主要块，使用下划线进行简单search（/ * _IDName / *）
- 使用CSS简写可以帮助保持文件的大小，从而更易于pipe理。
网上有一些我用过的好的文章。 我会再试一次。
对于非常大的部分，将工作表分成更小的逻辑块也是很好的，每个逻辑块都有自己的工作表和链接标签。 这样，当你需要调整一小部分的导航栏样式来支持新奇的button时，其余大部分样式都是没有改变的表单，因此仍然在你的用户机器上被caching。
我通常会把主要的css文件分成几个部分，这些部分是基于规则出现在页面上的哪个部分 – 所以会有一个网页标题部分，另一个是导航栏部分等等。
我还打印出一个单独的打印介质文件。
像程序文件一样，我使用注释块来指出下一节中的规则。
尽pipe如此，我不认为有几个小文件与单个大文件相比有显着的性能优势。
我喜欢将css存储在包含站点静态内容的Content文件夹中。 然后我通常尝试每个“业务上下文”有一个CSS文件。 所以，如果我有一个网站部分的用户注册贸易展览会，URL可能是“[主机] /显示/”和我的CSS文件将是“[主机] /内容/风格/显示。 如果事情变得更加复杂，“显示”变得太大，我可能会创build一个“content / shared /”文件夹和一个“content / shows /”来匹配“shows”的子域名。 使用Resharper或“查找和replace”重命名问题变得微不足道。
分为几个部分和小节，顶部有一个目录。 按字母顺序排列。
- 我为某些默认规则创build了一个默认文件（应用于大部分子页面）
- 每个子页面都有自己的.css样式表（如果需要的话）
- 我使用shorthands（背景：#FFF url（../ images / header_1.jpg）0 0 repeat-x;）
- 如果我有多于一个给定类的元素（如果一个元素 – 使用ID）
- 避免重复，如果你可以inheritance – 做到这一点
我同意这里发布的大部分内容。 我也发现，把devise和风格分开，最终会比帮助更痛苦，即使听起来不错。 我喜欢把我的CSS分成多个文件。 我通常有一个主要的CSS为我的网站的主要devise元素，然后几个较小的文件，往往在一个层次结构，因为我需要更多的专业devise元素。 一个问题是，它可能变得很难知道哪个css文件包含我感兴趣的样式元素，但我组织我的项目与Aptana，它有search工具。 此外，Firebug帮助这一点。
我还发现，我更喜欢保持我的CSS规则多或less自包含，而不是将它们分成较小的规则，然后在类定义中将它们连接起来。 例如，如果一个div的所有代码都在一个或两个规则中，而不是我可能需要search的许多规则中，我发现维护更容易。 这可能意味着有一些代码重复和一个更大的CSS文件，但差异似乎并不大，我更喜欢可维护性。
尝试ProCSSor或Styleneat ，都很好。
我特别欣赏这篇文章中给出的技巧。
