组织CSS代码的结构化方法 [英] Structured way to organize CSS code

问题描述

当建立一个相对较大的网站时，CSS结构应该从头开始进行适当的范围和组织。如果没有使用CSS框架，那么一切都可以集成到一个庞大的样式表，但这将很快失灵，并可能成为一个巨大的维护责任。

When building a relatively large website, the CSS structure ought to be properly scoped and organized right from the begininning. If no CSS framework is used then everything can be lumped together into a massive stylesheet, but this will very quickly get out of order and can become a huge maintenance liability.

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

For the past few years, I've broken my stylesheets into various files including: base.css, layout.css, fonts.css, elements.css, but very easily the style definitions can jump between files and this approach needs to be more strict. I haven't used a framework since I'm not a fan of preset columns and pre-defined elements in my CSS code.

你可以使用什么方法，模式或提示家伙建议保持组织？什么样的命名约定，可重用性实践和模式是有用的？这是一个框架应该用于？

What approaches, patterns or tips can you guys suggest for keeping things organized? What kinds of naming conventions, reusability practices and patterns are useful? Is this something that a framework should be used for?

推荐答案

我曾经喜欢 LESS ，但现在我是手写笔的忠实粉丝，因为我认为它比LESS / SASS / CSS更清晰的代码 - 没有分号，冒号或括号。

I used to love LESS, but now I'm a big fan of Stylus because I think it makes even cleaner code than LESS/SASS/CSS -- no semicolons, colons, or brackets.

因为Stylus（和LESS和SASS ）允许你定义变量和模板和函数，我有以下文件，它应该是这样的顺序：

Because Stylus (and LESS and SASS) allow you to define variables and templates and functions, I have the following files, which should be in this order:

• reset - Eric Meyer的CSS重置版本


• 变量


• 模板 - border-radius ，转场和clearfix等模板
b $ b
• 每个网页的样式（首页，应用程式，服务条款等）

• reset - A Stylus version of Eric Meyer's CSS reset
• variables - Variables like colors, fonts, etc.
• templates - Templates like border-radius, transitions, and clearfix
• Stylings for each page (homepage, app, terms of service, etc)

这些都是连结和编译使用一个简单的构建脚本到CSS。

These are all concatenated and compiled to CSS using a simple build script.

你可以看到它们是什么样子;我为此内容 gitHub repo 。

You can see what these look like; I made a GitHub repo for this stuff.

这篇关于组织CSS代码的结构化方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！