关于前端:2021-年你需要知道的-CSS-工程化技术

大家好，我是皮汤。最近业务调整，组内开启了前端工程化方面的基建，我次要负责 CSS 技术选型这一块，针对目前业界支流的几套计划进行了比较完善的调研与比拟，分享给大家。

目前整个 CSS 工具链、工程化畛域的次要计划如下：

而咱们技术选型的规范如下：

开发速度快
开发体验敌对
调试体验敌对
可维护性敌对
扩展性敌对
可协作性敌对
体积小
有最佳实际领导

目前次要须要比照的三套计划：

Less/Sass + PostCSS 的纯 CSS c 侧计划
styled-components / emotion 的纯 CSS-in-JS 侧计划
TailwindCSS 的以写辅助类为主的 HTML 侧计划

保护状态：个别

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 文件进行“作用域”限度，确保在之后保护时，批改一个内容不会引起全局中其余款式的成果

B（Block）、E（Element）、M（Modifier），具体就是通过块、元素、行为来定义所有的可视化性能。

拿设计一个 Button 为例：

/* Block */

.btn {}



/* 依赖于 Block 的 Element */

.btn__price {}



/* 批改 Block 格调的 Modifier */

.btn--orange {}

.btn--big {}

遵循上述标准的一个实在的 Button：

<a class="btn btn--big btn--orange" href="#">

  <span class="btn__price">$3</span>

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

</a>

能够取得如下的成果：

CSS Modules 次要为 CSS 增加部分作用域和模块依赖，使得 CSS 也能具备组件化。

一个例子如下：

import React from 'react';

import style from './App.css';



export default () => {

  return (<h1 className={style.title}>

      Hello World

    </h1>

  );

};

.title {

  composes: className;

  color: red;

}

上述通过编译会变成如下 hash 字符串：

<h1 class="_3zyde4l1yATCOkgn-DBWEL">

  Hello World

</h1>

._3zyde4l1yATCOkgn-DBWEL {color: red;}

CSS Modules 能够与一般 CSS、Less、Sass 等联合应用。

保护状态：个别

Star 数：35.2K

反对框架：React，通过社区反对 Vue 等框架

我的项目地址：https://github.com/styled-com…

应用 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 的最佳实际和团队合作标准
可能领有大量的物料库或辅助类等，进步开发效率，疾速实现利用开发

保护状态：踊跃

Star 数：48.9K

反对框架：React、Vue、Svelte 等支流框架

我的项目地址：https://github.com/tailwindla…

典型的是 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 (

    <div className="divide-y divide-gray-100">

      <Nav>

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

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

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

      </Nav>

      <List>

        {recipes.map((recipe) => (<ListItem key={recipe.id} recipe={recipe} />

        ))}

      </List>

    </div>

  )

}



// Nav.js

export default function Nav({children}) {

  return (

    <nav className="p-4">

      <ul className="flex space-x-2">

        {children}

      </ul>

    </nav>

  )

}



// NavItem.js

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

  return (

    <li>

      <a

        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 (

    <ul className="divide-y divide-gray-100">

      {children}

    </ul>

  )

}



//ListItem.js

export default function ListItem({recipe}) {

  return (

    <article className="p-4 flex space-x-4">

      <img src={recipe.image} alt=""className="flex-none w-18 h-18 rounded-lg object-cover bg-gray-100"width="144"height="144" />

      <div className="min-w-0 relative flex-auto sm:pr-20 lg:pr-0 xl:pr-20">

        <h2 className="text-lg font-semibold text-black mb-0.5">

          {recipe.title}

        </h2>

        <dl className="flex flex-wrap text-sm font-medium whitespace-pre">

          <div>

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

            <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>

          <div className="flex-none w-full mt-0.5 font-normal">

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

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

          </div>

          <div class="absolute top-0 right-0 rounded-full bg-amber-50 text-amber-900 px-2 py-0.5 hidden sm:flex lg:hidden xl:flex items-center space-x-1">

            <dt className="text-amber-500">

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

              <svg width="16" height="20" fill="currentColor">

                <path d="M7.05 3.691c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.372 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.363-1.118L.98 9.483c-.784-.57-.381-1.81.587-1.81H5.03a1 1 0 00.95-.69L7.05 3.69z" />

              </svg>

            </dt>

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

          </div>

        </dl>

      </div>

    </article>

  )

}

上述食谱的成果如下：

能够看到咱们无需写一行 CSS，而是在 HTML 外面利用各种辅助类，联合 React 的组件化设计，既能够轻松实现一个十分现代化且难看的食谱组件。

除了下面的个性，TailwindCSS 在响应式、新个性反对、Dark Mode、自定义配置、自定义新的辅助类、IDE 方面也提供十分优良的反对，除此之外还有基于 TailwindCSS 构建的物料库 Tailwind UI，提供各种各样成熟、难看、可用于生产的物料库：

因为须要自定的 CSS 不多，而须要自定义的 CSS 能够定义为可复用的辅助类，所以在可维护性方面也是极好的。

因为要引入一个额定的运行时，TailwindCSS 辅助类到 CSS 的编译过程，而随着组件越来越多，须要编译的工作量也会变大，所以速度会有影响
过于底层，相当于给了用于设计的最根底的指标，然而如果咱们想要疾速设计网站，那么可能还须要统一的、更加下层的组件库
相当于引入了一套框架，具备肯定的学习老本和应用老本

Tailwind 2.0 反对 JIT，能够大大晋升编译速度，能够思考引入
基于 TailwindCSS，设计一套合乎本身格调的下层组件库、物料库，便于更加疾速开发
提前摸索、学习和总结一套教程与开发最佳实际
摸索 styled-components 等联合 TailwindCSS 的开发方式

CSS 工程化倒退历程

/ 感激反对 /
以上便是本次分享的全部内容，心愿对你有所帮忙 ^_^

喜爱的话别忘了分享、点赞、珍藏三连哦~

欢送关注公众号程序员巴士，来自字节、虾皮、招银的三端兄弟，分享编程教训、技术干货与职业规划，助你少走弯路进大厂。

关于前端:2021-年你需要知道的-CSS-工程化技术

纯 CSS 侧计划

介绍与长处

有余

优化

BEM 标准

CSS Modules

纯 JS 侧计划

介绍与长处

有余

优化

偏差 HTML 侧计划

介绍与长处

有余

优化

参考链接