用于组织CSS代码的结构化方式

Question

在构建一个相对较大的网站时，CSS结构应该从开始就适当地确定范围和组织。如果没有使用CSS框架，那么所有内容都可以集成到一个大型样式表中，但这很快就会出现故障并且可能成为巨大的维护责任。

在过去的几年里，我把我的样式表分成了各种文件，包括：base.css，layout.css，fonts.css，elements.css，但是样式定义很容易在文件之间跳转，这种方法需要更严格。我没有使用过框架，因为我不喜欢CSS代码中的预设列和预定义元素。

你们可以提出哪些方法，模式或提示来保持组织有序？什么类型的命名约定，可重用性实践和模式是有用的？这是框架应该用于什么的东西吗？

Answer 1

我曾经爱过LESS，但现在我是Stylus的粉丝，因为我认为它比LESS / SASS / CSS更清晰 - 没有分号，冒号或括号

因为Stylus（以及LESS和SASS）允许您定义变量和模板及函数，所以我有以下文件，它们应按此顺序排列：

• reset - 手写笔版Eric Meyer's CSS reset
• 变量 - 颜色，字体等变量
• templates - border-radius，过渡和clearfix等模板
• 每个页面的样式（主页，应用程序，服务条款等）

这些都是使用简单的构建脚本连接并编译到CSS。

你可以看到它们的样子;我为这些东西做了a GitHub repo。

Answer 2

为了编写一致且易于管理的样式表，CSS LESS Framework非常有用 LESS提供了以下机制：变量，嵌套，混合，操作和动态编写CSS代码的函数，可以在客户端（Internet Explorer 6 +，WebKit，Firefox）和服务器端运行Node.js或Rhino。

http://lesscss.org/

Answer 3

关于手写笔 - 缺少分号，冒号和括号会使您的代码不易读取IMO，而不是更多。