在之前兩篇文章中我們已經討論過如何使用BEM和Namespace來編寫模塊化的CSS。這篇文章中，我想避開把CSS選擇器作為CSS文件結構和組織的依據的方法。

如果你思考過關于什么是文件組織的最佳實踐，或者怎樣能夠在項目目錄中更容易的找到你要找的CSS文件，或者一個文件應該是多大或者多小合理等問題，那么這篇文章就是為你寫的。

讓我們先看下你一般組織資源的兩種方法。

你可以使用兩種方式來組織你的資源。

本文中我所說的資源，是指CSS文件和JS文件。我們不能忽視他們兩種之間的任何一種，特別是在今天這樣的互聯網環境下。

有兩種主流的存儲CSS文件和JS文件的方式。

第一種 是根據CSS和JS不同的文件類型存儲在不同的文件夾里。這是一種大多數開發者所習慣的傳統方式。如下所示：

- project/

|- js/

|- sass/

第二種 是根據他們分屬的不同的組件來存儲CSS和JS文件。使用這種方法，文件結構就像如下所示的結構：

-project/

|- component-a/

|- index.scss

|- index.js

|- component-b/

|- index.scss

|- index.js

這種方式經常會被用React這類框架開發Webapp的開發者使用，因為這類開發者通常把HTML直接寫在JavaScript文件里。使用Webpack你可以很簡單的使用require來引用你所需要的樣式，如下所示：

import css from './index.scss';

你應該使用哪一種方式呢？

老實說，這兩種方式之間沒有太大的差別。最好的方式就是那個能使你清楚了解你組件結構的方式。

基于這一點，我更傾向于使用傳統的把CSS和JS文件存儲在不同文件夾的方式，因為：

我習慣了使用這種結構。

用我的方法，我可以很容易的找到我使用的組件。

無論我寫的是網站項目還是webapp項目，這種方式能很容易的使項目目錄保持高度一致。

我習慣把CSS文件和JS文件盡可能的分開。

就像上文說的，我有我偏好的方式。你也可以有你偏好的方式。這完全是可以的，因此，選擇一種你喜歡的方式并堅持用下去。

我如何組織我的項目

我會盡可能的把我開發的代碼放在src/ (源文件)文件夾里。src/文件夾里的文件經過編譯、替換后會被放在用于生產環境使用的dist/文件夾里。因此，我的項目初始化目錄結構 如下所示：

- project/

|- dist/ # 用于生產環境

|- src/ # 所有的開發源代碼

|- js/

|- scss/

# 模板和其他必須的文件(templates and other stuff as required)

從這一點開始，我會著重講scss/文件夾，因為js/文件夾跟CSS是同樣的道理(可能東西比CSS更少)。

scss/文件夾包含7個子文件夾，可能還會有一個公共部分scss文件和一個主要的入口scss文件，如下所示：

- scss/

|- lib/

|- helpers/

|- variables/

|- base/

|- layouts/

|- objects/

|- components/

|- styles.scss

|- _utilities.scss

首先，我們來看下在styles.scss文件里都有什么內容。這是MP(理解為我們讀者的項目)項目參考的重點，具體內容如下所示：

// Libraries and helpers

// ---------

@import 'lib/lib';

@import 'helpers/helpers';

// Variables

// ---------

@import 'variables/colors';

@import 'variables/typography';

@import 'variables/breakpoints';

@import 'variables/themes'; // only when necessary

// Reset and base files

// --------------------

@import 'base/base';

// Layouts

// -------

@import 'layouts/layouts';

// Objects

// -------

@import 'objects/buttons';

@import 'objects/input';

@import 'objects/typography';

// Other objects as necessary

// Components

// ----------

@import 'components/component-name-1';

@import 'components/component-name-2';

@import 'components/component-name-3';

@import 'components/component-name-4';

// Other components as necessary

// Utilities

// ----------

@import 'utilities';

// Shame

// -----

@import 'shame';

一目了然，在styles.scss文件里你可以知道，在項目中你使用了“4種變量”、“3個對象”和“4個組件”。

這種列出變量、對象和組件的聲明方法，是scss組織結構的核心和靈魂。這種方式可以讓我立即知道我的項目中用了什么。

當我想要找一個組件的時候，我總是可以打開styles.scss文件，然后在Sublime Text’s的搜索框中輸入“組件C的名字”去搜索組件。

用Sublime Text搜索文件

這種方式百試不爽，因為我不需要太多的搜索就能正確的找到我要找的文件。

現在，我們來看一下每一個子文件夾中都包含什么內容。

lib/ 文件夾

lib/文件夾只包含一個文件 — _lib.scss。 _lib.scss 中聲明了所有我在項目中使用的庫文件。想知道我用了什么庫文件的話，下面列的就是嘍。如下所示：

Normalize.css

Mappy-breakpoints (媒體查詢 臨界點 使用的庫)

Typi (排版相關的一個庫)

