2021 年你需要知道的 CSS 工程化技術

家好，我是皮湯。最近業務調整，組內開啟了前端工程化方面的基建，我主要負責 CSS 技術選型這一塊，針對目前業界主流的幾套方案進行了比較完善的調研與比較，分享給大家。

目前整個 CSS 工具鏈、工程化領域的主要方案如下：

而我們技術選型的標準如下：

- 開發速度快

- 開發體驗友好

- 調試體驗友好

- 可維護性友好

- 擴展性友好

- 可協作性友好

- 體積小

- 有最佳實踐指導

目前主要需要對比的三套方案：

- Less/Sass + PostCSS 的純 CSS c側方案

- styled-components / emotion 的純 CSS-in-JS 側方案

- TailwindCSS 的以寫輔助類為主的 HTML 側方案

## 純 CSS 側方案

### 介紹與優點

> 維護狀態：一般

> Star 數：16.7K

> 支持框架：無框架限制

> 項目地址：https://github.com/less/less.js

Less/Sass + PostCSS 這種方案在目前主流的組件庫和企業級項目中使用很廣，如 ant-design 等

它們的主要作用如下：

- 為 CSS 添加了類似 JS 的特性，你也可以使用變量、mixin，寫判斷等

- 引入了模塊化的概念，可以在一個 less 文件中導入另外一個 less 文件進行使用

- 兼容標準，可以快速使用 CSS 新特性，兼容瀏覽器 CSS 差異等

這類工具能夠與主流的工程化工具一起使用，如 Webpack，提供對應的 loader 如 sass-loader，然后就可以在 React/Vue 項目中建 `.scss` 文件，寫 sass 語法，并導入到 React 組件中生效。

比如我寫一個組件在響應式各個斷點下的展示情況的 sass 代碼：

```

.component {

width: 300px;

@media (min-width: 768px) {

width: 600px;

@media (min-resolution: 192dpi) {

background-image: url(/img/retina2x.png);

}

@media (min-width: 1280px) {

width: 800px;

}

```

或導入一些用于標準化瀏覽器差異的代碼：

```

@import "normalize.css";

// component 相關的其他代碼

```

### 不足

這類方案的一個主要問題就是，只是對 CSS 本身進行了增強，但是在幫助開發者如何寫更好的 CSS、更高效、可維護的 CSS 方面并沒有提供任何建議。

- 你依然需要自己定義 CSS 類、id，并且思考如何去用這些類、id 進行組合去描述 HTML 的樣式

- 你依然可能會寫很多冗余的 Less/Sass 代碼，然后造成項目的負擔，在可維護性方面也有巨大問題

### 優化

- 可以引入 CSS 設計規范：BEM 規范，來輔助用戶在整個網頁的 HTML 骨架以及對應的類上進行設計

- 可以引入 CSS Modules，將 CSS 文件進行 “作用域” 限制，確保在之后維護時，修改一個內容不會引起全局中其他樣式的效果

#### BEM 規范

B （Block）、E（Element）、M（Modifier），具體就是通過塊、元素、行為來定義所有的可視化功能。

拿設計一個 Button 為例：

```

/* Block */

.btn {}

/* 依賴于 Block 的 Element */

.btn__price {}

/* 修改 Block 風格的 Modifier */

.btn--orange {}

.btn--big {}

```

遵循上述規范的一個真實的 Button：

```

<span class="btn__text">BIG BUTTON</span>

</a>

```

可以獲得如下的效果：

#### CSS Modules

CSS Modules 主要為 CSS 添加局部作用域和模塊依賴，使得 CSS 也能具有組件化。

一個例子如下：

```

import React from 'react';

import style from './App.css';

export default () => {

return (

Hello World

</h1>

);

};

```

.title {

composes: className;

color: red;

}

```

上述經過編譯會變成如下 hash 字符串：

```

Hello World

</h1>

```

._3zyde4l1yATCOkgn-DBWEL {

color: red;

}

```

CSS Modules 可以與普通 CSS、Less、Sass 等結合使用。

## 純 JS 側方案

### 介紹與優點

> 維護狀態：一般

> Star 數：35.2K

> 支持框架：React ，通過社區支持 Vue 等框架

> 項目地址：https://github.com/styled-components/styled-components

