一、原生 CSS 方案

在 HTML 文件中引入 CSS 有三种方法：

  1. 外部样式：通过 link 标签引入 CSS 样式
  2. 内页样式：写在 HTML 页面中的 style 标签里
  3. 行内样式：写在对应标签的 style 属性里面

优先级：行内样式 >> 内页样式 >> 外部样式
样式选择器的权重优先级：写得越具体，优先级越高，如果写得一样具体，后写的覆盖先写的

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width">
  6.   <title>TEST</title>
  7. </head>
  8. <body>
  9.   <div id='test' class='test'>test</div>
  10. </body>
  11. </html>
  1. #test{
  2.   background: blue;
  3. }
  5. .test{
  6.   background:orange;
  7. }
  9. body>div{
  10.   background:red;
  11. }
  14. body div{
  15.   background: yellow;
  16. }
  18. div{
  19.   background:red;
  20. }

上面这个例子体现了 CSS 选择器写得越具体，优先级越高

二、SCSS 方案

GitHub 链接：https://github.com/sass/sass

SCSS 是 原生 CSS 的加强版

  1. 选择器里嵌套选择器
  2. 可以选择使用函数

截止 2020/9/17，两个 sass 最新版本为

  • node-sass：4.14.1
  • dart-sass：1.25.0

1. node 和 node-sass 版本

node-sass 不是一定安装成功后就直接能够使用，它的版本还需要根据 node 版本对应
参看一篇博客 《node和node-sass版本问题》

2. 安装使用 dart-sass

React 无法直接识别 dart-sass，只识别 node-sass，我们可以采用偷梁换柱的方式下载 dart-sass 并给它披上 node-sass 的外衣欺骗 React，这就能顺利使用它啦

  1. npm install node-sass@npm:dart-sass
  2. yarn add node-sass@npm:dart-sass

三、CSS IN JS 方案

这个链接可以查看许多不同的 CSS IN JS 方案：https://github.com/MicheleBertoli/css-in-js
使用 styled-components：https://github.com/styled-components/styled-components

styled-components 的特点如下：

  1. 不用再想 class 名字了
  2. 用 JS 创建一个带有 CSS 样式的标签
  1. import styled from 'styled-component'
  3. const Div = styled.div`
  4.     color: red;
  5.     font-size: 20px;
  6. `

「@浪里淘沙的小法师」