前端 CSS 经典:CSS 原子化

简介: 前端 CSS 经典:CSS 原子化

前言:前端有很多种 CSS 的解决方案,其中有 CSS Modules、BEM、CSS In Js、CSS 原子化。这章先理解下 CSS 原子化。

1. 什么是 CSS 原子化

提供一系列的助记词,用类名来代表样式。相当于用一两行定义一个类名,不能再分解了。这就叫 CSS 原子化。如下:

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

2. 好处

在样式上不会有重复代码。并且足够灵活适用于任何项目。我们后续写页面的时候,不用在 css 和 html 来回切换了。

3. 原子化工具

有哪些 CSS 原子化的工具呢。有 tailwind、windi、uno。目前最成熟的是 tailwind。

目录
相关文章
|
22天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
31 6
|
1月前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
28 4
|
2月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
239 1
|
3月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
64 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
3月前
|
前端开发
前端基础(九)_CSS的三大特征
本文详细解释了CSS的三大特性:层叠性、继承性和优先级,并通过实例演示了样式冲突、叠加和选择器优先级的应用。
33 2
前端基础(九)_CSS的三大特征
|
2月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
2月前
|
前端开发 UED 容器
前端技术分享:利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享:利用 CSS Grid 实现响应式布局
74 2
|
2月前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)2
【前端基础篇】CSS基础速通万字介绍(上篇)
26 2
|
2月前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)3
【前端基础篇】CSS基础速通万字介绍(上篇)
20 1
|
2月前
|
缓存 前端开发 JavaScript
【前端基础篇】CSS基础速通万字介绍(上篇)1
【前端基础篇】CSS基础速通万字介绍(上篇)
21 1