讓我們開門見山：編編輯優質的 CSS 代碼是件十分痛苦的事件。很多研究人員都不熱愛做 CSS 研究。你讓我干什么都行，但是 CSS 還是算了吧。
在創建應用的時候，從來都無法從 CSS 中享用到有趣。但是你也躲不過去，是不是？我們全神貫注于玩家體驗，但是如今設計也是不容忽視的部分。
項目剛開始的時候，一切都非常的美妙。你有有的 CSS 選擇器，諸如 .title、input、#app 等等，非常簡單。但是隨著應用逐漸變大，CSS 也越來越糟。你對 CSS 選擇器感到困惑。你會發現自己編輯了有的 div#app .list li.item a 之類的東西。之后跟著你一次又一次地編輯相同的代碼。末尾你把任何代碼都扔到文件最后，因為你開始不在乎，CSS 爛透了。結果你獲得了 500 行開始無法保護的 CSS 代碼。
這一篇文章的目的是讓你編輯出更加好的 CSS。我想讓你回想起一下舊項目，之后跟著想一想：我怎么會編輯這樣的東西？
但是，你可能會想：好，你說的很對，但是 CSS 框架呢？CSS 框架就是為了幫助我們編輯出更加好的 CSS 代碼，不是嗎？
當然，但是 CSS 框架也有有的缺點：
它總是會使用平淡無奇的設計。CSS 框架使得專門定制非常的困難，更不用再重復說超越框架了。在使用以前，你一定先學習怎么樣使用它們。既然你關注了這一篇文章，那么你一定有自己的原因，對不對？好了，廢話就用不著去多說，讓我們開始學習怎么樣編輯出更好地 CSS 代碼。
小心：這一篇文章不是關于怎么樣設計漂亮的應用。本文是關于怎么樣編輯出便于保護的 CSS 代碼以及怎么樣團隊代碼。
SCSSSCSS 是一個 CSS 的預處理器。從開始上來說，它是一個 CSS 的超集：它增加了有的功能，比如變量，嵌套，導入和混入（mixins）等。
下面講解有的我們即將使用的功能。
變量
你可以在 SCSS 中使用變量。主要的好處在于可重用性。我們假設你的應用有一組顏色。主色是藍色。
那么你處處都用到了藍色：按鈕的 background-color（背景色），標題和鏈接的 color（顏色）。藍色無處不在。
瞬間有24小時，不熱愛藍色，開始熱愛綠帽色。
如果沒有變量：你需要改寫任何包含藍色設置的代碼。如果使用了變量：你只要改寫這種變量。// Declare a variable
$primary-color: #0099ff;
// References a variable
h1 {
color: $primary-color;
嵌套
你可以在 SCSS 中使用嵌套。那么如下代碼：
h1 {
font-size: 5rem;
color: blue;
h1 span {
color: green;
可以編輯成：
h1 {
font-size: 5rem;
color: blue;
span {
color: green;
可讀性更好了，是不是？你可以使用嵌套在更短暫的時間內編輯出雜亂的選擇器。
分塊與導入
從可保護性和可讀性的角度來說，無法將任何代碼都保存在一個大文件中。在實驗或構建小型應用時，這個做法尚且可行，但是到了專業的級別……想都不要想。很幸運的是，有了 SCSS 后，我們依然可以繼續沿用這個做法。
你可以通過使用前下劃線給文件命名，來創建分塊的文件：animations.scss， base.scss，_variables.scss 等。
至于導入，可以使用 @import 指令。比如，這樣做：
// _animations.scss
@keyframes appear {
0% {
opacity: 0;
100% {
opacity: 1;
// header.scss
@import “animations”;
h1 {
animation: appear 0.5s ease-out;
是不是發現了一個錯誤，大概是 _animations.scss，而不是 animations ;)非也，如果你使用這個命名方法，聰慧的 SCSS 了解你指的是分塊文件。
關于變量、嵌套、分塊和導入，我們需要知道的就這么多。SCSS 還有非常多很多功能：例如混入、繼承和很多指令（@for，@if，等等），在此不做一一講解了。
如果你想知道再多消息，請調查相對應的文檔（）。文檔編輯得較好，且易于理解。
團隊 CSS 代碼：BEM 途徑論以前有多少次在CSS類中使用包攬一切的名字了。例如：.button、.page-1、.page-2、.custom-input。
我們常常不了解怎么樣命名。然而命名非常重要。假使你正在構建某個應用，并且由于某種不知名原因不得不將其擱置數月，那該怎么辦？還有更糟的，假使有人想把項目拿回來，該怎么辦？如果你的 CSS 代碼沒有恰當的命名，那么乍一就這樣看上去超難明白你在說什么。
BEM 可以幫助我們解決這種問題。BEM 是一種命名約定，是英語 Block Element Modifier（塊元素修飾符）的縮編輯。
這個途徑可以使我們的代碼結構化，并提升模塊化和可重用性。現在讓我們說一說什么是塊、元素和修飾符。
塊
你可以把塊視為組件。如果需要搭建一個簡單的房子，你會怎么去做？你需要一個窗戶，一個屋頂，一扇門和有的墻壁。這些就是我們的塊。它們具有本身的意義。
命名：塊名：.block示例：.card、.form、.post、.user-navigation元素
接下來，你大概怎么樣用樂高積木搭建一個窗口呢？可能有的積木就這樣看起來像框架，如果你把四個這樣的積木組裝起來，就會獲得一個漂亮的窗戶。這些就是我們的元素。它們是塊的一部分，它們對于建塊必不可少。但是，在塊外面的時候，它們便無用武之地。
命名：塊名+ __ +元素名：.block__element示例：.postauthor、.postdate、.post__text修飾符
現在窗戶已經建好了，但是你可能想要一個綠帽色或一個小窗戶。這些我們稱之為修飾符。它們是塊或元素上的標志，它們用來變化行為，外貌等等。
命名：塊名稱或元素名稱+ — +修飾符名稱：.block__element–修飾符，.塊–修飾符示例：.post–important，.post__btn–disabled小心事項
在使用 BEM 的時候，你可以用且就只能用類來命名。不可以用 ID，不可以用標簽。就只能用類。塊和元素可以嵌入很多塊和元素，但是它們一定是完整獨立的。請記住：獨立。所以如果你想將把一個按鈕放在標題下的話，就不要在按鈕上加邊距，不然按鈕就會與標題綁定。請改用工具類。是的，你的 HTML 文件會超負荷，但是不用擔心，與 BEM 弄來的好處相比，這其實只是個小小的缺點。示例
以下是一個學習。你可以去你最熱愛或經常在用的網址，之后跟著想想就這樣看哪些是塊、元素和修飾符。
比如，以下是我想象中的 Google 商店：
現在認真想想哪些地方可以改進。與往常一樣，你一定自己查詢搜索、實驗和構件，以便更好地滿足你的要求。
融會貫通，下面的示例演示了 BEM 的功能（）。
團隊 CSS 文件：7-1模式現在讓我們來講解怎么樣團隊 CSS 文件。這種部分可以真正幫助你提升事情效率，并幫助你馬上尋找需要改寫的 CSS 代碼。
為此，讓我們知道一下 7-1 模式。是不是從沒有聽過這種模式。
首先你一定遵守以下兩條規則：
將任何內容分別編輯入7個不一樣的文件夾中。將它們全部導入位置在于根級其他 main.scss 文件中。7 個文件夾：
base：你可以將任何的樣板代碼放入該文件夾中。對于這里的樣板：每當開始一個新項目時，你需要編輯的任何CSS代碼。比如：排版規則、動作漫畫、工具程序（對于工具程序，我指的是margin-right-large、text-center、…等類）等等。components：這里指組件。這種文件夾包含任何用來構建頁面的組件，比如按鈕、表單、滑塊、彈出窗口等等。layout：頁面不一樣部分用到的布局，也就是說：頁眉、頁腳、導航、分區、你自己的網格等等。pages：頁面。一些頁面可能有特殊的樣式，與一般的處理方法不一樣。那么你可以將它放入該文件夾。themes：主題。如果你的應用中有不一樣的主題（黑暗模式、管理員等等），那么可以將它們放入該文件夾。abstracts：抽象。你可以將任何函數和變量與混入（mixin）放在這里。簡而言之，就是你任何的幫手。vendors：外部資源。應用或項目怎么可能沒有外部的庫呢？你可以將任何不依賴于你的文件都放入該文件夾。比如，你可以放入Font Awesome文件、Bootstrap和很多類似的東西。主文件
你需要將以上任何內容導入到該文件中。
@import abstracts/variables;
@import abstracts/functions;
@import base/reset;
@import base/typography;
@import base/utilities;
@import components/button;
@import components/form;
@import components/user-navigation;
@import layout/header;
@import layout/footer;
是不是認為以上內容有那么一點太多，一時非常難支持。這種架構適合于大型項目，而非小項目。下面我們講解一種更加的適合小項目的做法。
首先，你不需要 vendors 文件夾。可以將任何外部 CSS 代碼放在頭部的link標簽內。接下來，如果你的應用只有一個主題的話，可以省略 themes 文件夾。末尾，你可能不會有超級多的頁面特殊的風味，所以也 pages 也沒必須。好了，現在只剩下 4 個文件夾了。
之后跟著，你有兩個選擇：
你可以根據7-1模式團隊CSS代碼，那么你需要留下abstracts、components、layout 和 base 文件夾。你想將任何的分塊文件和 mail.css 放在一個大文件夾內，那么你會獲得如下結構：sass/
_animations.scss
_base.scss
_buttons.scss
_header.scss
_variables.scss
main.scss
但哪些不接受scss文件的瀏覽器該怎么辦呢？這是我們的末尾一步，我們現在就來學習怎么樣將SCSS編譯為CSS。
從 SCSS 到 CSS首先，你需要 Node.js 和 NPM（或 Yarn）。
我們將使用一個名為 node-sass 的包，它可以讓我們將 .scss 文件編譯為 .css 文件。
它的 CLI（命令行窗口）相當容易使用：
node-sass input output [options]
它有多個選擇，但我們只使用之中兩個：
-w：監視目錄或文件。這說明著node-sasswaits在時刻監督你的代碼是否發生改變，只要出現發生，它就會全自動編譯成CSS。這在研究時非常有用。–output-style：CSS文件的輸出內容。它的值可以是：嵌套、展開、緊湊、壓縮。我們將使用它來構建你的CSS文件。如果你是一個奇怪心很重的人（我渴望如此，因為研究人員大概奇怪！）那么，請點一下這里調查完全的文檔（）。
現在我們了解需要用哪些工具。其余的事情更簡單。只需按以下步驟操作：
創建項目：mkdirmy-app ?cd my-app初始化：npm init添加node-sass庫：npm install node-sass –save-dev創建文件夾，index.html和main.scss文件：touch index.html
mkdir -p sass/{abstracts,base,components,layout} css
cd sass ?touch main.scss
將這些腳本加入到package.json文件中：{
“scripts”: {
“watch”: “node-sass sass/main.scss css/style.css -w”,
“build”: “node-sass sass/main.scss css/style.css –output-style compressed”
將包含編譯好的 CSS 文件的連接加入到 index.html 文件的 head 標簽內：!DOCTYPE html
html lang=”en”
head
meta charset=”UTF-8″
meta name=”viewport” content=”width=device-width, initial-scale=1.0″
meta ”
link rel=”stylesheet” href=”css/style.css”
titleMy app/title
/head
body
h1 class=”heading”My app/h1
/body
/html
之后跟著就可以了，你準備好了！你可以在編程的時候運行npm run watch，并在瀏覽器中打開index.html文件。如果你想縮小CSS，只需運行npm run build。
補充添加24小時從頭開始加載
你可能渴望添加24小時從頭開始加載以提升事情效率，而不用手動從頭開始加載本地index.html文件。
你可以根據以下簡單的步驟操作：
安裝live-server應用包：npm install -g live-server。小心：它是一個全局包。將npm-run-all添加到項目依賴項中：npm install npm-run-all –save-dev：有了它我們就可以同一時間運行多個腳本。將這些腳本添加到package.json：{
“scripts”: {
“start”: “npm-run-all –parallel liveserver watch”,
“liveserver”: “live-server”,
“watch”: “node-sass sass/main.scss css/style.css -w”,
現在如果你運行 npm run start，就可以立刻觀看到的代碼的變更。
添加全自動前綴
我們設置好了研究工具。現在，讓我們來談談構建工具，特殊是：全自動前綴（Autoprefixer）。
它是一個工具（尤其是postcss插件），它可以分析CSS，并使用這些值（規則中。
事實上，在構建網址時，你可能會使用有的并非任何瀏覽器都完整接受的新功能。因此，提供商方案可以提供對這些功能的接受。
以下是一個示例：
-webkit-animation-name: myAnimation;
-moz-animation-name: myAnimation;
-ms-animation-name: myAnimation;
這其實就是為什么我們需要全自動前綴來幫助我們的CSS代碼獲取瀏覽器的兼容，而不用增加特外的雜亂性。
那么我們怎么樣用更聰慧地構建CSS呢？
將任何的SCSS文件編譯成一個主CSS文件。使用全自動前綴為CSS文件添加前綴。壓縮CSS文件還有末尾幾步，請堅持就這樣看下去，馬上就結束了。
添加兩個依賴項，postcss-cli和autoprefixer：npm install autoprefixer postcss-cli –save-dev改寫build腳本，并將這些腳本添加到package.json：{
“scripts”: {
“start”: “npm-run-all –parallel liveserver watch”,
“liveserver”: “live-server”,
“watch”: “node-sass sass/main.scss css/style.css -w”,
“compile”: “node-sass sass/main.scss css/style.css”,
“prefix”: “postcss css/style.css –use autoprefixer -o css/style.css”,
“compress”: “node-sass css/style.css css/style.css –output-style compressed”,
“build”: “npm-run-all compile prefix compress”
現在當你運行 npm run build 時，可以生成經歷過壓縮的 CSS 代碼，并且添加了提供商前綴！
現在，你可以開始編編輯有著可保護性、模塊化和可重用性的 CSS 代碼了。
為了幫助同伴們更加好的學習Python，技術學派整理了Python的有關學習視頻及學習路線圖。
領取方法關注“技術學派”后，評論轉發文章，私信回復：Python學習
