张大侠

Sass: 维护样式代码的目录结构

张大侠 · 2016-12-06翻译 · 735阅读 原文链接

随着项目规模的不断变大,模块化的目录和文件结构的需求与日俱增。尤其是当你想将你的代码适用于其他的项目、或者横跨一个或多个项目中的组件和模式、或者是分享给他人的模板中时,这显得尤为重要。

Hexanol Structure 2-乙醇分子结构

上周我谈论到@import命令以及如何使用它来编写可维护性的文件和目录结构。并向你们展示了一个我了解到的一个简单结构,以及承诺大家会展示一些其他的结构。

我将会分享一些并且会比较他们之间的共同点来帮助大家选择或者开发一个能为自己所用的结构。

简答结构

希望大家不要介意我以上周的简单例子开头,重新回顾一下这个例子:

  • modules/

  • _color.scss

  • _typography.scss

  • partials/

  • _base.scss

  • _navigation.scss

  • vendor/

  • _ico-moon.scss

  • main.scss

vendor目录存放第三方代码,partials目录存放那些你要包含并且编译的代码,modules目录存放那些你要包含但不想编译的代码。

注意到这个结构能够让你区分自己的代码和第三方的代码,以及能够区分你想编译和不想编译的代码。这就是这个结构的作用。

(这个结构中的)文件和目录的名字可以随意修改。这个结构的关键是允许你能够将自己的代码和第三方代码分离,需要编译成CSS的代码和不需要编译的代码分离。

##7-1模式 另一个结构是Hugo Giraudel的7-1模式。在这里,你可能会动手建立一些文件夹并在每个文件夹下创建一些例子。

  • base/

  • _reset.scss

  • _typography.scss

  • _color.scss

  • components/

  • _buttons.scss

  • _navigation.scss

  • _gallery.scss

  • layout/

  • _header.scss

  • _grid.scss

  • _sidebar.scss

  • pages/

  • _home.scss

  • _about.scss

  • _contact.scss

  • themes/

  • _theme.scss

  • _admin.scss

  • helpers/ (or utils/)

  • _variables.scss

  • _functions.scss

  • _mixins.scss

  • vendors/

  • _bootstrap.scss

  • _jquery-ui.scss

  • main.scss

base目录存放引用内容。它存放着网站每个网页都应该接受的样式。

components目录存放所有小的布局文件。样式所需要的按钮、导航和类似的文章组件。

大的布局文件则应该放在layouts目录下。主要部分的布局样式,比如说头部、尾部或者表格系统样式则应该属于这个目录。

如果网站中有些独立的页面有特殊样式,你可以将他们放在pages目录中。举个常见的例子,网站主页会引用而其他页面不接受的特定样式。

themes目录存放项目特定主题的样式文件。比如,网站一部分会使用三原色的配色,而另一部分则使用的是基于非色彩的土色调。

helper或者utils目录存放Sass工具,帮助文件,变量以及配置文件。这些文件将不会被编译。

最后vendors目录存放第三方代码,main.css文件使用@import语句包含其他的文件。

下面是此模式的补充资源:

SMACSS/BEM 体系

许多人写了一些关于基于SMACSS或者BEM体系创建目录结构的文章。我想要介绍四种不同的(虽然相似)的结构,他们基于彼此创建并且吸收了7-1模式的理念。

Ryan Burgess借鉴SMACSS的一些理念,为Evernote创建了简单的结构。使用四个目录:Base、Layout、Modules和Themes。

  • Base目录存放供应商代码,赞助者,混合,变量以及通用选择器样式(body, h1, p, a等)。
  • layout目录存放一些比较大的布局文件。
  • Modules目录存放一些比较小的布局文件。
  • Themes目录存放任何特定类型的页面样式文件。

注意到(这种结构)区分了大的布局文件和小的布局文件,也区分了特定样式文件和通用样式文件。

Tim HartmannBram Smulders 分享了类似的四目录结构。

  • Base目录存放供应商代码,赞助者,混合,变量以及通用选择器样式(body, h1, p, a等)。
  • layout目录存放一些比较大的布局文件。
  • Modules目录存放一些比较小的布局文件。
  • State目录存放特定样式代码,类似按钮hover时的样式等。