使用 JS 的模板字符串函數，在 JS 里面寫 CSS 代碼，這帶來了兩個認知的改變：

- 不是在根據 HTML，然后去寫 CSS，而是站在組件設計的角度，為組件寫 CSS，然后應用組件的組合思想搭建大應用

- 自動提供類似 CSS Modules 的體驗，不用擔心樣式的全局污染問題

同時帶來了很多 JS 側才有的各種功能特性，可以讓開發者用開發 JS 的方式開發 CSS，如編輯器自動補全、Lint、編譯壓縮等。

比如我寫一個按鈕：

```

const Button = styled.button`

/* Adapt the colors based on primary prop */

background: ${props => props.primary ? "palevioletred" : "white"};

color: ${props => props.primary ? "white" : "palevioletred"};

font-size: 1em;

margin: 1em;

padding: 0.25em 1em;

border: 2px solid palevioletred;

border-radius: 3px;

render(

<div>

<Button>Normal</Button>

<Button primary>Primary</Button>

</div>

);

```

可以獲得如下效果：

還可以擴展樣式：

```

// The Button from the last section without the interpolations

const Button = styled.button`

color: palevioletred;

font-size: 1em;

margin: 1em;

padding: 0.25em 1em;

border: 2px solid palevioletred;

border-radius: 3px;

// A new component based on Button, but with some override styles

const TomatoButton = styled(Button)`

color: tomato;

border-color: tomato;

render(

<div>

<Button>Normal Button</Button>

<TomatoButton>Tomato Button</TomatoButton>

</div>

);

```

可以獲得如下效果：

### 不足

雖然這類方案提供了在 JS 中寫 CSS，充分利用 JS 的插值、組合等特性，然后應用 React 組件等組合思想，將組件與 CSS 進行細粒度綁定，讓 CSS 跟隨著組件一同進行組件化開發，同時提供和組件類似的模塊化特性，相比 Less/Sass 這一套，可以復用 JS 社區的最佳實踐等。

但是它仍然有一些不足：

- 仍然是是對 CSS 增強，提供非常大的靈活性，開發者仍然需要考慮如何去組織自己的 CSS

- 沒有給出一套 “有觀點” 的最佳實踐做法

- 在上層也缺乏基于 styled-components 進行復用的物料庫可進行參考設計和使用，導致在初始化使用時開發速度較低

- 在 JS 中寫 CSS，勢必帶來一些本屬于 JS 的限制，如 TS 下，需要對 Styled 的組件進行類型注釋

- 官方維護的內容只兼容 React 框架，Vue 和其他框架都由社區提供支持

整體來說不太符合團隊協作使用，需要人為總結最佳實踐和規范等。

### 優化

- 尋求一套寫 CSS 的最佳實踐和團隊協作規范

- 能夠擁有大量的物料庫或輔助類等，提高開發效率，快速完成應用開發

## 偏向 HTML 側方案

### 介紹與優點

> 維護狀態：積極

> Star 數：48.9K

> 支持框架：React、Vue、Svelte 等主流框架

> 項目地址：https://github.com/tailwindlabs/tailwindcss

典型的是 TailwindCSS，一個輔助類優先的 CSS 框架，提供如 `flex` 、`pt-4` 、`text-center` 、`rotate-90` 這樣實用的類名，然后基于這些底層的輔助類向上組合構建任何網站，而且只需要專注于為 HTML 設置類名即可。

一個比較形象的例子可以參考如下代碼：

```

<button class="btn btn--secondary">Decline</button>

<button class="btn btn--primary">Accept</button>

```

上述代碼應用 BEM 風格的類名設計，然后設計兩個按鈕，而這兩個類名類似主流組件庫里面的 Button 的不同狀態的設計，而這兩個類又是由更加基礎的 TailwindCSS 輔助類組成：

```

.btn {

@apply text-base font-medium rounded-lg p-3;

}

.btn--primary {

@apply bg-rose-500 text-white;

}

.btn--secondary {

@apply bg-gray-100 text-black;

}

