整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
4 種方式可以在 HTML 中引入 CSS。其中有 2 種方式是在 HTML 文件中直接添加 CSS 代碼，另外兩種是引入 外部 CSS 文件。下面我們就來看看這些方式和它們的優缺點。
內聯方式
內聯方式指的是直接在 HTML 標簽中的 style 屬性中添加 CSS。
示例：
<div style="background: red"></div>
這通常是個很糟糕的書寫方式，它只能改變當前標簽的樣式，如果想要多個 <div> 擁有相同的樣式，你不得不重復地為每個 <div> 添加相同的樣式，如果想要修改一種樣式，又不得不修改所有的 style 中的代碼。很顯然，內聯方式引入 CSS 代碼會導致 HTML 代碼變得冗長，且使得網頁難以維護。
嵌入方式
嵌入方式指的是在 HTML 頭部中的 <style> 標簽下書寫 CSS 代碼。
示例：
<head>
<style>
.content {
background: red;
}
</style>
</head>
嵌入方式的 CSS 只對當前的網頁有效。因為 CSS 代碼是在 HTML 文件中，所以會使得代碼比較集中，當我們寫模板網頁時這通常比較有利。因為查看模板代碼的人可以一目了然地查看 HTML 結構和 CSS 樣式。因為嵌入的 CSS 只對當前頁面有效，所以當多個頁面需要引入相同的 CSS 代碼時，這樣寫會導致代碼冗余，也不利于維護。
鏈接方式
鏈接方式指的是使用 HTML 頭部的 <head> 標簽引入外部的 CSS 文件。
示例：
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
這是最常見的也是最推薦的引入 CSS 的方式。使用這種方式，所有的 CSS 代碼只存在于單獨的 CSS 文件中，所以具有良好的可維護性。并且所有的 CSS 代碼只存在于 CSS 文件中，CSS 文件會在第一次加載時引入，以后切換頁面時只需加載 HTML 文件即可。
導入方式
導入方式指的是使用 CSS 規則引入外部 CSS 文件。
示例：
<style> @import url(style.css); </style>
比較鏈接方式和導入方式
鏈接方式（下面用 link 代替）和導入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我們來比較這兩種方式，并且說明為什么不推薦使用 @import。
小結：我們應盡量使用 <link> 標簽導入外部 CSS 文件，避免或者少用使用其他三種方式。
我們開門見山：編寫優秀的 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 代碼以及如何組織代碼。
SCSS
我將在我的例子中使用 SCSS。
SCSS 是一個 CSS 的預處理器。從根本上來說，它是一個 CSS 的超集：它增加了一些很酷的功能，例如變量，嵌套，導入和混入（mixins）等。
下面介紹一些我們即將使用的功能。
變量
你可以在 SCSS 中使用變量。主要的好處在于可重用性。我們假設你的應用有一組顏色。主色是藍色。
那么你處處都用到了藍色：按鈕的 background-color（背景色），標題和鏈接的 color（顏色）。藍色無處不在。
突然有一天，你不喜歡藍色，開始喜歡綠色。
// 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，等等），在此不做一一介紹了。
如果你想了解更多信息，請查看相應的文檔（https://sass-lang.com/guide）。文檔寫得很好，且易于理解。
組織 CSS 代碼：BEM 方法論
我記不清曾經多少次在CSS類中使用包攬一切的名字了。比如：.button、.page-1、.page-2、.custom-input。
我們常常不知道如何命名。然而命名很重要。假如你正在構建某個應用，并且由于某種原因不得不將其擱置數月，那該怎么辦？還有更糟的，假如有人想把項目拿回去，該怎么辦？如果你的 CSS 代碼沒有恰當的命名，那么乍一看上去很難明白你在說什么。
BEM 可以幫助我們解決這個問題。BEM 是一種命名約定，是英文 Block Element Modifier（塊元素修飾符）的縮寫。
這種方法可以使我們的代碼結構化，并提高模塊化和可重用性。現在讓我們說一說什么是塊、元素和修飾符。
塊
你可以把塊視為組件。還記得你小時候玩過樂高積木嗎？讓我們回憶一下小時候。
如果需要建造一個簡單的房子，你會怎么做？你需要一個窗戶，一個屋頂，一扇門和一些墻壁。這些就是我們的塊。它們有著本身的意義。
元素
接下來，你應該如何用你的樂高積木建造一個窗口呢？可能有些積木看起來像框架，如果你把四個這樣的積木組裝起來，就會得到一個漂亮的窗戶。這些就是我們的元素。它們是塊的一部分，它們對于建塊必不可少。但是，在塊外面的時候，它們便無用武之地。
修飾符
現在窗戶已經建好了，但是你可能想要一個綠色或一個小窗戶。這些我們稱之為修飾符。它們是塊或元素上的標志，它們用于改變行為，外觀等等。
注意事項
示例
以下是一個練習。你可以去你最喜歡或最常用的網站，然后想想看哪些是塊、元素和修飾符。
例如，以下是我想象中的 Google 商店：
現在該你了。認真想想哪些地方可以改進。與往常一樣，你必須自己搜索、實驗和構件，以便更好地滿足你的需求。
融會貫通
下面的示例演示了 BEM 的功能（https://codepen.io/thomlom/pen/RJvVdQ）。
寫一個博文組件
寫多個按鈕
組織 CSS 文件：7-1模式
你還跟得上我的節奏嗎？很好！現在讓我們來介紹如何組織 CSS 文件。這個部分可以真正幫助你提高工作效率，并幫助你立刻找到需要修改的 CSS 代碼。
為此，讓我們了解一下 7-1 模式。
你可能會想，我從未聽過這種模式。
相信我，這很簡單。你必須遵守以下兩條規則：
7 個文件夾：
主文件
你需要將以上所有內容導入到該文件中。
@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 個文件夾了。
然后，你有兩個選擇：
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]
它有多個選擇，但我們只使用其中兩個：
如果你是一個好奇心很重的人（我希望如此，因為開發人員應該好奇！）那么，請點擊這里查看完整的文檔（https://github.com/sass/node-sass#command-line-interface）。
現在我們知道需要用哪些工具。其余的工作更簡單。只需按以下步驟操作：
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>
然后就可以了，你準備好了！你可以在編程的時候運行npm run watch，并在瀏覽器中打開index.html文件。如果你想縮小CSS，只需運行npm run build。
補充
添加實時重新加載
你可能希望添加實時重新加載以提高工作效率，而無需手動重新加載本地index.html文件。
你可以按照以下簡單的步驟操作：
{
...
"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，并利用這些值（https://caniuse.com/）將提供商的前綴加入到CSS規則中。
實際上，在構建網站時，你可能會使用一些并非所有瀏覽器都完全支持的新功能。因此，提供商方案可以提供對這些功能的支持。
以下是一個示例：
-webkit-animation-name: myAnimation;
-moz-animation-name: myAnimation;
-ms-animation-name: myAnimation;
你可能會想，這寫起來太乏味了。這就是為什么我們需要自動前綴來幫助我們的CSS代碼獲得瀏覽器的兼容，而不用增加額外的復雜性。
那么我們如何用更聰明地構建CSS呢？
還有最后幾步，請堅持看下去，馬上就結束了。
{
...
"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 代碼，并且添加了提供商前綴！太棒了是不是嗎？
但是你知道更酷的是什么嗎？我為你設置了一個代碼倉庫（https://github.com/thomlom/scss-boilerplate），以幫助你迅速開始：）
如果你想知道我是如何在項目中應用這些技術的，請點擊這里查看我的代碼倉庫（https://github.com/thomlom/portfolio）和結果（https://thomlom.github.io/portfolio/）。我希望你能通過這些例子更深入理解。
呼～，今天就說這么多！現在，你已準備好可以開始編寫具有可維護性、模塊化和可重用性的 CSS 代碼了。
我希望你喜歡這篇文章。歡迎在下方留言分享你的想法。
原文：https://medium.freecodecamp.org/how-to-get-better-at-writing-css-a1732c32a72f
作者：homas Lombart，軟件開發。
譯者：彎月，責編：屠敏
“征稿啦”
CSDN 公眾號秉持著「與千萬技術人共成長」理念，不僅以「極客頭條」、「暢言」欄目在第一時間以技術人的獨特視角描述技術人關心的行業焦點事件，更有「技術頭條」專欄，深度解讀行業內的熱門技術與場景應用，讓所有的開發者緊跟技術潮流，保持警醒的技術嗅覺，對行業趨勢、技術有更為全面的認知。
如果你有優質的文章，或是行業熱點事件、技術趨勢的真知灼見，或是深度的應用實踐、場景方案等的新見解，歡迎聯系 CSDN 投稿，聯系方式：微信（guorui_1118，請備注投稿+姓名+公司職位），郵箱（guorui@csdn.net）。
eb開發是一個很依賴經驗的領域，然而這對初學者很不友好。
知識一旦脫離了應用場景就會變得晦澀、空洞，且知識本身也滿足“二八定律”，“抓大放小”是提高學習效率的關鍵。
下文向大家介紹了HTML和CSS之間的關系。內容選自《HTML 5與CSS 3核心技法（全彩）》一書。本書主線清晰，講解簡潔，并提供在線效果演示效果，非常適合小白上手！
1 HTML是骨架
很難想象一個人在桌前對著一塊砧板坐一夜，隔一會兒就噼里啪啦敲幾下，一會兒哭一會兒笑，是一種什么景象。事實上，在貓眼中我們就是這樣的。只不過我們面對的是一塊會發光的“砧板”而已。但為什么這塊“板子”如此吸引人？“上網”到底是在做什么？
獲取信息。
重點在“信息”，一種看不見摸不著卻真實存在的東西。無論“1 + 1 = 2”這段字符顯示得多么粗糙，都不會影響它傳遞了完整的信息，以及這條信息的內在邏輯是正確的，不是嗎？HTML就是用來盛放最核心的內容——信息。
所以，在CSS和JavaScript出現之前，HTML就出現了。這是必然的，因為如果連最核心的信息都無法有效傳遞，那圍繞著它的一切裝飾物和附屬品都是毫無意義的。
除滿足承載核心信息的需求外，HTML還解決了一個重要的問題——將信息結構化。
試想有這樣一篇文章：
背影
我說道：“爸爸，你走吧。”他望車外看了看，說：“我買幾個橘子去。你就在此地，不要走動。”我看那邊月臺的柵欄外有幾個賣東西的等著顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去自然要費事些。我本來要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過鐵道，要爬上那邊月臺，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。
評論
王花花 大概，天底下的父親，老去的樣子都有些共同的特質吧
李拴蛋 我們都不愿意承認他老了
劉備備 想吃橘子...
此時上面的信息基本沒有結構，只能通過斷行或縮進盡可能讓內容更易讀，編輯時的狀態就是其最終的顯示效果。
HTML就派上了用場，見下方的代碼：
代碼
<artcle>
<h1>背影</h1>
<p>
我說道：“爸爸，你走吧。”他望車外看了看，說：“我買幾個橘子去。你就在此地，不要走動。”我看那邊月臺的柵欄外有幾個賣東西的等著顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去自然要費事些。我本來要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過鐵道，要爬上那邊月臺，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。
</p>
</artcle>
<section id="comment-list">
<div class="title">評論</div>
<div class="comment">
<strong class="username">王花花</strong>
<span class="content">大概，天底下的父親，老去的樣子都有些共同的特質吧</span>
</div>
<divclass="comment">
<strong class="username">李拴蛋</strong>
<span class="content">我們都不愿意承認他老了</span>
</div>
<div class="comment">
<strong class="username">劉備備</strong>
<span class="content">想吃橘子...</span>
</div>
</section>
一頭霧水沒關系，后面我們會細說每一個部分。總之這段內容給人感覺反而更繁瑣。但繁瑣是代價，重要的是現在這段信息有結構了。這就意味著計算機可以通過結構的規律將其顯示得更便于閱讀（甚至是交互）。
以下是不加任何裝飾性內容直接讓瀏覽器呈現的結果：
效果
這是純HTML在沒有引入任何裝飾時的顯示效果。很明顯，即便是這樣也比純文字狀態易讀了許多。但注意，HTML本身沒有樣式，字體大小和粗細有變化的原因是瀏覽器的默認樣式起了作用，與HTML沒有關系。而重點就在這里，這意味著我們可以基于這個結構設計自己的頁面效果，見下方的示例。
代碼
<style>
body { font-family: 'Microsoft YaHei', sans-serif; }
#comment-list { background: #f0f0f0; padding: 10px; border: 1px solid #ccc; margin-top: 25px; }
#comment-list .comment { margin-top: 10px; margin-bottom: 10px; }
#comment-list .title {
color: #777; font-size: 1.1rem; padding-bottom: 5px;
border-bottom: 1px solid #ccc;
}
</style>
<artcle>
<h1>背影</h1>
<p>
我說道：“爸爸，你走吧。”他望車外看了看，說：“我買幾個橘子去。你就在此地，不要走動。”我看那邊月臺的柵欄外有幾個賣東西的等著顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去自然要費事些。我本來要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過鐵道，要爬上那邊月臺，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。
</p>
</artcle>
<section id="comment-list">
<div class="title">評論</div>
<div class="comment">
<strong class="username">王花花</strong>
<span class="content">大概，天底下的父親，老去的樣子都有些共同的特質吧</span>
</div>
<div class="comment">
<strong class="username">李拴蛋</strong>
<span class="content">我們都不愿意承認他老了</span>
</div>
<div class="comment">
<strong class="username">劉備備</strong>
<span class="content">想吃橘子...</span>
</div>
</section>
效果
這里只是舉了一個小示例。你可以輕而易舉地讓頁面的風格千變萬化，進而讓用戶體驗有所差異（或差距）。“千變萬化”因CSS靈活、強大，“輕而易舉”因HTML簡潔、有序。結構的力量！
CSS是皮膚
一個充滿活力的生態是不滿足于現狀的。人們在適應了便利地瀏覽核心信息之后，就會想方設法改進瀏覽的體驗。比如，讓自己的博客以多欄顯示，以便在視覺上區分不同板塊；修改字體顏色，以便強調一些重要信息等。
起初的做法是——準備幾種特殊的標簽，專門用于樣式的指定。涉及布局的地方，如果沒有特殊標簽就直接用表格布局。以下沒有任何樣式的狀態（以下代碼均不需要看懂）：
代碼
<h1>標題</h1><p>從前有座山，山里有個廟，廟里...</p>
效果
此時的頁面結構下。
如果想讓標題居中，則需要給其添加元素<center>，見下方的示例。
代碼
<center><h1>標題</h1></center><p>從前有座山，山里有個廟，廟里...</p>效果
此時的頁面結構如下。
居中標題的目的確實達到了，但是有一個很大的問題：如果我改變主意了，不想讓其居中了，那么我還得再去將<center>元素去掉。這對于簡單的頁面確實可行，但如果是復雜的頁面，這種做法的工作量就是噩夢，因為每個地方都得修改，無論是對齊方式、顏色、背景色，還是大的布局都必須通過修改結構才能完成。這種做法的最大問題是可維護性太差，很多時候為了一種樣式要修改很多不必要的結構，枯燥、重復、削足適履的工作太多，基本上寫一次就再也不想改了。
這個問題亟待解決，而且解決方案還要兼容現有規則。現有規則是什么？HTML的語法及結構。不過既然HTML已經有結構了，為什么不好好利用呢？
以前面示例中的文章頁面為例，如果我們想更改標題，是否可以先統一選中所有標題，然后說明想要什么樣式規則呢？就像下面這樣：
所有h1 元素聽著
對齊方式 居中。
字體顏色 黑色。
如果想將所有段落字體放大，則像下面這樣：
所有p 元素聽著
字體大小 150%。
這種方式的確很高效！同時這個規則與HTML語法無關，相當于另一種語言。這樣結構和樣式就不會互相影響，結構是結構，樣式是樣式，兩者隔離開了。如果想修改樣式，則完全不需要勞HTML大駕，只需要修改樣式文件即可，更便于管理和維護。這就是CSS，只不過其語法更簡潔。
下面以修改標題對齊方式為例：
h1 { /* 所有h1 元素聽著 */
text-align: center; /* 對齊方式 居中 */
}
通過批量選擇和處理，極大地提高了開發效率，降低了維護成本，四兩撥千斤。
（完）
圖書推薦
《HTML 5與CSS 3核心技法（全彩）》
表嚴肅 著
本書能夠為自學Web開發初學者建立一套HTML與CSS的核心知識框架，同時借助豐富的示例讓初學者有一個愉悅、輕松的學習過程。
想從事前端開發的，可將本書作為學習的起點。正從事前端開發的，可將本書作為速查的手冊。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