同样这种结构区分开了大的布局文件和小的布局文件,也区分了非编译代码和通用样式。不同点在于这里使用State目录存放状态样式而不是使用Themes目录存放特定页面样式。

Matt Staffer 分享了他的公司使用的结构,并保持了SMACSS结构。

  • _base.scss 文件存放供应商代码和基本元素的样式(html, body, ul, p等)
  • _layout.scss文件存放大的布局样式
  • _modules.scss文件存放小的布局样式
  • _other.scss文件存放上面三个文件中不适合放的样式
  • _shame.scss文件存放一些待改进的代码

这种结构和前两种结构类似,尽管注意到这种结构内都是文件而不是目录。_other.scss文件存放各种各样的代码,_shame.scss文件催促改进里面的代码。

最后一个基于SMACSS的结构来自于Johannes Dreller。它增加了另外一个没有见过的目录,以下便是Johannes的结构(每个目录下可能带有一些文件):

  • vendor/

  • _bootstrap.scss

  • _jquery-ui.scss

  • base/

  • _functions.scss

  • _mixins.scss

  • _variables.scss

  • _base.scss

  • layout/

  • _grid.scss

  • _header.scss

  • _sidebar.scss

  • module/

  • _navigations.scss

  • _buttons.scss

  • _forms.scss

  • state/

  • _state.scss

  • hacks/

  • _shame.scss

  • main.scss

增加的是vendor目录,它用于存放第三方代码。layoutmodule目录依然用于区分大的布局样式和小的布局样式。state存放在目录下,非编译代码和一些通用样式存放在base目录,hack目录存放上面的shame文件,此外main.scss使用@import命令引用必要的文件。

其他

Matthieu Larcher & Fabien Zibi提出了DOCSSa的四级目录组织结构

  • base/

  • __base.scss

  • _config.scss

  • project/

  • utils/

  • components/

  • _components.scss

  • button/

  • tabs/

  • specifics/

  • _specifics.scss

  • modal.scss

  • navigation.scss

  • vendor/

  • _vendor.scss

这个结构和我上面提到的结构类似。base目录存放project目录下的引用样式以及utils目录下的Sass工具,直接存放在base目录下的文件都是子目录所必需的。

components目录存放小的布局文件,specifics目录存放各种其他的样式文件。同样,直接存放在目录下的文件都是子目录所必须的。最后,vendor目录存放第三方代码。

最后一种结构来自于Matthew Anderson,并且它增加了一些新的组织目录结构的理念。

  • framework/

  • modules/

  • vendor/

  • sections/

  • _bootstrap.scss

  • _section.scss

首先相似的是,vendor目录存放第三方代码,modules目录存放部分可复用的UI模式和组件,framework目录存放所有项目范围内以及项目无关的代码。

sections目录与shamehacks目录类似。存放的都不是必须的代码,但是你将会去优化或重构或者改进。

另外两个新文件,一个是_bootstrap.css,它并不是Twitter的Bootstrap库,它用于引导用@import语句引用的必要文件。

_section.scss文件代表任何会编译成CSS样式的文件,这些文件将会引入_bootstrap.scss文件以及任何项目中必须的文件。

结语

我希望看到一些成功的案例,这些组织Sass文件和目录的结构能够帮助你理解人们模块化代码的方式,并使代码组织有序、可维护。

另外,我希望你从这些结构中吸收的是他们的理念而不是单一组织文件和目录的方式,尽管他们有一些相同的理念。

  • 大、小布局样式文件
  • 引用(全站)样式文件
  • 工具和公共文件
  • 特定页面和网站主题的样式文件
  • 第三方代码
  • 待改进的样式文件

也有一些相同的样式文件但其他人认为值得分离的,你可能需要决定你是否需要将大、小布局文件分离而偏向于将他们合在一起。你可能在项目中不会用到第三方代码。将这些结构当成建议或者参考而不是你不得不使用的结构。

无论你认为你组织文件和目录的方式有多好,都要记住你应该以某种有意义的方式组织他们,以帮助你能够找到并且以对你有用的方式将代码和样式分离。

下周我要谈论的是另一个Sass命令@extend。它允许一个选择器继承其他选择器的样式,由此你能够写出DRYer代码.。

可以从我的书——《设计基础》——中下载简单样例。

相关文章