search

yaofly2012 / note

Personal blog
https://github.com/yaofly2012/note/issues
44 stars 5 forks source link

NextJs-CSS ??? #153

Open yaofly2012 opened 4 years ago

yaofly2012 commented 4 years ago

策略

  1. 内置支持css，styled-component；

CSS预处理器

  1. scss文件得安装sass；
  2. 其他的得显示引入插件

一、全局CSS

1.1 何为全局CSS

单独的css文件（项目里的或者node_modules里的）

  1. 全局样式默认只支持css
    • 开发的时候全局样式也是喷到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不变，为了避免冲突，故只准许在统一的位置引入全局样式。

1.2 处理方式：

二、CSS Modules(Component-Level CSS)

约定以‘.module.css’结尾的CSS文件。

2.1 特性

  1. 自动生成唯一class名称（即具有local scope）； 不用担心命名冲突（但是这样导致不能复用）。

  2. Code Splitting ?

  3. CSS 单独提取生成css文件

    • 每个页面一个css文件？
    • 开发时CSS喷到style标签里啊？【build时才会进行】 image

  4. 不是声明非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，而标签，通配符*是特殊含义的，不能修改。

2.2 处理方式

2.3 全局样式和CSS Modules对比

解决不同的问题吧。

  1. 全局样式
    • 跨组件公共样式
    • 引入第三方组件的样式（node_modules目录的样式）
  2. CSS Modules
    • 相对独立的CSS，有效命名冲突
    • 生成更小的CSS文件size

Issues：

  1. 编辑器如何自动联想补充className值?
  2. CSS in js的解决的问题是什么？

三、CSS-in-JS

可以定义isolated scoped CSS，范围比CSS Modules更小。本质上CSS Modules也是CSS-in-JS的解决方案，并且代码组织和使用比styled-jsx更方便些。

yaofly2012 commented 4 years ago

PostCSS

内部使用PostCSS 编译CSS。