```

上面的輔助類包含以下幾類：

- 設置文本相關： `text-base` 、`font-medium` 、`text-white` 、`text-black`

- 設置背景相關的：`bg-rose-500` 、`bg-gray-100`

- 設置間距相關的：`p-3`

- 設置邊角相關的：`rounded-lg`

通過 Tailwind 提供的 `@apply` 方法來對這些輔助類進行組合構建更上層的樣式類。

上述的最終效果展示如下：

可以看到 TailwindCSS 將我們開發網站的過程抽象成為使用 Figma 等設計軟件設計界面的過程，同時提供了一套用于設計的規范，相當于內置最佳實踐，如顏色、陰影、字體相關的內容，一個很形象的圖片可以說明這一點：

TailwindCSS 為我們規劃了一個元素可以設置的屬性，并且為每個屬性給定了一組可以設置的值，這些屬性+屬性值組合成一個有機的設計系統，非常便于團隊協作與共識，讓我們開發網站就像做設計一樣簡單、快速，但是整體風格又能保持一致。

TailwindCSS 同時也能與主流組件庫如 React、Vue、Svelte 結合，融入基于組件的 CSS 設計思想，但又只需要修改 HTML 上的類名，如我們設計一個食譜組件：

```

// Recipes.js

import Nav from './Nav.js'

import NavItem from './NavItem.js'

import List from './List.js'

import ListItem from './ListItem.js'

export default function Recipes({ recipes }) {

return (

<Nav>

<NavItem href="/featured" isActive>Featured</NavItem>

<NavItem href="/popular">Popular</NavItem>

<NavItem href="/recent">Recent</NavItem>

</Nav>

<List>

{recipes.map((recipe) => (

))}

</List>

</div>

)

}

// Nav.js

export default function Nav({ children }) {

return (

{children}

</ul>

</nav>

)

}

// NavItem.js

export default function NavItem({ href, isActive, children }) {

return (

<li>

href={href}

className={`block px-4 py-2 rounded-md ${isActive ? 'bg-amber-100 text-amber-700' : ''}`}

{children}

</a>

</li>

)

}

// List.js

export default function List({ children }) {

return (

{children}

</ul>

)

}

//ListItem.js

export default function ListItem({ recipe }) {

return (

{recipe.title}

</h2>

<div>

<dd>

<abbr title={`${recipe.time} minutes`}>{recipe.time}m</abbr>

</dd>

</div>

<div>

<dt className="sr-only">Difficulty</dt>

<dd> · {recipe.difficulty}</dd>

</div>

<div>

<dt className="sr-only">Servings</dt>

<dd> · {recipe.servings} servings</dd>

</div>

<dt className="inline">By</dt>{' '}

<dd className="inline text-black">{recipe.author}</dd>

</div>

<span className="sr-only">Rating</span>

</svg>

</dt>

<dd>{recipe.rating}</dd>

</div>

</dl>

</div>

</article>

)

}

