编写 CSS 时如何保持条理？
可能的重复：
如何管理 CSS 爆炸
我发现最困难的事情之一就是保持样式表井井有条。我通常从编写一个小的重置部分开始。然后，我编写布局块，并在编写 HTML 块时继续逐步添加样式。
然而，在前两步之后，一切都变得一团糟。根据我经常更改的异想天开的 HTML 编码，样式被添加、删除、遗忘。我找不到一种逻辑方法来分离和分类我的 CSS。
我发现自己为默认样式、导航和布局创建了单独的工作表。
在我写完页脚的 CSS 后，我不知道它是否应该进入默认样式表、导航样式表或布局文件。它的容器当然是布局的一部分，它的导航菜单是部分导航，但它的样式应该进入基本样式表。我发现自己正在考虑相应地分离 CSS，但这是不对的。
我找不到一种逻辑方法来将我的想法组织成有序的分类。
有人能给我任何见解吗？
Possible Duplicate:
How to Manage CSS Explosion
One of the most difficult things I find is keeping my stylesheets organized. I usually start out with writing a small reset section. I then write the layout blocks, and continue progressively adding styles as I write my HTML blocks.
After the first two steps, though, everything turns into a mess. Styles get add, removed, forgotten, based on my whimsical HTML coding, which is changed often. I can't find a logical way to separate and classify my CSS.
I found myself creating separate sheets for the default style, the navigation, and the layout.
After I wrote my footer's CSS, I couldn't figure out if it should go into the default stylesheet, the navigation one, or the layout file. Its container was certainly part of the layout, its navigation menus were part navigation, but it had styles that should go into the basic stylesheet. I found myself thinking about seperating the CSS accordingly but that can't be right.
I can't find a logical way to organized my ideas into orderly classifications.
Can someone offer me any insight?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
虽然它不是对您问题的直接答案，但您是否查看过 less.js 或其几个服务器端克隆？也许更少的样式代码会让它更容易组织。
While its not a direct answer to your question, have you looked at less.js or its several serverside clones? Perhaps having less styling code would make it easier to organize.
让我们从一个想要对网站布局进行一些更改的新程序员的角度来解决这个问题。
我不确定使用框架是否会让事情变得更好、更抽象、更容易学习。
我认为您的组织走在正确的轨道上。
我通常创建一个
default.css文件，其中包含默认字体、颜色、链接样式等的标记。在这个文件中，我将网站视为一大块格式漂亮的文本嵌入图片。这里没有标签样式。通常这意味着内容的大量格式都在其中。但不是新闻页面上的那个特殊按钮，它自己有一个news.css。通常网站可以分为几个部分。页眉、页脚、侧边栏、首页、新闻页、议程等。例如，如果页脚需要为红色，那么很高兴看到文件
footer.css确实包含背景颜色。如果页脚中的链接样式与侧边栏中的链接样式相同，请将样式声明放在两个文件中。如果页脚中的链接样式与主体文本相同，则会将其放置在
default.css中。尝试确保它是您作为新开发人员首先看到的。Let's approach this from the angle of a new programmer who wants to make some changes to the layout of your website.
I'm not sure whether using a framework will make things better, more abstraction, more learning curve.
I think you are on the right track with your organization.
I usually create a
default.cssfile which contains the markup for the default fonts, colors, link styles, etc. In this file, I treat the website if it were one big chunk of pretty formatted text with embedded pictures. No<div>tag styling here. Usually this means that a lot of the formatting for the content is in there. But not that special button on the news page, that one gets anews.csson it's own.Usually websites can be divided into parts. Header, footer, sidebar, frontpage, newspage, agenda, etc. If for instance the footer needs to be red, it's nice to see a file
footer.csswhich indeed contains the background color.If the link style in the footer is the same as in the sidebar, put the style declarations in both files. If the link style in the footer is the same as the main body text, it gets placed in
default.css. Try to make sure it is in the first place you'd look as a new developer.就我个人而言，我有一些用于 xhtml 输出的 php-template-script。所以我的 xhtml 模板位于单独的 .tpl 文件中。这些文件可以相互包含。因此，可能有一个 main.tpl，包括开头的 head.tpl 和结尾的 foot.tpl，并且您必须在特定模板中仅对页面的动态部分进行编码。
这通常是完成的，现在您可以简单地为每个模板分配一个样式表。所以有一个 foot.css 和一个 head.css （你可以根据需要扩展它）。
这帮助我在设计网页时有一个清晰的海岸线。
希望，这有帮助。
Personally I have a little php-template-script for my xhtml output. so my xhtml templates are in sepreate .tpl files. These files can include each others. So there might be a main.tpl including head.tpl at the beginning and foot.tpl at the end and you have to code conly the dynamic part of your page in the specific template.
This is often done and now you can simply assign a stylesheet to each template. So there is a foot.css and a head.css (you can expand this as you wish).
This helpes me to have a clear coast when designing webpages.
Hope, that helps.
您可以使用 Compass 等框架来简化 CSS 的某些部分： http://compass-style.org/
它允许你创建变量、mixin，总的来说，它是解决你可能遇到的大多数 CSS 问题的一个非常棒的解决方案。
还有其他解决方案，例如 LESS 或其客户端等效的 LESS Js (http://lesscss.org/)
You could simplify some parts of your CSS by using a framework such as Compass: http://compass-style.org/
It allows you to create variables, mixins and is overall a pretty awesome solution to most of the CSS problems you could get.
There are other solutions such as LESS or its client-side equivalent LESS Js (http://lesscss.org/)