浅谈原子化 CSS

浅谈原子化 CSS

Tags
CSS
SaaS
Tailwind CSS
Published
June 14, 2024
Author
因为工作原因,笔者有着几年的开发维护展示类型网站的经历,这里和大家分享探讨下我对原子化 CSS 的理解和使用。

什么是原子化 CSS

网上相关的介绍非常的多,这里就简单带过下,简单来说原子化 CSS 是一种编写 CSS 的方法,每个类名只有一个明确的作用,从而避免重复和冗余的代码。这种方法提高了 CSS 代码的可重用性和可维护性,但同时也可能增加 HTML 结构内部类的使用。

原子化 CSS 的使用场景

在开发 Admin 或 Dashboard 这类后台项目时,一般需要一套完整的组件库,开发过程则是以交互功能为主,堆砌组件完成,一般不需要写很多的样式。但在开发官网等一些偏内容展示的网站时,往往更注重样式的还原和页面响应式兼容。
这类网站可能极少有通用的复杂控件,更多的是对样式的规范,风格的统一,并且以内容驱动,更新迭代速度很快,并需要长期的维护。
在这种场景下,原子化 CSS 就发挥了很大的作用。对于需要规范样式、持续更新迭代的展示类网站,原子化 CSS 使得每个样式都有唯一对应的一处定义,有利于控制和保持整体风格的一致性。同时还节省了重复定义样式的时间,有效提升开发和维护效率。

如何在 Scss 中使用原子化 CSS

在没有了解专门的原子化 CSS 库之前,我是通过 Scss 的变量和循环来实现一些常用的原子化 CSS。
这里我们以边距来举个例子:
$spacing-shortcuts: ( "margin": "m", "padding": "p", ) !default; $spacing-directions: ( "top": "t", "right": "r", "bottom": "b", "left": "l", ) !default; $spacing-horizontal: "x" !default; $spacing-vertical: "y" !default; $spacing-values: ( "0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto, ) !default; @each $property, $shortcut in $spacing-shortcuts { @each $name, $value in $spacing-values { // All directions .#{$shortcut}-#{$name} { #{$property}: $value !important; } // Cardinal directions @each $direction, $suffix in $spacing-directions { .#{$shortcut}#{$suffix}-#{$name} { #{$property}-#{$direction}: $value !important; } } // Horizontal axis @if $spacing-horizontal != null { .#{$shortcut}#{$spacing-horizontal}-#{$name} { #{$property}-left: $value !important; #{$property}-right: $value !important; } } // Vertical axis @if $spacing-vertical != null { .#{$shortcut}#{$spacing-vertical}-#{$name} { #{$property}-top: $value !important; #{$property}-bottom: $value !important; } } } }
Suffix
Value
*-0
0
*-1
0.25rem
*-2
0.5rem
*-3
0.75rem
*-4
1rem
*-5
1.5rem
*-6
3rem
还可以再举个 position 的例子:
$positions: absolute fixed relative static sticky; @each $position in $positions { .position-#{$position} { position: $position !important; } }
对于响应式网页,一般还需要媒体查询来为不同尺寸的设备写不同的样式,我们可以使用 Scss 的 mixin 功能实现一组断点来规范和统一管理媒体查询。
// Responsiveness // The container horizontal gap, which acts as the offset for breakpoints $gap: 32px; // 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16 $tablet: 769px; // 960px container + 4rem $desktop: 960px + (2 * $gap); // 1152px container + 4rem $widescreen: 1152px + (2 * $gap); // 1344px container + 4rem $fullhd: 1344px + (2 * $gap); @mixin from($device) { @media screen and (min-width: $device) { @content; } } @mixin until($device) { @media screen and (max-width: #{$device - 1px}) { @content; } } @mixin mobile { @media screen and (max-width: #{$tablet - 1px}) { @content; } } @mixin tablet { @media screen and (min-width: $tablet), print { @content; } } @mixin tablet-only { @media screen and (min-width: $tablet) and (max-width: #{$desktop - 1px}) { @content; } } @mixin touch { @media screen and (max-width: #{$desktop - 1px}) { @content; } } @mixin desktop { @media screen and (min-width: $desktop) { @content; } } @mixin desktop-only { @media screen and (min-width: $desktop) and (max-width: #{$widescreen - 1px}) { @content; } } @mixin until-widescreen { @media screen and (max-width: #{$widescreen - 1px}) { @content; } } @mixin widescreen { @media screen and (min-width: $widescreen) { @content; } } @mixin widescreen-only { @media screen and (min-width: $widescreen) and (max-width: #{$fullhd - 1px}) { @content; } } @mixin until-fullhd { @media screen and (max-width: #{$fullhd - 1px}) { @content; } } @mixin fullhd { @media screen and (min-width: $fullhd) { @content; } }
在全局引入后,我们即可在任意样式文件中使用,类似这样:
.card { padding: 32px; @include mobile { padding: 16px; } }
再搭配上 PurgeCSS,打包时自动删除没有使用到的样式,这样我们就能通过 Scss 实现一个简易的原子化 CSS 项目。
但手动去书写和管理这些样式还是不太方便,使用相关的原子化 CSS 库是更好的选择。

Tailwind CSS 介绍

Tailwind CSS 是目前最流行的原子化 CSS 框架,其旨在通过实用程序优先的方式来快速构建现代化的响应式网站。以下是对 Tailwind CSS 的简要介绍:
  • 实用程序优先
    • Tailwind CSS 提供了一组低级别的实用工具类,这些类可以直接在 HTML 标记中使用,而无需定义自定义 CSS 样式。这样可以快速、灵活地构建复杂的设计。
  • 高度可定制
    • Tailwind CSS 带有一个配置文件(tailwind.config.js),允许开发者根据项目需求进行深度定制。可以调整颜色、间距、字体等,使之完全符合设计规范。
  • 响应式设计
    • 内置响应式设计支持,通过类名前缀(如 sm:md:lg: 等)可以轻松地实现不同屏幕尺寸下的样式变化。
  • 与现有工具兼容
    • Tailwind CSS 可以与大多数前端构建工具(如 Webpack、PostCSS)无缝集成,也能与现代前端框架(如 React、Vue、Angular)一起使用。
  • 极小的打包大小
    • Tailwind CSS 配合 PurgeCSS 使用,可以在生产环境中移除未使用的 CSS 类,大大减少最终打包文件的大小。

Tailwind CSS 使用

就拿 Scss 里举的例子,我们可以看看在 Tailwind 中如何实现一样的效果。
首先是边距,Tailwind 本身已经自带了此类的样式 Class,并且可以自定义扩展。

如何在现有项目中无痛引入 Tailwind CSS