閱讀(39.2k) 書(shū)簽贊(0) 我要糾錯(cuò)

7-1模式

2018-02-24 15:11 更新

回到結(jié)構(gòu)這個(gè)話題上來(lái)，好嗎？通常我使用自稱為?7-1 模式的結(jié)構(gòu)：7 個(gè)文件夾，1 個(gè)文件?；旧希阈枰獙⑺械牟考胚M(jìn) 7 個(gè)不同的文件夾和一個(gè)位于根目錄的文件（通常命名為?main.scss）中——這個(gè)文件編譯時(shí)會(huì)引用所有文件夾而形成一個(gè) CSS 樣式表。

base/
components/
layout/
pages/
themes/
utils/
vendors/

當(dāng)然還有它:

main.scss

壁紙來(lái)源自?Julien He

理想情況下，目錄層次如下所示：

sass/
|
|– base/
|   |– _reset.scss       # Reset/normalize
|   |– _typography.scss  # Typography rules
|   ...                  # Etc…
|
|– components/
|   |– _buttons.scss     # Buttons
|   |– _carousel.scss    # Carousel
|   |– _cover.scss       # Cover
|   |– _dropdown.scss    # Dropdown
|   ...                  # Etc…
|
|– layout/
|   |– _navigation.scss  # Navigation
|   |– _grid.scss        # Grid system
|   |– _header.scss      # Header
|   |– _footer.scss      # Footer
|   |– _sidebar.scss     # Sidebar
|   |– _forms.scss       # Forms
|   ...                  # Etc…
|
|– pages/
|   |– _home.scss        # Home specific styles
|   |– _contact.scss     # Contact specific styles
|   ...                  # Etc…
|
|– themes/
|   |– _theme.scss       # Default theme
|   |– _admin.scss       # Admin theme
|   ...                  # Etc…
|
|– utils/
|   |– _variables.scss   # Sass Variables
|   |– _functions.scss   # Sass Functions
|   |– _mixins.scss      # Sass Mixins
|   |– _helpers.scss     # Class & placeholders helpers
|
|– vendors/
|   |– _bootstrap.scss   # Bootstrap
|   |– _jquery-ui.scss   # jQuery UI
|   ...                  # Etc…
|
|
`– main.scss             # Main Sass file

文件命名要遵循如上統(tǒng)一的命名規(guī)則：使用連字符界定。

BASE文件夾

base/文件夾存放項(xiàng)目中的模板文件。在這里，可以找到重置文件、排版規(guī)范文件或者一個(gè)樣式表（我通常命名為_base.scss）——定義一些 HTML 元素公認(rèn)的標(biāo)準(zhǔn)樣式。

_base.scss
_reset.scss
_typography.scss

LAYOUT文件夾

layout/?文件夾存放構(gòu)建網(wǎng)站或者應(yīng)用程序使用到的布局部分。該文件夾存放網(wǎng)站主體（頭部、尾部、導(dǎo)航欄、側(cè)邊欄…）的樣式表、柵格系統(tǒng)甚至是所有表單的 CSS 樣式。

_grid.scss
_header.scss
_footer.scss
_sidebar.scss
_forms.scss
_navigation.scss

layout/?文件夾也會(huì)被稱為?partials/, 具體使用情況取決于個(gè)人喜好。

COMPONENTS文件夾

對(duì)于小型組件來(lái)說(shuō)，有一個(gè)?components/?文件夾來(lái)存放。相對(duì)于?layout/?的宏觀（定義全局線框結(jié)構(gòu)），components/?更專(zhuān)注于局部組件。該文件夾包含各類(lèi)具體模塊，基本上是所有的獨(dú)立模塊，比如一個(gè)滑塊、一個(gè)加載塊、一個(gè)部件……由于整個(gè)網(wǎng)站或應(yīng)用程序主要由微型模塊構(gòu)成，components/?中往往有大量文件。

_media.scss
_carousel.scss
_thumbnails.scss

components/?文件夾也會(huì)被稱為?modules/, 具體使用情況取決于個(gè)人喜好。

PAGES文件夾

如果頁(yè)面有特定的樣式，最好將該樣式文件放進(jìn)?pages/?文件夾并用頁(yè)面名字。例如，主頁(yè)通常具有獨(dú)特的樣式，因此可以在?pages/?下包含一個(gè)?_home.scss?以實(shí)現(xiàn)需求。

_home.scss
_contact.scss

取決于各自的開(kāi)發(fā)流程，這些文件可以使用你自己的前綴命名，避免在最終樣式表中與他人的樣式表發(fā)生合并。一切完全取決于你。

THEMES文件夾

在大型網(wǎng)站和應(yīng)用程序中，往往有多種主題。雖有多種方式管理這些主題，但是我個(gè)人更喜歡把它們存放在?themes/?文件夾中。

_theme.scss
_admin.scss

這個(gè)文件夾與項(xiàng)目的具體實(shí)現(xiàn)有密切關(guān)系，并且在許多項(xiàng)目中是并不存在的。

UTILS文件夾

utils/?文件夾包含了整個(gè)項(xiàng)目中使用到的 Sass 輔助工具，這里存放著每一個(gè)全局變量、函數(shù)、混合宏和占位符。

該文件夾的經(jīng)驗(yàn)法則是，編譯后這里不應(yīng)該輸出任何 CSS，單純的只是一些 Sass 輔助工具。

_variables.scss
_mixins.scss
_functions.scss
_placeholders.scss?(frequently named?_helpers.scss)

utils/?文件夾也會(huì)被稱為?helpers/,sass-helpers/?或者?sass-utils/，具體使用情況取決于個(gè)人喜好。

VENDORS文件夾

最后但并非最終的是，大多數(shù)的項(xiàng)目都有一個(gè)?vendors/?文件夾，用來(lái)存放所有外部庫(kù)和框架（Normalize, Bootstrap, jQueryUI, FancyCarouselSliderjQueryPowered……）的 CSS 文件。將這些文件放在同一個(gè)文件中是一個(gè)很好的說(shuō)明方式:”嘿，這些不是我的代碼，無(wú)關(guān)我的責(zé)任?！?/p>

_normalize.scss
_bootstrap.scss
_jquery-ui.scss
_select2.scss

如果你重寫(xiě)了任何庫(kù)或框架的部分，建議設(shè)置第 8 個(gè)文件夾?vendors-extensions/?來(lái)存放，并使用相同的名字命名。

例如，vendors-extensions/_boostrap.scss?文件存放所有重寫(xiě) Bootstrap 默認(rèn) CSS 之后的 CSS 規(guī)則。這是為了避免在原庫(kù)或者框架文件中進(jìn)行二次編輯——顯然不是好方法。

入口文件

主文件（通常寫(xiě)作?main.scss）應(yīng)該是整個(gè)代碼庫(kù)中唯一開(kāi)頭不用下劃線命名的 Sass 文件。除?@import?和注釋外，該文件不應(yīng)該包含任何其他代碼。

文件應(yīng)該按照存在的位置順序依次被引用進(jìn)來(lái)：

vendors/
utils/
base/
layout/
components/
pages/
themes/

為了保持可讀性，主文件應(yīng)遵守如下準(zhǔn)則：

每個(gè)?@import引用一個(gè)文件；
每個(gè)?@import單獨(dú)一行；
從相同文件夾中引入的文件之間不用空行；
從不同文件夾中引入的文件之間用空行分隔；
忽略文件擴(kuò)展名和下劃線前綴。

@import 'vendors/bootstrap';
@import 'vendors/jquery-ui';

@import 'utils/variables';
@import 'utils/functions';
@import 'utils/mixins';
@import 'utils/placeholders';

@import 'base/reset';
@import 'base/typography';

@import 'layout/navigation';
@import 'layout/grid';
@import 'layout/header';
@import 'layout/footer';
@import 'layout/sidebar';
@import 'layout/forms';

@import 'components/buttons';
@import 'components/carousel';
@import 'components/cover';
@import 'components/dropdown';

@import 'pages/home';
@import 'pages/contact';

@import 'themes/theme';
@import 'themes/admin';

這里還有另一種引入的有效方式。令人高興的是，它使文件更具有可讀性；令人沮喪的是，更新時(shí)會(huì)有些麻煩。不管怎么說(shuō)，由你決定哪一個(gè)最好，這沒(méi)有任何問(wèn)題。對(duì)于這種方式，主要文件應(yīng)遵守如下準(zhǔn)則：

每個(gè)文件夾只使用一個(gè)@import
每個(gè)@import之后都斷行
每個(gè)文件占一行
新的文件跟在最后的文件夾后面
文件擴(kuò)展名都可以省略

@import
  'vendors/bootstrap',
  'vendors/jquery-ui';

@import
  'utils/variables',
  'utils/functions',
  'utils/mixins',
  'utils/placeholders';

@import
  'base/reset',
  'base/typography';

@import
  'layout/navigation',
  'layout/grid',
  'layout/header',
  'layout/footer',
  'layout/sidebar',
  'layout/forms';

@import
  'components/buttons',
  'components/carousel',
  'components/cover',
  'components/dropdown';

@import
  'pages/home',
  'pages/contact';

@import
  'themes/theme',
  'themes/admin';

為了不用親自引入每一個(gè)文件，有一個(gè)叫做?sass-globbing?的 Ruby Sass 擴(kuò)展程序，使在 Sass 的?@import?中,使其做為 glob 模式，就像這樣：@import "components/*"

話雖如此，卻不推薦它，因?yàn)樗凑兆帜疙樞蛞胛募?，這往往并不是想要的，特別是處理一個(gè)對(duì)源文件順序有所依賴的編程語(yǔ)言的時(shí)候。

以上內(nèi)容是否對(duì)您有幫助：

← 組件

Shame文件 →

寫(xiě)筆記

我要補(bǔ)充