原文来自：Organizing Your Stylesheet Using CSS Edit
翻译整理：西米CC
如果最初编写CSS时不注意结构与组织，后期维护和管理的时候将会是件很头大的事情。当你打开一个混乱的CSS文件时，你可能会感慨一句“搞什么鬼名堂啊？！”曾几何时我打开自己很久之前编写的样式表文件时，也不禁会潸然泪下，皆因为我盲目的复制粘贴然后依然盲目的编辑修改…
一直以来我都试图通过不同的方式来组织CSS以求简洁有序，但是没有一种方法是能让我心悦诚服的，直到接触了CSS EDIT。它是一款强大高效率的CSS编辑工具，而其中我认为最吸引人的功能，就是以文件夹的模式来组织CSS结构。
2300行CSS代码被组织在六个“文件夹”中。
可能你会注意到其中=和-两个符号，它们的意义事实上就相当于Windows树型目录中的+和-，=表示包含子文件夹，-则表示其自身是子文件夹。但是CSS EDIT中的文件夹其实也只是一些代码，非常容易理解：
/* @group footer */
...
/* @end */
上面的代码就是在CSS EDIT中创建了一个名为footer的“文通过不同的方式来组织CSS以求简洁有序，但是没有一种方法是能让我心悦诚服的，直到接触了CSS EDIT。它是一款强大高效率的CSS编辑工具，而其中我认为最吸引人的功能，就是以文件夹的模式来组织CSS结构。件夹”，子文件夹的创建方法如下，注意其中的=和-符号：
/* @group =pages */
...
/* @group -archive */
...
/* @end */
/* @end */
CSS结构的改进是很有必要的，尤其是当你与别人协同合作的时候，不要因为你混乱的代码影响了整体的进度。一般当我们着手开始一个项目的时候，都会以一些比较常见的代码作为开端，如全局样式设定，然后以此为基准点扩充自己的样式表，如果我们从全局样式就开始有目的的组织自己的CSS代码，那将是对今后阅读或修改这些样式最好的参考。一般的全局样式“文件夹”结构都类似于如下：
1.Reset（重置或初始化）：这里的样式设定主要是为了统一不同的浏览器或HTML元素的某些属性值，如margins、padding、border等；
2.Utility（翻译不来）：这里的样式主要是关于margin、padding或浮动的清除；
3.=base（基本布局）：
-headers: 页头样式
-links: 全局链接样式
-navigation: 导航样式
-footer: 页脚样式
-form elements: 表单元素样式
4.=pages：这个文件夹包含了风格各异的子页样式设定；
CSS EDIT这种以文件夹结构来组织样式表的形式非常新颖易懂，也相当有利于我们的CSS维护和管理。作为设计者，应该把精力集中在自己的本份上，而花大量是时间去辨识混乱的样式表，很明显是件不务正业的事情。
其实最重要的不是你使用什么工具或软件，而是你有没有样式组织的理念，或习惯…最后抖个很雷人的包袱：CSS EDIT的运行环境是Mac！