```

上述食譜的效果如下：

可以看到我們無需寫一行 CSS，而是在 HTML 里面應用各種輔助類，結合 React 的組件化設計，既可以輕松完成一個非常現代化且好看的食譜組件。

除了上面的特性，TailwindCSS 在響應式、新特性支持、Dark Mode、自定義配置、自定義新的輔助類、IDE 方面也提供非常優秀的支持，除此之外還有基于 TailwindCSS 構建的物料庫 Tailwind UI ，提供各種各樣成熟、好看、可用于生產的物料庫：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1cb983da6f71470b91ac764d14907998~tplv-k3u1fbpfcp-zoom-1.image)

因為需要自定的 CSS 不多，而需要自定義的 CSS 可以定義為可復用的輔助類，所以在可維護性方面也是極好的。

### 不足

- 因為要引入一個額外的運行時，TailwindCSS 輔助類到 CSS 的編譯過程，而隨著組件越來越多，需要編譯的工作量也會變大，所以速度會有影響

- 過于底層，相當于給了用于設計的最基礎的指標，但是如果我們想要快速設計網站，那么可能還需要一致的、更加上層的組件庫

- 相當于引入了一套框架，具有一定的學習成本和使用成本

### 優化

- Tailwind 2.0 支持 [JIT](https://blog.tailwindcss.com/tailwindcss-2-1 "JIT")，可以大大提升編譯速度，可以考慮引入

- 基于 TailwindCSS，設計一套符合自身風格的上層組件庫、物料庫，便于更加快速開發

- 提前探索、學習和總結一套教程與開發最佳實踐

- 探索 styled-components 等結合 TailwindCSS 的開發方式

## 參考鏈接

- [CSS 工程化發展歷程](https://bytedance.feishu.cn/docs/doccnTRF0OZtJMgKuo3y0hIDMbc# "CSS 工程化發展歷程")

/ 感謝支持/

以上便是本次分享的全部內容，希望對你有所幫助^_^

喜歡的話別忘了分享、點贊、收藏三連哦~

歡迎關注公眾號 程序員巴士，來自字節、蝦皮、招銀的三端兄弟，分享編程經驗、技術干貨與職業規劃，助你少走彎路進大廠。

5自適應是現在主流的技術，導航欄菜單是最常見的一種，今天我們一起來學習一下它是如何使用HTML，CSS和JavaScript來構建響應式導航欄和漢堡菜單的。

這就是它的樣子，是不是很熟悉呢？

H5導航菜單

好的，那就先從HTML開始：

<header class=”header”>
<nav class=”navbar”>
<a href=”#” class=”nav-logo”>WebDev.</a>
<ul class=”nav-menu”>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>Services</a>
</li>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>Blog</a>
</li>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>About</a>
</li>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>Contact</a>
</li>
</ul>
<div class=”hamburger”>
<span class=”bar”></span>
<span class=”bar”></span>
<span class=”bar”></span>
</div>
</nav>
</header>

通過這些代碼，我們實現了：

給header標簽指定名為header的CSS類的，可以作為導航菜單的容器。
給nav標簽指定名為navbar的CSS類。
具有nav-logo類的鏈接
具有nav-menu類的ul
在ul內部，我們有4個具有nav-item類的li
在每個nav-item中，都有一個包含nav-link類的鏈接
至于漢堡菜單，我已在代碼中添加了一個具有hamburger類的div，且此div中有3個帶bar類的span

以上就是我們需要的HTML代碼。

現在讓我們添加CSS樣式重置代碼

（此外，我們將導入所需的字體，并添加一些基本的CSS來重置所有的默認樣式。）

@import url(‘https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap’);

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
font-size: 62.5%;
font-family: ‘Roboto’, sans-serif;
}

li {
list-style: none;
}

a {
text-decoration: none;
}

現在讓我們給每個元素逐個添加樣式：

header和navbar：

.header{
border-bottom: 1px solid #E2E8F0;
}

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
}

hamburger樣式：

.hamburger {
display: none;
}

.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #101010;
}

其他元素的基本樣式：

.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}

.nav-item {
margin-left: 5rem;
}

.nav-link{
font-size: 1.6rem;
font-weight: 400;
color: #475569;
}

.nav-link:hover{
color: #482ff7;
}

.nav-logo {
font-size: 2.1rem;
font-weight: 500;
color: #482ff7;
}

完成這些之后，看起來應該是這樣的：

但是它不是響應式的，所以我們還需要添加媒體查詢css代碼。

@media only screen and (max-width: 768px) {
.nav-menu {
position: fixed;
left: -100%;
top: 5rem;
flex-direction: column;
background-color: #fff;
width: 100%;
border-radius: 10px;
text-align: center;
transition: 0.3s;
box-shadow:
0 10px 27px rgba(0, 0, 0, 0.05);
}

.nav-menu.active {
left: 0;
}

.nav-item {
margin: 2.5rem 0;
}

.hamburger {
display: block;
cursor: pointer;
}

}

這里媒體查詢就是通過設置position: fixed; left: -100%;來隱藏nav-menu。

此外，我們將hamburger設置為display: block;，所以現在可見。

我們還添加了一個額外的類.nav-menu.active，它在nav-menu上設置left: 0;?，F在，到了添加javascript的時候了，以便在我們單擊漢堡菜單時，會在nav-menu上添加此active類。

添加JavaScript

const hamburger = document.querySelector(“.hamburger”);
const navMenu = document.querySelector(“.nav-menu”);

hamburger.addEventListener(“click”, mobileMenu);

function mobileMenu() {
hamburger.classList.toggle(“active”);
navMenu.classList.toggle(“active”);
}

此處的函數mobileMenu()在hamburger和nav-menu上也添加了一個active類，從而打開mobile menu。單擊hamburger時，我們可以使用hamburger上的active類來創建X動畫?，F在就開始做吧。

// Inside the Media Query.

.hamburger.active .bar:nth-child(2) {
opacity: 0;
}

.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}

.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}

現在看起來應該是這樣的：

但是有一個問題，當我們單擊鏈接時，漢堡菜單不會關閉。現在讓我們解決一下這個問題。

const navLink = document.querySelectorAll(“.nav-link”);

navLink.forEach(n => n.addEventListener(“click”, closeMenu));

function closeMenu() {
hamburger.classList.remove(“active”);
navMenu.classList.remove(“active”);
}

closeMenu()函數從nav-menu和hamburger中刪除active類，從而關閉mobile menu。

H5導航菜單就是這樣，實現了用HTML，CSS和javascript構建一個響應式的導航欄菜單。希望你喜歡并分享這篇文章。感謝大家的閱讀。

更多干貨等著你~ 點贊、分享，關注哦

到前端技術，不少朋友一定會感到有些陌生。但其實，前端，你每天都在接觸。

你正在使用的APP，你正在瀏覽的網頁，這些你能看到的界面，都屬于前端。

而前端最重要的三大技術，HTML，CSS，JavaScript，則是每一個前端開發者必須具備的技能。

掌握這些技能，你可以快速地做出一個酷炫的APP界面或者一個簡單大方的網站頁面。因此，就讓我們一起來快速學習一下這三門技術吧。

以下內容節選自實驗樓訓練營課程《Vue.js 和 Node.js 構建內容發布系統》。

實驗介紹

本實驗主要介紹一下前端的基礎知識，對比認識一下各個框架的代碼編寫方式，并介紹我們本次技術選型的主要思路。對于前端三大技術 HTML、CSS、JavaScript，簡單的介紹了基本情況和常用語法。中間介紹了現代框架的一些情況，并通過實際的案例，用代碼直觀的認識一下各種框架的實現方式。最后分析一下項目的技術選型。

知識點

HTML、CSS、JavaScript 快速概覽
前端框架概覽和選型
后端選型
數據庫選型
Web 服務器選型

前端技術簡介

本節我們簡單介紹一下前端最基礎 HTML, CSS, JavaScript 三駕馬車。雖然本課程預設的讀者為零基礎開發者，但是前端開發一定會這三種技術的運用有要求。建議抽空學習《 Web 前端工程師路徑》中的階段 1 甚至階段 2。這里僅做語法介紹和基本使用的概覽。

在此之前先認識一下實驗環境。實驗環境和 VS Code 使用體驗基本一致。你可以啟動一個終端，并在其中輸入 Linux 命令。

后面的命令無特殊說明的都是在此終端命令行中輸入。大多數命令可以多開終端窗口分別執行。

那么下面我們就快速的了解一下。

HTML

HTML 全稱超文本標記語言，幾乎是從萬維網和瀏覽器產生伊始就存在的。主要用于結構化信息來方便瀏覽器展示。

以標簽對作為主要特征，如<p>這是一個段落</p>。這些標簽會被瀏覽器解析成不同的模塊，比如 p 標簽就是一個段落，img 標簽就是一個圖片，a 標簽就是一個超鏈接，標簽名不區分大小寫。

立刻就來嘗試一下吧。首先通過命令行新建一個 demo 目錄：

mkdir demo

然后命令行進入 demo 目錄：

cd ./demo

新建一個 hello.html 文件，可以在實驗環境左邊的瀏覽框內在 demo 上右鍵選擇 New File 然后命名為 hello.html；或者也可在命令行終端輸入 touch hello.html，同樣是新建文件。

在其中輸入以下內容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>標題</title>
  </head>
  <body>
    正文
  </body>
</html>

然后右擊文件選擇 Open With → Preview。

看到了嗎？其實我們就是新建了一個 .html 后綴的文本文件，然后瀏覽器就可以將其中的內容展示出來。你也可以在自己的桌面上新建一個，然后使用瀏覽器打開看看效果。

這里嵌套代碼的縮進格式是為了美觀和可讀性，并無嚴格要求。

head 標簽中是一些暫時無需用到的頭部信息，渲染的主體是 body 標簽。下面我們修改 body 標簽里面的內容，填入一些常用標簽來直觀感受一下。

<body>
  <h1>頁面標題</h1>
  <div>一個塊容器</div>
  <div>又一個塊容器</div>
  <p>這里是段落了，間距變大</p>
  <div>一個塊容器</div>
  <div>
    <div>
      多層嵌套：
      <div>內部第一個</div>
      <div>內部第二個</div>
    </div>
  </div>
</body>

保存之后切換到瀏覽標簽看一看，有沒有感覺被忽悠了？嵌套沒嵌套根本沒體現出來，就像 Word 里排了一下版，按了幾個回車。

因為我們沒有對顯示樣式進行修改，那是 CSS 的事。HTML 主要管內容的組織結構。

這里有一點針對學習的小建議，本課程中給到的全部代碼請手動輸入，忘記復制和粘貼快捷鍵。

而且最好不要機械的一個字符一個字符照著抄，盡量看過一行或一小段代碼之后，靠短暫的印象去輸出，別怕出錯，只有過腦子并輸出實踐，才是最快掌握一項技能的捷徑。

以上兩句話是本課程中最有價值內容之一。

下面我們接著修改剛才的代碼，再給 body 中添加幾個常用標簽。每次修改和保存之后記得到預覽頁看看樣式的變化。

<h4>4 級標題</h4>

<ul>
  <li>
    HTML
  </li>
  <li>
    CSS
  </li>
  <li>
    JavaScript
  </li>
</ul>

<div>
  <a href="https://www.shiyanlou.com" target="_blank"
    >點擊超鏈接跳轉至實驗樓首頁</a
  >
</div>

<div>
  <img
    src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg"
    alt=""
    width="200"
  />
</div>

最后的鏈接標簽 a 和圖片標簽 img 出現了標簽屬性，屬性為 attr="value" 格式，可以給標簽增加更豐富的信息。

同時 img 標簽還是一個單標簽，不需要在后面添加 </img> 配合使用。

至此對 HTML 的簡要介紹告一段落。

互聯網上看到的各種五彩繽紛網頁都是由這些 HTML 組成的，但是為什么我們寫的這么難看？下一節我們就要學習一下如何用 CSS 美化頁面。

CSS

CSS 全稱層疊樣式表，是專門用來修飾 HTML 樣式的一種語言。我們修改一下上節的 hello.html 文件來直觀感受一下。

內部代碼塊引入

在 head 標簽內部增加以下 style 代碼塊：

<head>
  <meta charset="UTF-8" />
  <title>標題</title>
  <style type="text/css">
    div {
      border: 1px solid blue;
      padding: 2px;
      margin: 10px;
    }
  </style>
</head>

這是再切換到預覽頁，發現沒那么平鋪直敘了。

這就是 CSS 的第一種引入方式，HTML 內置代碼塊。

大括號外面的 div 是標簽選擇器，這里選中了本頁面中的所有 div 元素。大括號里面是屬性名與賦值，屬性名都是固定的關鍵字，并已規定好了值的類型和可選范圍。

讀代碼也就大概知道了，我們將 div 的邊框設置為 1 像素寬、固體（單線型）、藍色，填充（內邊距）2 像素，邊緣空白（外邊距）10 像素。現在可以練習調整一下各個數字，預覽看看發生了什么？

再說點題外話，懂一些英文對程序員來說非常必要，除了可以憑感覺就讀懂沒學過的代碼，還可以在面向 Google 編程、面向 Stack Overflow 編程、面向 Github Issues 編程時游刃有余。

外部文件引入

然后我們再試一下外部文件引入，在 hello.html 的同級目錄新建 hello.css，輸入以下內容保存：

div {
  color: green;
  border: 2px dotted red;
}

然后修改 hello.html，在 style 標簽后面增加一行 link 標簽，添加引入類型和地址：

<style type="text/css">
  div {
    border: 1px solid blue;
    padding: 2px;
    margin: 10px;
  }
</style>
<link rel="stylesheet" href="hello.css" />

預覽看看，文字顏色變為綠色，邊框的樣式也被更新為 2 像素寬、點線型紅色。

同樣是 div 選擇器，為什么邊框的樣式被覆蓋了呢？注意 CSS 在同樣條件下會后面代碼覆蓋前面，可以嘗試交換 link 標簽和 style 標簽塊的順序看看。

行間樣式

最后一種叫行間樣式，這個結構更簡單。修改 hello.html 中的 <div>內部第一個</div> 為

<div style="margin: 60px 0 10px 30px ;color:purple;">內部第一個</div>

樣式覆蓋前兩種方式了，因為行間樣式的優先級較高。這里涉及到選擇器權重，先給一個簡單公式了解一下。

!important > 行間樣式 > ID > class | 偽類 | 屬性選擇 > 標簽 > 繼承 | 通配符。

多個選擇器作用時權重相加。這里算 CSS 里有點復雜的部分，暫時不展開。

這里還有個小知識點是內外邊距 margin 和 padding 接受的完整的值是四個，順序固定為“上右下左”。如果省略參數則從末尾計算對向合并。比如：

margin:40px 20px 50px; 三個參數時，左右同為 20px。

margin:40px 20px; 兩個參數時上下同為 40px, 左右同為 20px。

margin:40px; 一個參數時呢？請自行嘗試理解。

CSS 先講這么多，雖然沒有把我們的頁面變多好看，但最起碼知道努力的方向了。

JavaScript

制作 JavaScript 的快速入門簡直非常傷腦筋。比起前兩種技術 HTML 和 CSS，這是貨真價實的編程語言了。

也是我們后面要用到的 Vue.js 和 Node.js 中的根基，一下子又很難講很多，所以還是希望同學們能重視起來系統學習一下，最起碼讀到后面的代碼時不至于陷入“這是啥這又是啥”的窘境。

來段代碼直觀認知一下，還是先內部代碼塊引入。

在 hello.html 的 head 標簽內增加一個代碼塊：

    <link rel="stylesheet" href="./hello.css">
    <script>
      let message = "字符串提示";
      function showMSG(msg) {
        alert(msg);
      }
    </script>

修改 hello.html 的 h1 標簽為：

<h1 onclick="showMSG(message)">頁面標題</h1>

保存預覽，點擊“頁面標題”，會彈出提示框。

JavaScript 代碼加載之后就會執行，不存在編譯階段。行末的分號絕大多數時候可以省略。

我們先定義了一個變量 message，并賦值為“字符串提示”。定義變量關鍵字原是 var，ES6 新增關鍵字 let 有更清晰的作用域，可替代使用。

學習 JavaScript 經常會碰到 ES6、ES7 之類的名詞，實際上是 ECMAScript 標準的版本號的意思。可以簡單理解為新版標準為 JavaScript 添加特定新特性。

然后我們定義了一個函數 showMSG，并添加一個形參 msg。在函數體內部調用瀏覽器彈框方法，顯示 msg 的值。function 是定義函數的關鍵字，暫時先把它當做一個功能封閉的盒子，當函數調用時，執行函數體內的代碼。

調用部分是先給 h1 標簽添加了 onclick 點擊事件，被點擊時觸發 showMSG(message)，也就是把 message 傳給了 msg。

之后再試一下調用外部 js 文件，新建 demo.js 文件，寫入下面內容并保存。

message = "修改一下字符串";

然后修改 hello.html 文件，在 script 代碼塊后面增加一行：

<script src="./demo.js"></script>

這次保存預覽，點擊“頁面標題”，可以看到彈窗的文字變了。這個演示了 script 代碼塊在頁面可以同時存在多個，也是順序調用，而且互相之間可以直接訪問。文件命名也沒有要求，希望不會逼死強迫癥。

JavaScript 就是為什么網頁可以做那么多交互的源頭了。掌握起來任重道遠。

以上內容節選自實驗樓訓練營課程《Vue.js 和 Node.js 構建內容發布系統》。

這三門前端技術先了解到這里，想要更深入學習如何使用前端技術構建內容發布系統，比如做個高逼格的博客，搭建一個交流社區，或者為企業制作官網等，可以訪問實驗樓官網，搜索《Vue.js 和 Node.js 構建內容發布系統》這門課。

課程會提供完整的虛擬機環境，手把手教大家如何從頭構建實現一個前后端分離的內容發布系統，包括了前端頁面、后端服務、數據庫等。

在線咨詢

上一篇：HTML中的元素使用方法1-零基礎自學網頁制作
下一篇：Python中的smtplib和email實現郵件發送

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

2021 年你需要知道的 CSS 工程化技術

/ 感謝支持/

實驗介紹

知識點

前端技術簡介

HTML

CSS

JavaScript

您的項目需求