Question

我一直在努力寻找组织CSS代码的最佳方法，特别是在大型网站上。我对编写风格以及人们如何构建和管理代码的兴趣不大。

我一直在关注这种结构，我觉得它的可维护性很好，但我想对此有所了解并听取其他方法：

/*=======================================
 1. =reset
=======================================*/
/**
 Anything but * reset
**/

/*=======================================
 2. =base
=======================================*/
/**
 Base rules so naked HTML has basic style and displays consistently x-browser
**/

/*=======================================
 3. =base forms
=======================================*/
/**
 Base form framework
**/

/*=======================================
 4. =base site
=======================================*/
/**
 Rules common across the majority of pages
 e.g. header, footer, main columns, navigation, search bar etc.
**/

/*=======================================
 5. =recurring styles
=======================================*/
/**
 Re-useable snippets -- not to include positioning / structure etc.
 e.g. buttons, icons etc.
**/

/*=======================================
 6. =recurring modules
=======================================*/
/**
 Re-usable modules common to multiple pages/views but not majority
 e.g. a product carousel could be on the homepage as well as the product page and maybe even the checkout page etc.
**/

/*=======================================
 7. =homepage
=======================================*/
/**
 contains rules only applicable to homepage
**/

/*=======================================
 8. =about page
=======================================*/
/**
 contains rules only applicable to about page
**/

/*=======================================
 9. =contact page
=======================================*/
/**
 contains rules only applicable to contact page
**/

...and so on

任何想法都会非常感激。

富

Answer 1

您指定的分区看起来很好 - 我建议将每个部分保存在自己的文件reset.css base.css forms.css中 - 您可以在使用http://developer.yahoo.com/yui/compressor/进行部署时轻松组合这些文件。在开发时帮助保持css更小。

Answer 2

我使用SASS并使用文件组织所有这些（一个文件然后可以包含在另一个文件中）。这是有道理的，因为我总是知道在哪里寻找特定的东西，人们不会混淆浏览一个长的单个CSS文件。因此，它规定其他人不要留下“破窗户”。

Answer 3

我遇到了同样的问题。我没有找到明确的答案就在网上搜索。

我最终布局了类似于你的css布局的常见CSS文件。然后我将页面特定页面css放入他们自己的文件中。为什么使用页面特定的css来混淆common.css。许多人的文章/帖子担心，由于打开浏览器连接，太多文件会使网站变慢。虽然我认识到这可能是一个问题，但我会在它成为一个时解决它。正如在其他一个答案中所指出的，我总是可以在部署时合并和压缩css。

Answer 4

我目前的项目是一个大型SAAS应用程序，有大量的css需要处理。我更喜欢将我的文件保存在一个文件中，不仅仅是为了加载速度，还要尽可能减少在编辑时我必须跳转的次数......而且，不需要处理YUI的怪癖。我以前的雇主对YUI进行了标准化，我们广泛使用它......它很有用，但它可以匆忙地变得笨重。

结构方面，我将代码中断了一点。我从主要声明开始，例如* / body / html / H1 / P等。然后，我为头部特定内容做一个部分。使用一般正文部分，每个页面的子部分可能具有特定内容。我关闭了一个特定于页脚的部分。我发现如果我在构建页面时逻辑地构建它，至少我知道在哪里看 - 顶部的页眉，底部的页脚，等等。我可以从代码到本地测试进行部署两次击键。

谨防CSS的缩小。当然，它有效。但就我上一份合同而言，我们正在研究在某些情况下几乎每天都发生变化的网站，并且业务分析显示我们将更多的公司资源用于缩小和缩小，而不仅仅是建立简单，干净的CSS使我们受益。只要它是缓存而你没有加载多个CSS文件，你就会很好。在那个工作的情况下，一个特定的页面每天获得100万独立，并且业务组很好，保持未压缩，尽管从缩小5k的改进可能每天节省5gb。我想，带宽比UI工程师便宜......

CSS组织/结构

5 个答案: