项目中css的设计

重置浏览器默认样式

这里再罗列一些常见及现代 CSS Reset 方案：

Reset 方案	简介	Github Stars 数
normalize.css	CSS Reset 的现代替代方案	47.1K
sanitize.css	提供一致的、跨浏览器的 HTML 元素默认样式以及有用的默认样式	4.8K
reseter.css	Normalize.css 和 CSS Reset 的未来替代方案	981
Modern-CSS-Reset	小而美，重置合理的默认值的现代 CSS Reset 方案	2.4K

如何选用大家见仁见智

推荐 Gardevoir, 官网有对比

www.cnblogs.com/coco1s/p/16…

postcss

postcss.org/

The Autoprefixer and Stylelint PostCSS plugins is one of the most popular CSS tools.

项目中使用官网有介绍

比如在webpack中Use postcss-loader in webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            }
          },
          {
            loader: 'postcss-loader'
          }
        ]
      }
    ]
  }
}

Then create postcss.config.js:

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

module.exports = config

插件autoprefixer

Autoprefixer是一个PostCSS插件，用于解析CSS并使用Can I Use提供的值为CSS规则添加浏览器前缀。该插件由谷歌推荐，并在Twitter和阿里巴巴中使用。

插件postcss-preset-env

github.com/csstools/po…

• postcss-preset-env 允许开发者使用最新的 CSS 语法而不用担心浏览器兼容性。
• postcss-preset-env 会将最新的 CSS 语法转换为目标环境的浏览器能够理解的 CSS 语法。
• postcss-preset-env 集成了 autoprefixer

所以一般项目不会直接引用autoprefixer,而是推荐postcss-preset-env

插件postcss-flexbugs-fixes

postcss-flexbugs-fixes, a PostCSS plugin to fix flexbox issues.

这个一般情况用不到,如果发现问题再引入

主要用于修复一些常见的 Flexbox 相关的 CSS 的 bug。
它解决的是 Flexbox 布局在不同浏览器中的一些已知问题。

browserslist插件共享配置

• Autoprefixer
• Babel
• postcss-preset-env
• eslint-plugin-compat
• stylelint-no-unsupported-browser-features
• postcss-normalize
• obsolete-webpack-plugin

以上插件的对浏览器版本兼容性的配置可以共享,

直接写在package.json:

  "browserslist": [
    "defaults and fully supports es6-module",
    "maintained node versions"
  ]

也可以是单独的配置文件.browserslistrc config:

# Browsers that we support

defaults and fully supports es6-module
maintained node versions

使用很方便,大家可以看browserslist官网

sass 和 less

Dart Sass 和 Node Sass

sass-lang.com/guide/

💡 Fun fact: Sass has two syntaxes! The SCSS syntax () is used most commonly. It’s a superset of CSS, which means all valid CSS is also valid SCSS. The indented syntax () is more unusual: it uses indentation rather than curly braces to nest statements, and newlines instead of semicolons to separate them. All our examples are available in both syntaxes..scss.sass

• 相同点

  1. 都是用来将 sass 编译成 css 的工具。

• 区别

  1. node-sass 是用 node (调用 cpp 编写的 libsass) 来编译 sass。
  2. dart-sass 是用 drat VM 来编译 sass。
  3. node-sass 是实时自动编译的，dart-sass 需要保存后才会生效。
  4. 推荐 dart-sass 性能更好（也是 sass 官方使用的），而且 node-sass 因为国情问题经常装不上。
  5. Sass 官方目前主力推 dart-sass，最新的特性都会在这个上面先实现。

less

less和dart-sass的区别就是 less可以直接在浏览器运行

css单位的选择

不推荐100vh和100vw .

很多浏览器，在计算 100vh 的高度的时候，会把地址栏等相关控件的高度计算在内 同时，很多时候，由于会弹出软键盘等操作，在弹出的过程中，100vh 的计算值并不会实时发生变化！
这也就变相导致了许多基于 100vh 想实现的效果无形中会产生很多问题。

我也是项目发现了这个问题，才知道css竟然有了新单位

为了解决上述的问题，规范新推出了三类单位，分别是：

The large viewport units（大视口单位）：lvw,lvh, lvi, lvb, lvmin, and lvmax
The small viewport units（小视口单位）：svw, svh, svi, svb, svmin, and svmax
The dynamic viewport units（动态视口单位）：dvw, dvh, dvi, dvb, dvmin, and dvmax

可以看看mdn对css单位的解释

也有很多前辈总结的很好 @掘金安东尼 @Chokcoco

推荐dvh 和dvw

css自适应的设计

flex的自适应

1. 要明白flex-grow和flex-shirk的场景,
2. flex需要设置wrap

table列表滚动条高度的设置

还有很多, 后面再更