我如何重构我的CSS？ [重复]

Possible Duplicate:
How to Manage CSS Explosion

可能重复：如何管理CSS爆炸

I intended to build my web site with consistent styles and a coherent CSS scheme. But styles have crept out of control as I fine-tune individual pages (especially the main search form).

我打算用一致的样式和一致的CSS方案构建我的网站。但是当我调整单个页面（特别是主搜索表单）时，样式已经失控。

I've already gone through the process one time of breaking down the styles and rebuilding almost from scratch, and now it looks like time to do that again. How can I be efficient about this? I'm looking for a methodology, not a software utility (though I'm open to suggestions there...unless they cost money...).

我已经完成了一次破坏样式并几乎从头开始重建的过程，现在看起来时间再次这样做了。我怎么能有效率呢？我正在寻找一种方法，而不是软件实用程序（虽然我愿意接受那些建议......除非他们花钱......）。

Added note: I'm using a CSS framework and it's difficult to keep padding and margin coordinated.

补充说明：我使用的是CSS框架，很难保持填充和边距协调。

Added note 2: The initial responses to this post are about best practices for CSS. Let's assume I already tried to follow best practices (in fact, I did). Now it's the clean-up procedure I'm looking for.

补充说明2：此帖子的初始回复是关于CSS的最佳做法。我们假设我已经尝试过遵循最佳实践（事实上，我做过）。现在这是我正在寻找的清理程序。

Added note 3: As of 14 June, combining this response (which I just found) with my post below is possibly a comprehensive answer.

添加了注释3：截至6月14日，将此响应（我刚发现）与我的帖子结合起来可能是一个全面的答案。

Closure notes:

关闭说明：

I learned my question is too general, and for that reason I wish I hadn't posted it. (Maybe that's why it got a down-vote ... I'll never know without a comment to explain the reason.) On the other hand I got just what I needed, so I'm happy I did post it.

我知道我的问题太笼统了，因此我希望我没有发布它。 （也许这就是为什么它得到了一次投票......我永远不会在没有评论的情况下解释原因。）另一方面，我得到了我需要的东西，所以我很高兴我发布了它。

I'm surprised I didn't get an up-vote for my answer -- even with the priceless input by others, I think it stands up pretty well.

我很惊讶我没有得到我的回答 - 即使有其他人无价的投入，我认为它很好。

My acceptance is going to be based largely on the usability of the answer, from my point of view -- a point of view that is sadly unable to digest some of the more exciting and comprehensive responses.

从我的观点来看，我的接受主要取​​决于答案的可用性 - 这一观点令人遗憾地无法消化一些更激动人心和更全面的答案。

Closed as an Exact Duplicate

作为完全重复关闭

I just tried posting this again (subject, body, tags) to see if SO would suggest the post "How to Manage CSS Explosion". Interestingly, it did not. I added the tag refactoring to that post.

我只是尝试再次发布这个（主题，正文，标签），看看是否会建议帖子“如何管理CSS爆炸”。有趣的是，事实并非如此。我在该帖子中添加了标签重构。

7 个解决方案

#1

Split your css into separate files.

将您的CSS拆分为单独的文件。

1. Put in one file the CSS reset (if you use one)
2. 将CSS重置放入一个文件中（如果使用的话）
3. Then create a global.css file where you will put global styles that apply to many-all pages
4. 然后创建一个global.css文件，您将放置适用于所有页面的全局样式
5. Then create individual files for your individual pages
6. 然后为您的各个页面创建单个文件

Then start styling your pages. Every time you find a style rule that is reusable on many pages make it a CSS class and put it in the global.css file. Avoid using css ID's. You will find that you more often reuse things or will reuse in the future. In this case you use of course CSS classes.

然后开始设置您的页面样式。每当您发现可在多个页面上重用的样式规则时，请将其设置为CSS类并将其放在global.css文件中。避免使用css ID。您会发现您经常会重复使用或将来重复使用。在这种情况下，您使用CSS课程。

Eventually you will find out that in your global.css you will find mostly CSS classes rules and html tag rules.

最后你会发现在你的global.css中你会发现大多数CSS类规则和html标签规则。

In your individual page CSS files you will find specific styles for each page.

在您的个人页面CSS文件中，您将找到每个页面的特定样式。

That should give you a good first level of organization in your CSS. You can try to keep this separation through the whole development process, and for releases merge the CSS files into one and minify it.

这应该会为您提供CSS中良好的第一级组织。您可以尝试在整个开发过程中保持这种分离，并且对于发行版，将CSS文件合并为一个并缩小它。

#2

my 2p worth about css cleanup, from a a previous similar question: Tips for cleaning and maintaining a big css file

我的2p值得关于css清理，来自之前的类似问题：清理和维护大型css文件的提示

hope that this may help you together with others' answers!

希望这可以帮助你和别人的答案！

1. start branching the project (here I suppose that you are using a version control tool) - that will allow you to play independently with the code and tag any milestone you will reach.

   开始分支项目（这里我假设您使用的是版本控制工具） - 这将允许您独立玩代码并标记您将达到的任何里程碑。

2. format your CSS with a beautifier - it will increase readability and will help searching for specific declarations without missing any instances.

   使用美化器格式化您的CSS - 它将提高可读性并有助于搜索特定声明而不会遗漏任何实例。

3. try to identify unused / redundant css and get rid of it.

   尝试识别未使用/冗余的CSS并摆脱它。

4. you could try to make your selectors shorter (e.g. .main .foo .bar might be fine as .bar) - it will improve readability and increase the performance, but take this with a pinch of salt and be ready to go back if things start to break at every step you take.

   你可以尝试让你的选择器更短（例如.main .foo .bar可能没那么好.bar） - 它会提高可读性并提高性能，但是如果事情开始就准备好了在你采取的每一步中打破。

5. try to eliminate, if possible, any !important - make the selector more specific if needed. A css reset could help with that if most of the !important statements were made to fix browser-specific issues, otherwise introducing a css reset now could potentially add more problems than solve them - this, if there is no css reset in your app at all.

   尝试消除，如果可能，任何！重要 - 如果需要，使选择器更具体。如果大多数！重要声明是为了解决特定于浏览器的问题而进行css重置可能会有所帮助，否则现在引入css重置可能会增加问题而不是解决它们 - 如果你的应用中没有css重置所有。

6. break and regroup the css into different modules (and files if that helps) - Object Oriented CSS is a possible technique to keep things more maintainable, it works best if you start with it but it may also help you in refactoring. https://github.com/stubbornella/oocss/wiki is a valid one but there are alternatives that you can consider, like SMACSS.

   将css分解并重新组合成不同的模块（如果有帮助则将文件重新组合） - 面向对象的CSS是一种可以使事物更易于维护的技术，如果你从它开始它最有效，但它也可以帮助你重构。 https://github.com/stubbornella/oocss/wiki是一个有效的，但你可以考虑其他替代方案，如SMACSS。

7. After that , you may consider using a css preprocessor such as Less or Sass, allowing you to define variables and mixins (similar to functions), modularity and much more - this may end up being a very expensive task though, so evaluate carefully if this will bring you more benefits than pain.

   在那之后，您可以考虑使用诸如Less或Sass之类的css预处理器，允许您定义变量和mixins（类似于函数），模块化等等 - 这可能最终会成为一项非常昂贵的任务，因此请仔细评估会给你带来比痛苦更多的好处。

8. test as much and as often as you can, consider unit tests to make sure that any changes you make don't break anything somewhere else.

   尽可能多地进行测试，考虑单元测试以确保您所做的任何更改都不会破坏其他任何地方。

9. Sometimes re-writing everything may end to be less time consuming than refactoring, so don't be afraid to leave things as they are if your assessment will show that refactoring will not bring enough benefits.

   有时候重写一切可能比重构更省时，所以如果你的评估表明重构不会带来足够的好处，所以不要害怕保留原样。

EDIT

编辑

Things change and evolve for good; with regards to OOCSS/SMACSS approach, I have been happily following for a while, Yandex's BEM methodology for CSS, I would like to add it as an additional recommendation to the above

事情发生了变化并且发展顺利;关于OOCSS / SMACSS方法，我很高兴地关注了一段时间，Yandex的CSS的BEM方法，我想将其作为对上述内容的补充建议

#3

The first thing I'll do is separate the CSS based on the purpose. Maybe first the general page layout (DIVs, boxes, ...), then the styling (fonts, H1/H2/.../Hn titles), then some more specialized CSS (CSS for tables, for forms, for specific components of the site).

我要做的第一件事是根据目的分离CSS。也许首先是一般的页面布局（DIV，盒子......），然后是样式（字体，H1 / H2 /.../ Hn标题），然后是一些更专业的CSS（用于表格的CSS，用于表格，用于特定组件的网站）。

Such a separation helps to organize the changes; if you have to change or add a font, you know you'll find it in the styling section. If you have to change the page layout, there goes the same, and so on.

这种分离有助于组织变革;如果你必须更改或添加字体，你知道你会在造型部分找到它。如果您必须更改页面布局，则会出现相同的情况，依此类推。

Things tend to get messy when you have "individual pages"; is their layout so different? You probably have to abstract the common features of the pages (for example, a main content container box) as long as you can. Then think about specializing more the layout (1-column, 2-column) and so on. If you have a programmer background, just think about classes and inheritance, the concept - yes I know it's a totally different domain... - but the concept can be useful in designing your css.

当你有“个人页面”时，事情会变得混乱;他们的布局如此不同？您可能必须尽可能地抽象页面的常用功能（例如，主内容容器框）。然后考虑专门化更多的布局（1列，2列）等。如果你有一个程序员背景，只需考虑类和继承，这个概念 - 是的，我知道它是一个完全不同的领域...... - 但这个概念在设计你的CSS时很有用。

#4

Based on this current round of work, here is what I've got so far:

根据目前的这一轮工作，这是我迄今为止所做的：

the Planning

1. Have a system for handling To-Do notations in your HTML and CSS. Many IDEs support this directly, or a global search function will do just fine. Besides tagging issues, you want to note priority and perhaps even functional area (but keep it simple, not a burden).
2. 有一个系统用于处理HTML和CSS中的待办事项表示法。许多IDE直接支持这一点，或者全局搜索功能也可以。除了标记问题之外，您还需要注意优先级甚至功能区域（但要保持简单，而不是负担）。
3. Don't start revising your code. Use your To-Do system to plan first.
4. 不要开始修改你的代码。使用您的待办事项系统首先进行计划。
5. Make a concise list of your overall goals.
   
   • Consider overall sylistic changes such as color or font scheme.
   • 考虑整体的音节变化，如颜色或字体方案。
   • Review best practices for CSS. Identify areas where your approach is ineffective, or where a good approach can be applied more consistently. Examples:
     • Consolidate classes
     • 合并课程
     • Eliminate haphazard use of in-line styles
     • 消除随意使用内嵌样式
     • Remove styles that are unused or redundant or conflicting
     • 删除未使用或冗余或冲突的样式
     • Improve general consistency; apply a set of conventions
     • 提高总体一致性;应用一组约定
     • Improve units of measure
     • 改进计量单位
     • Use class and id names that reflect content rather than format
     • 使用反映内容而不是格式的类和ID名称
   • 查看CSS的最佳实践。确定您的方法无效的区域，或者可以更一致地应用好方法的区域。示例：合并类消除随意使用内联样式删除未使用或冗余或冲突的样式提高一般一致性;应用一组约定改进度量单位使用反映内容而不是格式的类和ID名称
   • Decide how much of the browser market you want to support and how much to embrace or rely on the newest standards.
   • 决定您希望支持多少浏览器市场以及拥抱或依赖最新标准的程度。
   • Decide if there are any new approaches you want to adopt. Examples:
     • Use of a reset style sheet to standardize browser presentation
     • 使用重置样式表来标准化浏览器演示文稿
     • Use of a CSS framework
     • 使用CSS框架
     • Use of a specialized library, for example to help with forms
     • 使用专门的库，例如帮助表单
     • Dynamic CSS (I recently followed advice to use PHP to handle my CSS, so I could dynamically control my color scheme. But I returned to straight CSS, because I like the presentation of CSS code in my IDE and the hybrid method messed that up.)
     • 动态CSS（我最近遵循建议使用PHP来处理我的CSS，所以我可以动态控制我的配色方案。但我回到了直接的CSS，因为我喜欢我的IDE中的CSS代码的呈现，混合方法搞砸了。 ）
   • 确定是否有任何新方法要采用。示例：使用重置样式表来标准化浏览器表示使用CSS框架使用专用库，例如​​帮助表单动态CSS（我最近遵循建议使用PHP来处理我的CSS，所以我可以动态控制我的颜色方案。但我回到了直接的CSS，因为我喜欢在我的IDE中使用CSS代码的表示，混合方法搞砸了。）
6. 简要列出您的总体目标。考虑整体的音节变化，如颜色或字体方案。查看CSS的最佳实践。确定您的方法无效的区域，或者可以更一致地应用好方法的区域。示例：合并类消除随意使用内联样式删除未使用或冗余或冲突的样式提高一般一致性;应用一组约定改进度量单位使用反映内容而不是格式的类和ID名称决定您希望支持多少浏览器市场以及拥抱或依赖最新标准的程度。确定是否有任何新方法要采用。示例：使用重置样式表来标准化浏览器表示使用CSS框架使用专用库，例如​​帮助表单动态CSS（我最近遵循建议使用PHP来处理我的CSS，所以我可以动态控制我的颜色方案。但我回到了直接的CSS，因为我喜欢在我的IDE中使用CSS代码的表示，混合方法搞砸了。）
7. Review your list of goals and decide which should be pursued now. Any large-scale change should be treated as separate, if possible. If your column layout is a mess, it's not the time to learn how CSS can elegantly replace your javascript. The same goes for best practices, stylistic changes, etc.
8. 检查您的目标列表，并决定现在应该追求哪些目标。如果可能的话，任何大规模的变更都应视为单独的。如果您的列布局很乱，那么现在不是时候了解CSS如何优雅地替换您的javascript。最佳实践，风格变化等也是如此。
9. If you have your CSS files configured for speed (for example, compacted footprint or all CSS in a single file), change that. Break the code into a human-managable format. Later when you're finished, try benchmarking to see if the more legible version is also efficient enough for production use.
10. 如果您的CSS文件配置了速度（例如，压缩的足迹或单个文件中的所有CSS），请更改它。将代码分解为人类可管理的格式。稍后当您完成时，尝试基准测试以查看更易读的版本是否也足够高效以供生产使用。
11. Submit your CSS to a validator. Note any violations you want to fix.
12. 将您的CSS提交给验证者。请注意您要修复的任何违规行为。

13. Find instances of in-line styles in your HTML (search for the style attribute). Note any that should be moved to a style sheet.

    在HTML中查找内嵌样式的实例（搜索样式属性）。请注意应该移动到样式表的任何内容。

    the Work

14. Follow your To Do manager. Make common-sense back-ups. As you go, test your work on several browsers.

    跟随你的待办事项经理。做一些常识性的备份。当你去的时候，在几个浏览器上测试你的工作。

15. If you are into regular expressions, be warned: regex is often not effective or safe for rewriting CSS. (Not as hazardous as for HTML, but still). Regex may be useful sending CSS changes into the HTML, but again be careful.
16. 如果您使用正则表达式，请注意：正则表达式通常无法有效或安全地重写CSS。 （不像HTML那样危险，但仍然如此）。将CSS更改发送到HTML中时，正则表达式可能很有用，但请务必小心。
17. If you have a lot of tweaks to margins and padding, try globally resetting all of them to 0px (okay, use regex here). Then systematically build them back up. You can resolve a lot of confusions this way. Of course, don't include any library or framework style sheets in this process.
18. 如果您对边距和填充进行了大量调整，请尝试将所有这些调整全局重置为0px（好吧，在这里使用正则表达式）。然后系统地建立他们备份。你可以用这种方式解决很多混乱。当然，在此过程中不要包含任何库或框架样式表。
19. Again, submit your CSS to a validator.
20. 再次，将CSS提交给验证器。

#5

I see people has already suggested using approaches like OOCSS etc., so I'm going to offer a different/additional line of thought. I believe that the problem lie deeper than within your CSS and the way you write it. I believe the reason your CSS gets out of hand is this quote from your question:

我看到人们已经建议使用OOCSS等方法，所以我将提供一个不同的/额外的思路。我相信这个问题比你的CSS以及你编写它的方式更深层次。我相信你的CSS失控的原因是你的问题引用：

... as I fine-tune individual pages ...

...当我微调各个页面时......

That makes me think that the problem much lie within your design, rather than you CSS, so let me elaborate a little bit on that. In my opinion a great design is a design that doesn't have to be customized for each individual page - and there are several reasons for that. The main reason is, as you've mentioned yourself, your CSS get out of control. Small tweaks and fixes on individual elements, depending on where they are placed, often leads to a mess that is a pain to maintain and work with. There is also a usability-reason in play here. I believe a UI becomes easier to use if the user is familiar with the UI and recognize herself from page to page, without to much variation. Of course you could have some element that isn't present on each page, or that vary somewhat between pages, but I always strive to keep them at a minimum.

这让我觉得问题很多都在你的设计中，而不是你的CSS，所以让我详细说明一下。在我看来，一个伟大的设计是一个不必为每个页面定制的设计 - 并且有几个原因。主要原因是，正如你自己提到的，你的CSS失控了。对单个元素进行小的调整和修复，取决于它们的位置，通常会导致混乱，这是一个难以维护和使用的问题。这里还有一个可用性原因。我相信如果用户熟悉用户界面并在页面之间识别自己，UI就会变得更容易使用，而不会有太多变化。当然，你可能会有一些在每个页面上不存在的元素，或者页面之间有所不同，但我总是努力将它们保持在最低限度。

My suggestion is therefor that if you intend to rewrite your CSS, which is time-consuming and hard work anyway, then why not go over and re-evaluate your design at the same time. You will probably find that there are elements that you can modify so that they look the same. Make it a goal to get rid of as many UI-elements as possible, without compromising the design. When you've unified the design as much as possible, then it is time to refactor your CSS, and maybe even your markup?

我的建议是，如果你打算重写你的CSS，无论如何都是费时费力的，那么为什么不在同一时间重新评估你的设计。您可能会发现有些元素可以修改，以便它们看起来相同。将目标摆脱尽可能多的UI元素，同时不影响设计。当你尽可能统一设计时，是时候重构你的CSS，甚至你的标记？

At this point, it might be better to get rid of all your CSS and start fresh. If you continue on your old code, it is easy to get lazy and get stuck with some of your old less efficient code.

在这一点上，最好摆脱所有的CSS并重新开始。如果继续使用旧代码，很容易变得懒惰，并且会遇到一些旧的低效代码。

For the coding, I believe the other answers contain lots of good recommendations and best practices. I would personally vote for OOCSS, a new discovery for myself as well, but it has improved the way I structure my CSS a lot. So have a look at that! That will also help you think in terms of reusing elements and the CSS for them, which goes a long way for simplyfing your CSS.

对于编码，我相信其他答案包含许多好的建议和最佳实践。我个人会投票给OOCSS，这也是我自己的新发现，但它改进了我构建CSS的方式。所以看看吧！这也将帮助您思考重用元素和CSS的问题，这对于简化CSS很有帮助。

#6

This answer is in regard to the note; "I'm using a CSS framework and it's difficult to keep padding and margin coordinated." only.

这个答案是关于这个说明的; “我正在使用CSS框架，很难保持填充和边距协调。”只要。

Using a css pre-processor will solve this problem. Because css has no way to assign inheritance and therefore we have to repeat 'margin:10px' over and over.

使用css预处理器可以解决这个问题。因为css无法分配继承，因此我们必须一遍又一遍地重复'margin：10px'。

with a pre-processor you just do

你只需要预处理器

@margin {10px}
@padding {10px}

then

然后

.mySelector{
    margin: @margin;
    padding: @padding;
}

---

For the broader question rethink/simplify your design as your css is directly proportional to the complexity of the design and there is not much you can do about that.

对于更广泛的问题重新考虑/简化您的设计，因为您的CSS与设计的复杂性成正比，并且您无法做到这一点。

See also, http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/

另见http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/

#7

This is more advice about making your css maintainable than the Q of how to manage the process.

这是关于使你的css可维护的更多建议，而不是如何管理过程的Q.

I create a bunch of separate css files each narrowly tailored to a specific attribute (colors, fonts, margins, corners) or feature (nav, form). Then I use a compile phase to combine and minify these files into one or more files to be sent to the client. I do this during my built/test process, but it could be done dynamically by a CGI script.

我创建了一堆单独的css文件，每个文件都根据特定属性（颜色，字体，边距，角落）或特征（导航，表单）进行了狭窄的定制。然后我使用编译阶段将这些文件组合并缩小为一个或多个要发送到客户端的文件。我在构建/测试过程中这样做，但它可以通过CGI脚本动态完成。

Before adopting a pre-compiler, consider the often-overlooked multiple-selector syntax:

在采用预编译器之前，请考虑经常被忽略的多选择器语法：

element,
otherlement
{
  margin:10px;
}

In this example, whenever I want an element to have a 10px margin, I add it to the list. I separate different sets of attributes this way - I may list the same element 5 times in my css - associating it with 5 different sets of attributes.

在这个例子中，每当我想要一个元素有10px的边距时，我就把它添加到列表中。我用这种方式分隔不同的属性集 - 我可以在我的css中列出相同的元素5次 - 将它与5个不同的属性集相关联。

Also don't overlook adding various classes to the body tag to create OO-like inheritance - say you have 3 main sections of your site - assign the body tag a class based on those sections. Likewise, if you have 1000 product pages, you can give the body tag a class like "product485" and then create styles that apply just to that page. For example:

另外，不要忽视向body标签添加各种类以创建类似OO的继承 - 假设您有3个主要部分 - 根据这些部分为body标记分配一个类。同样，如果您有1000个产品页面，则可以为body标签提供类似“product485”的类，然后创建仅适用于该页面的样式。例如：

h1 {
  margin: 10px;
}
.product485 h1,
.product484 h1
{
  margin: 5px;
}
.contact h1 {
  margin: 15px;
}

This might all be in a file called "margins.css" which specifies only margins.

这可能都在名为“margins.css”的文件中，该文件仅指定边距。