前端发展速度可以说是日新月异,但CSS作为前端重要的一部分,发展的有点让人捉急。
近些年来对于css出现了一些规范和框架,让开发者也能舒服的写css样式了。
BEM使用「模块名+元素名+修饰器名」,解决命名冲突。
postcss使用「工具和插件」转换CSS,可以为css选择器增加不同的「浏览器前缀」等。
css module为css加入「局部作用域」,实现了「css模块化」。
less和sass等css预处理语言,将「css扩展为一种编程语言」,增加变量,Mixin,函数等特性。
CSS-in-JS是一种「将css内嵌到js文件中的技术方案」,现在已经有很多种css-in-js库,支持「动态改变样式」等功能。
CSS原子化的思想是「将基础功能小的,单用途的css定义为一个class」,特点是「高复用性,低代码量」。
最近使用tailwindcss,感觉上手体验很不错,虽然刚开始需要一直查文档,但我仍然觉得未来可期。
tailwindcss有很多的优点,工具类优先,响应式设计,组件友好,高度自定义等。
我们可以用普通写法和tailwindcss做一下对比
<div class="chat-notification">
<div class="chat-notification-logo-wrapper">
<img
class="chat-notification-logo"
src="/img/logo.svg"
alt="ChitChat Logo"
/>
</div>
<div class="chat-notification-content">
<h4 class="chat-notification-title">ChitChat</h4>
<p class="chat-notification-message">You have a new message!</p>
</div>
</div>
<style>
.chat-notification {
display: flex;
max-width: 24rem;
margin: 0 auto;
padding: 1.5rem;
border-radius: 0.5rem;
background-color: #fff;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.chat-notification-logo-wrapper {
flex-shrink: 0;
}
.chat-notification-logo {
height: 3rem;
width: 3rem;
}
.chat-notification-content {
margin-left: 1.5rem;
padding-top: 0.25rem;
}
.chat-notification-title {
color: #1a202c;
font-size: 1.25rem;
line-height: 1.25;
}
.chat-notification-message {
color: #718096;
font-size: 1rem;
line-height: 1.5;
}
</style>
引入相关依赖,然后改成tailwindcss的样式。
<div class="max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl">
<div class="flex-shrink-0">
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo" />
</div>
<div class="ml-6 pt-1">
<h4 class="text-xl text-gray-900 leading-tight">ChitChat</h4>
<p class="text-base text-gray-600 leading-normal">
You have a new message!
</p>
</div>
</div>
肉眼可见的代码量少了很多,而且class不用再命令,既节省了想名字的时间,又直接将css以内联的形式直接写入,可谓是一步到位。
tailwindcss虽然需要前期频繁查文档,记住各种样式也是费时费力,但我依然觉得未来可期。
代码样式对照
颜色对比
css代码压缩
<div class="grid grid-cols-1 sm:grid-cols-2 sm:px-8 sm:py-12 sm:gap-x-8 md:py-16"></div>
@layer
等,将自定义的样式添加到全局基础样式。tailwind.config.js
可以添加自定义的配置项。const colors = require('tailwindcss/colors')
module.exports = {
theme: {
colors: {
gray: colors.coolGray,
blue: colors.lightBlue,
red: colors.rose,
pink: colors.fuchsia,
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
spacing: {
'128': '32rem',
'144': '36rem',
},
borderRadius: {
'4xl': '2rem',
}
}
},
variants: {
extend: {
borderColor: ['focus-visible'],
opacity: ['disabled'],
}
}
}
到目前,除了还需要在官网查api外,我使用tailwindcss的体验一直良好。
虽然也有一些想要害死强迫症的地方。
例如,rem的问题。tailwindcss中的h4
代表的是height: 1rem
,也就是说h1
代表的是0.25rem。
font-size
在刚开始是0.125rem增长,后边是0.75rem,在后边差更多。
font-size
如果在项目的需求中,如果遇到很多1.3rem这种需求,就需要做大量的配置。
但我觉得也有不少贴近生活的语义化。
例如font-size
的大小,是按照平时衣服尺码的xl, 2xl
这种。还有border-raduis
改为了rounded
也不错