Open yaofly2012 opened 4 years ago
css
styled-component
scss
sass
单独的css文件(项目里的或者node_modules里的)
node_modules
style
_app.js
[ error ] ./pages/index.css Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages\_app.js. Read more: https://err.sh/next.js/css-global
Why ? 全局CSSclassName不变,为了避免冲突,故只准许在统一的位置引入全局样式。
className
CSS Modules
约定以‘.module.css’结尾的CSS文件。
自动生成唯一class名称(即具有local scope); 不用担心命名冲突(但是这样导致不能复用)。
class
local scope
Code Splitting ?
Code Splitting
CSS 单独提取生成css文件
不是声明非Pure选择器组件,即声明的选择器至少包含class or id。
Pure
class or id
CssSyntax error: Selector "h1" is not pure (pure selectors must contain at least one local class or id) (5:0)
因为CSS Modules会动态修改class/id,而标签,通配符*是特殊含义的,不能修改。
class/id
标签
*
解决不同的问题吧。
CSS in js
可以定义isolated scoped CSS,范围比CSS Modules更小。本质上CSS Modules也是CSS-in-JS的解决方案,并且代码组织和使用比styled-jsx更方便些。
isolated scoped CSS
CSS-in-JS
styled-jsx
内部使用PostCSS 编译CSS。
策略
css
,styled-component
;CSS预处理器
scss
文件得安装sass
;一、全局CSS
1.1 何为全局CSS
单独的css文件(项目里的或者
node_modules
里的)css
style
标签里,不是作为一个文件?_app.js
组件里导入,否则报错:Why ? 全局CSS
className
不变,为了避免冲突,故只准许在统一的位置引入全局样式。1.2 处理方式:
二、
CSS Modules
(Component-Level CSS)约定以‘.module.css’结尾的CSS文件。
2.1 特性
自动生成唯一
class
名称(即具有local scope
); 不用担心命名冲突(但是这样导致不能复用)。Code Splitting
?CSS 单独提取生成css文件
style
标签里啊?【build时才会进行】不是声明非
Pure
选择器组件,即声明的选择器至少包含class or id
。因为
CSS Modules
会动态修改class/id
,而标签
,通配符*
是特殊含义的,不能修改。2.2 处理方式
2.3 全局样式和
CSS Modules
对比解决不同的问题吧。
CSS Modules
Issues:
className
值?CSS in js
的解决的问题是什么?三、CSS-in-JS
可以定义
isolated scoped CSS
,范围比CSS Modules
更小。本质上CSS Modules
也是CSS-in-JS
的解决方案,并且代码组织和使用比styled-jsx
更方便些。