整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
JavaScript、CSS 相比，HTML 經(jīng)過三十多年的發(fā)展，似乎逐漸走進(jìn)無人問津的角落，如何才能讓 HTML 再次回到人們視野的中心。
作者 | Yaser Adel Mehraban
譯者 | 譚開朗，責(zé)編 | 屠敏
出品 | CSDN（ID：CSDNnews）
以下為譯文：
有多少次，身為開發(fā)者的你編寫了一個(gè)HTML塊而沒有意識(shí)到可能編碼得并不理想?
為什么
HTML一直處于無人問津的角落，因?yàn)镴avaScript和CSS總是吸引人們的注意力。
請(qǐng)?jiān)谀X海里先保留這種印象，因?yàn)槲乙靡恍┖?jiǎn)單的技巧來發(fā)揮作用，讓HTML再次回到人們視野的中心。
以下是創(chuàng)建一目了然、可維護(hù)和可擴(kuò)展的代碼的一些方法，其很好的應(yīng)用了HTML5的語義標(biāo)記元素，并將在支持的瀏覽器中正確呈現(xiàn)。
其緣由就不贅述了，讓我們來看看具體是什么吧。
文檔類型
在index.html的頂部位置，請(qǐng)確保聲明了DOCTYPE。這將在所有瀏覽器中激活標(biāo)準(zhǔn)模式，并告知瀏覽器該如何編譯文檔。請(qǐng)記住DOCTYPE不是HTML元素。
HTML5是這樣的：
<!DOCTYPE html>注意:如果應(yīng)用了框架，這已預(yù)先寫好。如果沒有，我強(qiáng)烈建議使用像Emmet這樣的代碼片段，它在VS代碼中可用。
想了解更多關(guān)于其他文檔類型的信息嗎?點(diǎn)擊這里查看參考文件：https://html.com/tags/doctype/。
可選標(biāo)簽
有些標(biāo)簽在HTML5中是可選的，主要是因?yàn)樵厥请[式呈現(xiàn)的。信不信由你，你可以省略<html>標(biāo)簽，而頁面呈現(xiàn)得也很好。
<!DOCTYPE HTML>
<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>上面是一個(gè)有效的HTML，但在某些情況下就不能這樣做了。例如標(biāo)簽后面跟著注釋：
<!DOCTYPE HTML>
<!-- where is this comment in the DOM? -->
<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>上面是無效的，因?yàn)樽⑨屛挥?lt;thml>標(biāo)簽之外，解析樹發(fā)生了更改。
結(jié)束標(biāo)簽
應(yīng)始終記得結(jié)束標(biāo)簽，否則某些瀏覽器在呈現(xiàn)頁面時(shí)會(huì)出現(xiàn)問題。出于可讀性和其他原因，建議保留這些內(nèi)容，稍后我會(huì)詳細(xì)介紹。
<div id="example">
<img src="example.jpg" alt="example" />
<a href="#" title="test">example</a>
<p>example</p>
</div>以上都是有效的標(biāo)簽，但也有一些特例，如下。
自閉合標(biāo)簽是有效的，但不是必需的。這些元素包括:
<br>, <hr>, <img>, <input>, <link>, <meta>,
<area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>注意:普通元素永遠(yuǎn)不能有自閉合標(biāo)簽。
<title />上面顯然是無效的。
字符集
預(yù)先定義字符集。最好是將它放在頂部元素中。
<head>
<title>This is a super duper cool title, right ?</title>
<meta charset="utf-8">
</head>上面是無效的，標(biāo)題無法正確呈現(xiàn)。正確寫法是將字符集移到頂部位置。
<head>
<meta charset="utf-8">
<title>This is a super duper cool title, right ?</title>
</head>語言
不忽略可選標(biāo)簽的另一個(gè)原因是在使用屬性時(shí)。在這種情況下，我們應(yīng)該定義web頁面的語言，這對(duì)于可訪問性和搜索非常重要。
<html lang="fr-CA">
...
</html>標(biāo)題
永遠(yuǎn)不要忽略標(biāo)題標(biāo)簽，否則可訪問性太差了。我個(gè)人就永遠(yuǎn)不會(huì)使用這樣的網(wǎng)站,因?yàn)槲覄偞蜷_它即刻在20多個(gè)頁面后就找不到了(瀏覽器選項(xiàng)卡不會(huì)有任何顯示)。
base標(biāo)簽
這是一個(gè)非常有用的標(biāo)簽，應(yīng)該謹(jǐn)慎使用。它將設(shè)置應(yīng)用程序的基本URL。一旦設(shè)置好，所有鏈接都將相對(duì)于這個(gè)基本URL，這可能會(huì)導(dǎo)致一些不必要的行為:
<base href="http://www.example.com/" />通過以上設(shè)置，href="#internal"將被編譯為href=http://www.example.com/#internal。或者h(yuǎn)ref="example.org"將被編譯為href="http://www.example.com/example.org"。
描述
這個(gè)meta標(biāo)簽非常有用，盡管嚴(yán)格來說它不是最佳寫法。但在搜索引擎時(shí)，這是超級(jí)有用的。
<meta name="description" content="HTML best practices">這有一個(gè)帖子“搜索引擎優(yōu)化正盛行”：https://yashints.dev/blog/2019/06/11/seo-tips。
語義標(biāo)簽
雖然可以使用div創(chuàng)建UX工程師的線框，但這并不意味著必須這樣做。語義HTML為頁面提供了意義，而不單純是內(nèi)容顯示。像p、section、h{1-6}、main、nav等標(biāo)簽都是語義標(biāo)簽。如果使用p標(biāo)簽，用戶將知道這表示一段文本，瀏覽器也知道如何展示它們。
語義HTML超出了本文的范圍。但是我們應(yīng)該進(jìn)行檢查，就好比寫作所用的筆，而我們有鼠標(biāo)。
hr不應(yīng)該用于格式化
<hr>不是格式化元素，所以不要用它來格式化內(nèi)容。在HTML5中，這個(gè)標(biāo)簽代表了內(nèi)容的主題分離。正確的用法是這樣的:
<p>Paragraph about puppies</p>
<p>Paragraph about puppies' favourite foods</p>
<p>Paragraph about puppies' breeds</p>
<hr>
<p>Paragraph about why I am shaving my head </p>使用title屬性時(shí)要小心
title屬性是一個(gè)功能強(qiáng)大的工具，它可以幫助闡明頁面上元素的操作或目的，比如工具提示。但是，它不能與圖像上的alt等其他屬性互換。
HTML 5 規(guī)范道:
目前不鼓勵(lì)依賴title屬性，因?yàn)楹芏嘤脩舸聿话凑找?guī)范的訪問方式來暴露該屬性（例如，使用鼠標(biāo)等設(shè)備來喚出提示框，而不包括只用鍵盤或觸控鍵盤的用戶，或者現(xiàn)代手機(jī)或平板電腦）。
請(qǐng)閱讀有關(guān)如何正確使用此屬性的更多信息：https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute。
單引號(hào)或雙引號(hào)
我見過的許多代碼庫，他們的標(biāo)記中混合了這兩種形式。這并不好，特別是當(dāng)你使用一個(gè)依賴于單引號(hào)的框架時(shí)，比如php，當(dāng)你在一個(gè)句子中使用單引號(hào)時(shí)，就像我現(xiàn)在做的一樣。另一個(gè)原因是保持一致，這總是好的。不要這樣寫:
<img alt="super funny meme" src='/img/meme.jpg'>而寫為：
<img alt="super funny meme" src="/img/meme.jpg">省略布爾值
當(dāng)涉及到屬性的布爾值時(shí)，建議省略，因?yàn)樗鼈儾惶砑尤魏沃担€會(huì)增加標(biāo)記的權(quán)重。
public class MyActivity extends AppCompatActivity {
<audio autoplay="autoplay" src="podcast.mp3">
<!-- instead -->
<audio autoplay src="podcast.mp3">省略類型屬性
不需要向scriptand樣式標(biāo)簽添加type屬性。某些服務(wù)(如W3C的標(biāo)記驗(yàn)證工具)還會(huì)出現(xiàn)驗(yàn)證錯(cuò)誤。
驗(yàn)證標(biāo)記
可以使用W3C的標(biāo)記驗(yàn)證等服務(wù)以確保有效的標(biāo)記。
拒絕內(nèi)聯(lián)樣式
HTML中寫的是內(nèi)容，其如何展示取決于樣式。將展示形式留給CSS吧，不要使用內(nèi)聯(lián)樣式，這將有利于開發(fā)人員和瀏覽器理解你的標(biāo)記。
總結(jié)
這些只是編寫標(biāo)簽時(shí)要記住的冰山一角。還有很多很好的資源可以讓你深入了解，強(qiáng)烈建議你重復(fù)閱讀。
《GitHub HTML最佳實(shí)踐》：https://github.com/hail2u/html-best-practices
《W3C School HTML樣式指南》：https://www.w3schools.com/html/html5_syntax.asp
希望你喜歡本文，并能寫出優(yōu)雅的標(biāo)簽。
原文：https://dev.to/yashints/let-s-write-html-like-a-pro-28h5
本文為 CSDN 翻譯，轉(zhuǎn)載請(qǐng)注明來源出處。
【END】
者通過實(shí)踐來闡述HTML 優(yōu)先原則的主要目標(biāo)是擴(kuò)大能夠從事 Web 軟件編程工作的人員范圍。
原文鏈接：https://html-first.com/
未經(jīng)允許，禁止轉(zhuǎn)載！
HTML優(yōu)先是一組原則，旨在通過以下方式使構(gòu)建 Web 軟件更容易、更快、更具包容性且更易于維護(hù)：
利用現(xiàn)代網(wǎng)絡(luò)瀏覽器的默認(rèn)功能。
利用 HTML 屬性語法的極致簡(jiǎn)單性。
利用 Web 的查看源代碼功能。
HTML優(yōu)先原則的主要目標(biāo)是擴(kuò)大能夠從事 Web 軟件編程工作的人員范圍。從個(gè)人角度來看，這是件好事，因?yàn)檫@可以讓更多的人成為Web 程序員，構(gòu)建出色的 Web 軟件，并提高他們的收入。從業(yè)務(wù)角度來看，這些原則也有好處，因?yàn)檫@可以降低構(gòu)建軟件的成本，并減少招聘所需的資源量（眾所周知，這是一個(gè)資源密集型流程）。
HTML優(yōu)先原則的第二大目標(biāo)是讓構(gòu)建 Web 軟件的工作變得更加愉快和無縫。對(duì)于大多數(shù) Web 程序員來說，在快速構(gòu)建產(chǎn)品期間能夠流暢地在文本編輯器和瀏覽器之間來回切換，而不會(huì)遇到各種磕磕絆絆，也不需要切換上下文，他們會(huì)感到非常興奮。但如今程序員需要幾年的時(shí)間來掌握工具和框架才能達(dá)到這個(gè)階段。HTML 優(yōu)先原則能夠讓人們?cè)趯W(xué)習(xí)編程的早期階段體會(huì)這種感覺，并達(dá)到這種水平。
為了實(shí)現(xiàn)這些目標(biāo)，首先必須承認(rèn) HTML 非常容易理解，因此我們將 HTML 作為產(chǎn)品的基石，不僅用 HTML 來定義內(nèi)容和結(jié)構(gòu)，還用它來設(shè)置樣式和行為。
1. 推薦使用 HTML 原生的方法。
2. 使用 HTML 屬性來設(shè)置樣式和行為。
3. 使用利用了 HTML屬性的庫。
4. 避開構(gòu)建過程。
5. 推薦使用“裸” HTML。
6. 保留查看源代碼的功能。
瀏覽器支持的開箱即用的功能范圍很廣，而且數(shù)量還在不斷增長(zhǎng)。在將庫或框架添加到代碼庫之前，請(qǐng)檢查是否可以使用原汁原味的 html/css 來實(shí)現(xiàn)它。
鼓勵(lì)的寫法：
不鼓勵(lì)的寫法：
我們可以使用 Tailwind 或 Tachyons等 SPC 庫來實(shí)現(xiàn)樣式。同時(shí)使用 hyperscript、Alpine 或類似的庫來實(shí)現(xiàn)行為。這意味著很多功能都需要使用 HTML 來實(shí)現(xiàn)。但這也意味著其他開發(fā)人員更容易找到和理解行為、瀏覽并修改它們。
鼓勵(lì)的寫法：
不鼓勵(lì)的寫法：
你可能會(huì)注意到，這種方法似乎違反了關(guān)注點(diǎn)分離——備受吹捧的軟件設(shè)計(jì)原則之一。我們認(rèn)為，非黑即白的關(guān)注點(diǎn)分離原則是有缺陷的，因此我們提倡采用一種考慮到行為局部性以及兩者之間權(quán)衡的方法。
鼓勵(lì)的寫法：
不鼓勵(lì)的寫法：
需要將文件從一種格式轉(zhuǎn)換為另一種格式的庫會(huì)導(dǎo)致維護(hù)開銷增加大量，嚴(yán)重影響查看源代碼的功能或?qū)е缕錈o法使用，而且通常開發(fā)人員需要學(xué)習(xí)新工具才能使用它們。現(xiàn)代瀏覽器已不再有當(dāng)初引入這些實(shí)踐時(shí)的性能限制。如果我們使用 HTML 優(yōu)先的庫（例如 static tailwind 或 htmx），則額外所需的 CSS 和JS 量為最少。
鼓勵(lì)的寫法：
不鼓勵(lì)的寫法：
這條原則適用于后端實(shí)現(xiàn)。基本思想是可讀性。熟悉 HTML 但不熟悉后端框架的開發(fā)人員查看視圖文件，仍然應(yīng)該能夠理解 90% 以上的內(nèi)容。如上所述，這意味著犧牲簡(jiǎn)潔性而換取易于理解性。
鼓勵(lì)的寫法：
不鼓勵(lì)的寫法：
早期網(wǎng)絡(luò)的美妙之處在于，我們總能 "窺探 "到網(wǎng)頁任何部分的代碼。對(duì)于有抱負(fù)的開發(fā)人員來說，這是一項(xiàng)福利，因?yàn)檫@為我們?cè)诶碚摚ㄩ喿x代碼如何工作）和實(shí)踐之間架起了一座橋梁，將代碼和界面并排展示在我們眼前。對(duì)于許多網(wǎng)站來說，我們只需復(fù)制并粘貼 html 或 css，然后放到自己的網(wǎng)站上運(yùn)行，就可以獲得近乎相同的復(fù)制品。新舊代碼的混合不僅是一種學(xué)習(xí)方式，而且往往也是我們創(chuàng)作新作品的基礎(chǔ)。
后來，業(yè)界采用了一些 "改進(jìn) "方法，導(dǎo)致這種做法變得更為罕見。例如，如果我們使用流行的前端框架 React，就不能點(diǎn)擊 "查看源代碼"，復(fù)制代碼并重新混合，因?yàn)槭紫?React 有構(gòu)建過程，這意味著我們?cè)陂_發(fā)人員工具中看到的代碼與開發(fā)人員編寫的代碼不同；其次，React 代碼片段必須封裝在 react 應(yīng)用程序中才能工作。
遵循 HTML 優(yōu)先原則的網(wǎng)站能夠重新獲得查看源代碼的功能。事實(shí)上，HTML 優(yōu)先的網(wǎng)站往往更進(jìn)一步。因?yàn)槿绻褂?HTML 屬性定義用戶界面交互，那么在復(fù)制粘貼到新的代碼庫時(shí)，也可以保留這些交互（前提是目標(biāo)文件包含相同的 js 庫）。我們打算將來將其擴(kuò)展到 HTML 優(yōu)先的代碼片段庫。
本文中描述的實(shí)踐和原則在整個(gè)行業(yè)中仍然很小眾，而且使用的社區(qū)也很少。我希望通過建設(shè)網(wǎng)站（https://html-first.com/）的方式來尋找同道合的人，共同探討并完善這些想法。
我們開門見山：編寫優(yōu)秀的 CSS 代碼是件十分痛苦的事情。很多開發(fā)人員都不想做 CSS 開發(fā)。你讓我干什么都行，但是 CSS 還是算了吧。
在我創(chuàng)建應(yīng)用的時(shí)候，從來都無法從 CSS 中享受到樂趣。但是你也躲不過去，是不是？我是說，我們?nèi)褙炞⒂谟脩趔w驗(yàn)，但是如今設(shè)計(jì)也是不容忽視的部分。
項(xiàng)目剛開始的時(shí)候，一切都很美好。你有一些 CSS 選擇器，諸如 .title、input、#app 等等，非常簡(jiǎn)單。但是隨著應(yīng)用逐漸變大，CSS 也越來越糟。你對(duì) CSS 選擇器感到困惑。你會(huì)發(fā)現(xiàn)自己寫了一些 div#app .list li.item a 之類的東西。然后你一遍又一遍地寫相同的代碼。最后你把所有代碼都扔到文件末尾，因?yàn)槟愀静辉诤酰珻SS 爛透了。結(jié)果你得到了 500 行根本無法維護(hù)的 CSS 代碼。
我本人經(jīng)常和 CSS 苦苦糾纏
今天我的目的是：讓你寫出更好的 CSS。我想讓你回顧一下舊項(xiàng)目，然后想一想：天啊，我怎么會(huì)寫這樣的東西？
但是，你可能會(huì)想：好，你說的很對(duì)，但是 CSS 框架呢？CSS 框架就是為了幫助我們寫出更好的 CSS 代碼，不是嗎？
當(dāng)然，但是 CSS 框架也有一些缺點(diǎn)：
既然你關(guān)注了這篇文章，那么你一定有自己的原因，對(duì)不對(duì)？好了，廢話不多說，讓我們開始學(xué)習(xí)如何寫出更好地 CSS 代碼。
注意：這篇文章不是關(guān)于如何設(shè)計(jì)漂亮的應(yīng)用。本文是關(guān)于如何寫出便于維護(hù)的 CSS 代碼以及如何組織代碼。
SCSS
我將在我的例子中使用 SCSS。
SCSS 是一個(gè) CSS 的預(yù)處理器。從根本上來說，它是一個(gè) CSS 的超集：它增加了一些很酷的功能，例如變量，嵌套，導(dǎo)入和混入（mixins）等。
下面介紹一些我們即將使用的功能。
變量
你可以在 SCSS 中使用變量。主要的好處在于可重用性。我們假設(shè)你的應(yīng)用有一組顏色。主色是藍(lán)色。
那么你處處都用到了藍(lán)色：按鈕的 background-color（背景色），標(biāo)題和鏈接的 color（顏色）。藍(lán)色無處不在。
突然有一天，你不喜歡藍(lán)色，開始喜歡綠色。
// 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;
}
}
可讀性更好了，是不是？你可以利用嵌套在更短時(shí)間內(nèi)寫出復(fù)雜的選擇器。
分塊與導(dǎo)入
從可維護(hù)性和可讀性的角度來說，你無法將所有代碼都保存在一個(gè)大文件中。在實(shí)驗(yàn)或構(gòu)建小型應(yīng)用時(shí)，這種做法尚且可行，但是到了專業(yè)的級(jí)別……想都不要想。很幸運(yùn)的是，有了 SCSS 后，我們依然可以繼續(xù)沿用這種做法。
你可以通過使用前下劃線給文件命名，來創(chuàng)建分塊的文件：_animations.scss，_ base.scss，_variables.scss 等。
至于導(dǎo)入，你可以使用 @import 指令。例如，你可以這么做：
// _animations.scss
@keyframes appear {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
// header.scss
@import "animations";
h1 {
animation: appear 0.5s ease-out;
}
哈哈！你可能想，你在這里犯了一個(gè)錯(cuò)誤！應(yīng)該是 _animations.scss，而不是 animations ;)
非也。如果你使用這種命名方式，聰明的 SCSS 知道你指的是分塊文件。
關(guān)于變量、嵌套、分塊和導(dǎo)入，我們需要了解的就這么多。SCSS 還有很多其他功能：比如混入、繼承和其他指令（@for，@if，等等），在此不做一一介紹了。
如果你想了解更多信息，請(qǐng)查看相應(yīng)的文檔（https://sass-lang.com/guide）。文檔寫得很好，且易于理解。
組織 CSS 代碼：BEM 方法論
我記不清曾經(jīng)多少次在CSS類中使用包攬一切的名字了。比如：.button、.page-1、.page-2、.custom-input。
我們常常不知道如何命名。然而命名很重要。假如你正在構(gòu)建某個(gè)應(yīng)用，并且由于某種原因不得不將其擱置數(shù)月，那該怎么辦？還有更糟的，假如有人想把項(xiàng)目拿回去，該怎么辦？如果你的 CSS 代碼沒有恰當(dāng)?shù)拿敲凑б豢瓷先ズ茈y明白你在說什么。
BEM 可以幫助我們解決這個(gè)問題。BEM 是一種命名約定，是英文 Block Element Modifier（塊元素修飾符）的縮寫。
這種方法可以使我們的代碼結(jié)構(gòu)化，并提高模塊化和可重用性。現(xiàn)在讓我們說一說什么是塊、元素和修飾符。
塊
你可以把塊視為組件。還記得你小時(shí)候玩過樂高積木嗎？讓我們回憶一下小時(shí)候。
如果需要建造一個(gè)簡(jiǎn)單的房子，你會(huì)怎么做？你需要一個(gè)窗戶，一個(gè)屋頂，一扇門和一些墻壁。這些就是我們的塊。它們有著本身的意義。
元素
接下來，你應(yīng)該如何用你的樂高積木建造一個(gè)窗口呢？可能有些積木看起來像框架，如果你把四個(gè)這樣的積木組裝起來，就會(huì)得到一個(gè)漂亮的窗戶。這些就是我們的元素。它們是塊的一部分，它們對(duì)于建塊必不可少。但是，在塊外面的時(shí)候，它們便無用武之地。
修飾符
現(xiàn)在窗戶已經(jīng)建好了，但是你可能想要一個(gè)綠色或一個(gè)小窗戶。這些我們稱之為修飾符。它們是塊或元素上的標(biāo)志，它們用于改變行為，外觀等等。
注意事項(xiàng)
示例
以下是一個(gè)練習(xí)。你可以去你最喜歡或最常用的網(wǎng)站，然后想想看哪些是塊、元素和修飾符。
例如，以下是我想象中的 Google 商店：
現(xiàn)在該你了。認(rèn)真想想哪些地方可以改進(jìn)。與往常一樣，你必須自己搜索、實(shí)驗(yàn)和構(gòu)件，以便更好地滿足你的需求。
融會(huì)貫通
下面的示例演示了 BEM 的功能（https://codepen.io/thomlom/pen/RJvVdQ）。
寫一個(gè)博文組件
寫多個(gè)按鈕
組織 CSS 文件：7-1模式
你還跟得上我的節(jié)奏嗎？很好！現(xiàn)在讓我們來介紹如何組織 CSS 文件。這個(gè)部分可以真正幫助你提高工作效率，并幫助你立刻找到需要修改的 CSS 代碼。
為此，讓我們了解一下 7-1 模式。
你可能會(huì)想，我從未聽過這種模式。
相信我，這很簡(jiǎn)單。你必須遵守以下兩條規(guī)則：
7 個(gè)文件夾：
主文件
你需要將以上所有內(nèi)容導(dǎo)入到該文件中。
@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;
...
我知道你覺得以上內(nèi)容有點(diǎn)太多，一時(shí)難以接受。這個(gè)架構(gòu)適合于大型項(xiàng)目，而非小項(xiàng)目。下面我們介紹一種更適合小項(xiàng)目的做法。
首先，你不需要 vendors 文件夾。可以將所有外部 CSS 代碼放在頭部的link標(biāo)簽內(nèi)。接下來，如果你的應(yīng)用只有一個(gè)主題的話，可以省略 themes 文件夾。最后，你可能不會(huì)有大量頁面特定的風(fēng)格，所以也 pages 也沒必要。好了，現(xiàn)在只剩下 4 個(gè)文件夾了。
然后，你有兩個(gè)選擇：
sass/
_animations.scss
_base.scss
_buttons.scss
_header.scss
...
_variables.scss
main.scss
你可以隨便選。
你可能會(huì)想：你說服了我！但是我該如何使用呢？我是說，哪些不支持scss文件的瀏覽器該怎么辦呢？
說的好！這是我們的最后一步，我們現(xiàn)在就來學(xué)習(xí)如何將SCSS編譯為CSS。
從 SCSS 到 CSS
首先，你需要 Node.js 和 NPM（或 Yarn）。
我們將使用一個(gè)名為 node-sass 的包，它可以讓我們將 .scss 文件編譯為 .css 文件。
它的 CLI（命令行界面）相當(dāng)容易使用：
node-sass <input> <output> [options]
它有多個(gè)選擇，但我們只使用其中兩個(gè)：
如果你是一個(gè)好奇心很重的人（我希望如此，因?yàn)殚_發(fā)人員應(yīng)該好奇！）那么，請(qǐng)點(diǎn)擊這里查看完整的文檔（https://github.com/sass/node-sass#command-line-interface）。
現(xiàn)在我們知道需要用哪些工具。其余的工作更簡(jiǎn)單。只需按以下步驟操作：
touch index.html
mkdir -p sass/{abstracts,base,components,layout} css
cd sass && touch main.scss
{
...
"scripts": {
"watch": "node-sass sass/main.scss css/style.css -w",
"build": "node-sass sass/main.scss css/style.css --output-style compressed"
},
...
}
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<link rel=”stylesheet” href=”css/style.css”>
<title>My app</title>
</head>
<body>
<h1 class=”heading”>My app</h1>
</body>
</html>
然后就可以了，你準(zhǔn)備好了！你可以在編程的時(shí)候運(yùn)行npm run watch，并在瀏覽器中打開index.html文件。如果你想縮小CSS，只需運(yùn)行npm run build。
補(bǔ)充
添加實(shí)時(shí)重新加載
你可能希望添加實(shí)時(shí)重新加載以提高工作效率，而無需手動(dòng)重新加載本地index.html文件。
你可以按照以下簡(jiǎn)單的步驟操作：
{
...
"scripts": {
"start": "npm-run-all --parallel liveserver watch",
"liveserver": "live-server",
"watch": "node-sass sass/main.scss css/style.css -w",
},
...
}
現(xiàn)在如果你運(yùn)行 npm run start，就可以立即看到代碼的變更。
添加自動(dòng)前綴
我們?cè)O(shè)置好了開發(fā)工具，太棒了！現(xiàn)在，讓我們來談?wù)剺?gòu)建工具，特別是：自動(dòng)前綴（Autoprefixer）。
它是一個(gè)工具（尤其是postcss插件），它可以解析CSS，并利用這些值（https://caniuse.com/）將提供商的前綴加入到CSS規(guī)則中。
實(shí)際上，在構(gòu)建網(wǎng)站時(shí)，你可能會(huì)使用一些并非所有瀏覽器都完全支持的新功能。因此，提供商方案可以提供對(duì)這些功能的支持。
以下是一個(gè)示例：
-webkit-animation-name: myAnimation;
-moz-animation-name: myAnimation;
-ms-animation-name: myAnimation;
你可能會(huì)想，這寫起來太乏味了。這就是為什么我們需要自動(dòng)前綴來幫助我們的CSS代碼獲得瀏覽器的兼容，而不用增加額外的復(fù)雜性。
那么我們?nèi)绾斡酶斆鞯貥?gòu)建CSS呢？
還有最后幾步，請(qǐng)堅(jiān)持看下去，馬上就結(jié)束了。
{
...
"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"
...
}
現(xiàn)在當(dāng)你運(yùn)行 npm run build 時(shí)，可以生成經(jīng)過壓縮的 CSS 代碼，并且添加了提供商前綴！太棒了是不是嗎？
但是你知道更酷的是什么嗎？我為你設(shè)置了一個(gè)代碼倉(cāng)庫（https://github.com/thomlom/scss-boilerplate），以幫助你迅速開始：）
如果你想知道我是如何在項(xiàng)目中應(yīng)用這些技術(shù)的，請(qǐng)點(diǎn)擊這里查看我的代碼倉(cāng)庫（https://github.com/thomlom/portfolio）和結(jié)果（https://thomlom.github.io/portfolio/）。我希望你能通過這些例子更深入理解。
呼～，今天就說這么多！現(xiàn)在，你已準(zhǔn)備好可以開始編寫具有可維護(hù)性、模塊化和可重用性的 CSS 代碼了。
我希望你喜歡這篇文章。歡迎在下方留言分享你的想法。
原文：https://medium.freecodecamp.org/how-to-get-better-at-writing-css-a1732c32a72f
作者：homas Lombart，軟件開發(fā)。
譯者：彎月，責(zé)編：屠敏
“征稿啦”
CSDN 公眾號(hào)秉持著「與千萬技術(shù)人共成長(zhǎng)」理念，不僅以「極客頭條」、「暢言」欄目在第一時(shí)間以技術(shù)人的獨(dú)特視角描述技術(shù)人關(guān)心的行業(yè)焦點(diǎn)事件，更有「技術(shù)頭條」專欄，深度解讀行業(yè)內(nèi)的熱門技術(shù)與場(chǎng)景應(yīng)用，讓所有的開發(fā)者緊跟技術(shù)潮流，保持警醒的技術(shù)嗅覺，對(duì)行業(yè)趨勢(shì)、技術(shù)有更為全面的認(rèn)知。
如果你有優(yōu)質(zhì)的文章，或是行業(yè)熱點(diǎn)事件、技術(shù)趨勢(shì)的真知灼見，或是深度的應(yīng)用實(shí)踐、場(chǎng)景方案等的新見解，歡迎聯(lián)系 CSDN 投稿，聯(lián)系方式：微信（guorui_1118，請(qǐng)備注投稿+姓名+公司職位），郵箱（guorui@csdn.net）。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
