共计 7312 个字符,预计需要花费 19 分钟才能阅读完成。
大家好,我是皮汤。最近业务调整,组内开启了前端工程化方面的基建,我次要负责 CSS 技术选型这一块,针对目前业界支流的几套计划进行了比较完善的调研与比拟,分享给大家。
目前整个 CSS 工具链、工程化畛域的次要计划如下:
而咱们技术选型的规范如下:
- 开发速度快
- 开发体验敌对
- 调试体验敌对
- 可维护性敌对
- 扩展性敌对
- 可协作性敌对
- 体积小
- 有最佳实际领导
目前次要须要比照的三套计划:
- Less/Sass + PostCSS 的纯 CSS c 侧计划
- styled-components / emotion 的纯 CSS-in-JS 侧计划
- TailwindCSS 的以写辅助类为主的 HTML 侧计划
纯 CSS 侧计划
介绍与长处
保护状态:个别
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 文件进行“作用域”限度,确保在之后保护时,批改一个内容不会引起全局中其余款式的成果
BEM 标准
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 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 等联合应用。
纯 JS 侧计划
介绍与长处
保护状态:个别
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 的最佳实际和团队合作标准
- 可能领有大量的物料库或辅助类等,进步开发效率,疾速实现利用开发
偏差 HTML 侧计划
介绍与长处
保护状态:踊跃
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 工程化倒退历程
/ 感激反对 /
以上便是本次分享的全部内容,心愿对你有所帮忙 ^_^
喜爱的话别忘了 分享、点赞、珍藏 三连哦~
欢送关注公众号 程序员巴士,来自字节、虾皮、招银的三端兄弟,分享编程教训、技术干货与职业规划,助你少走弯路进大厂。