Themify (如果我項目中使用了一個主題的話)

helpers/ 文件夾

helpers/文件夾中放置的是項目中使用的封裝的方便使用的mixins 和 functions。很多這種mixins的例子，如： 清除浮動的hack, 元素的顯隱和CSS開發的形狀(如三角形)等等。

variables/ 文件夾

variables/ 文件夾是存儲我在項目中使用的變量的地方。從styles.scss文件中你可以知道，我使用了如下的四種變量：

breakpoints

colors

typography

themes

我喜歡把這些變量存儲在Sass的枚舉map中，因為我可以用自己寫的functions從Sass map中很方便的取到他們。例如，_breakpoints.scss文件中的內容，如下所示：

$breakpoints: (

small: 400px,

med: 640px,

large: 900px,

wide: 1100px,

mega: 1800px,

ultra: 2800px,

);

從$breakpointsmap中提取臨界點的值，我用的是我創建的方法庫(Mappy breakpoints):

.component {

@include mappy-breakpoint(small) {/* styles here */}

}

我不會使用其他的文件，因為其他的文件和_breakpoints文件是基本一樣的文件。

我們繼續看其他的文件夾.

base/ 文件夾

base/ 文件夾是存放我開發的除了Normalize.css之外的所有resets。例如：我會強制的重置 margins、paddings和輸入框、按鈕等元素的樣式，如下所示的那樣：

// Resets margins and paddings for headers, ul, ol and p

h1,h2,h3,h4,h5,h6,ul,li,p,blockquote {

margin: 0;

padding: 0;

}

// Completely resets form items

// ----------------------------

// Super hard reset that removes all borders

// and radius of all form items.

// ============================

input,

textarea,

button {

border: 0;

border-radius: 0;

outline: none;

appearance: none;

&:hover,

&:active,

&:focus {

outline: none;

}

}

除了重置樣式之外，我也會在這個文件里存放我開發的用于整個項目的樣式(通常我們所說的全局樣式)。例如：

// Use border-box for everything

html {

box-sizing: border-box;

}

*,

*:before,

*:after {

box-sizing: inherit;

}

// Set Image and Objects to have a max-width of 100%

embed,

iframe,

img,

object,

video {

max-width: 100%;

}

你把什么內容存在這里，最紅還是取決于你自己。如果你不想像我一樣強制的重置一些樣式的話，你可以忽略整個base/文件夾不用管它。

layouts/ 文件夾

layouts/文件夾是用來存放我編寫的在整個項目中全局使用的布局樣式。 如果你不懂我說的內容的話，你可以看看之前我寫的一篇對于這塊內容解釋的文章，點此查看文章。

objects/ 和 components/ 文件夾

objects/ 和 components/ 文件夾的名字很好的解釋了自己的用途。這兩個文件夾是分別用來存放我編寫的對象和組件的地方。 每一個對象/組件都有自己的文件。所以，從styles.scss中可以看出，我有三個對象文件：input, button 和 typography。

注: 我關于對象和組件的定義和其他人不同，如果你還沒有閱讀了我之前的文章，請閱讀了我之前的文章。

就對象和組件而言，我總是從對象開始編寫。每當一個對象增長到包含另一個對象或者一個組件的時候，我都會借助Sublime Text的查找替換工具把所有的.o-object重命名為.c-object。

Sublime Text的查找替換工具

utilities.scss 文件

_utilities.scss文件是用來存放我編寫的 公用命名空間類 ，例如： .u-text-center。

我們繼續。

最小/大文件的大小應該是多少？

根據代碼行數來決定一個文件的大小不是最好方法。一些人對于只有兩行的代碼文件感到反感，認為文件太小沒有必要單獨為一個文件。另外有一些人討厭在一個有著300行代碼的文件中去糾正修復其中存在的bug。

我覺得文件的大小不是我們應該關心的，我通常鼓勵大家在一個文件中寫盡可能多的代碼，因為那是有意義的。例如，在components/_component-a.scss文件中編寫你需要的.c-component-a的所有的樣式。相比文件大小，模塊化和清晰度是更值得我們去關注的點。

我們來總結一下！

總結

文件結構和組織是一個主觀決定的事情。不同的人對此會有不同的想法，也就是說不同人會有適合自己的不同組織形式。與其沉溺于尋找一種最好的文件組織結構，不如選擇一個你認為最好的并堅持使用它。目標都是一致的，每一次你都能很方便的找到你要找的文件。

如果你覺得你現在使用的結構不夠好，你就會厭煩其中的一部分并發現其中為問題，然后你就有了可改進的空間。

你喜歡這篇關于文件結構的文章嗎？你覺得這篇文章如何呢？你是如何組織你的文件的？讀完我的這篇文章后，會有什么感覺不同和改變嗎？我希望在下面的評論區聽到你的想法：)

總結

以上是生活随笔為你收集整理的html编写组织结构,编写模块化的CSS:CSS文件组织结构的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。