likes
comments
collection
share

给你一份全局样式表，帮你体验原子化css的魅力

作者站长头像
站长
· 阅读数 27

前言

不知道各位前端朋友有没有了解过原子化css。

原子化CSS是一种前端开发的方法论，它的目标是将样式属性拆分为最小的可重用单元。通过将样式规则分解为独立的类，开发人员可以更灵活地组合和应用这些类，以快速构建样式丰富的网页。

认识原子化css

简单例子

举个例子，假设我们有一个按钮样式，其中包括字体大小、背景颜色和边框样式。在传统的CSS方法中，我们可能会这样定义样式规则：

.button {
  font-size: 16px;
  background-color: #ff0000;
  border: 1px solid #000000;
}

而在原子化CSS中，我们会将这些样式属性拆分为独立的类，例如：

.font-size-16 {
  font-size: 16px;
}

.bg-red {
  background-color: #ff0000;
}

.border-1 {
  border: 1px solid #000000;
}

然后，我们可以根据需要组合这些类来定义按钮的样式，例如：

<button class="font-size-16 bg-red border-1">Click me</button>

通过这种方式，我们可以更灵活地调整按钮的样式。如果我们想要一个不同字体大小的按钮，只需要修改对应的类即可，而不需要修改整个样式规则。

此外，原子化CSS还可以通过类的组合来创建更复杂的样式。例如，我们可以定义一个类来表示圆角边框样式：

.rounded-border {
  border-radius: 5px;
}

然后，通过组合类，我们可以轻松地创建一个具有圆角边框的按钮：

<button class="font-size-16 bg-red border-1 rounded-border">Click me</button>

这种方法使得样式的修改和调整变得非常简单，而不需要繁琐地修改整个样式规则。

而且开发者可以一目了然的知道当前标签使用了什么样式，整个html结构会更可读性，更规范，对于自定义的class的内容，可以使其更贴近业务，无需反复编写重复性的css。

使用前景

目前原子化css 在国外的项目使用中是比较频繁的，甚至曾经有朋友在接国外的项目时要求必须使用这种风格，目前本人维护的项目也在采用这种风格编写，确实会使得开发体验得到提升。

当前前端生态中也有比较成熟的原子化css框架：

  1. Tailwind CSS：Tailwind CSS是一个高度可定制的CSS框架，它使用原子化类来构建样式，使得样式的编写和修改变得更加简单。
  2. Tachyons：Tachyons是一个轻量级的CSS框架，它使用原子化类来定义样式，使得样式的编写和修改变得更加容易。
  3. Atomic CSS：Atomic CSS是一个基于原子化类的CSS框架，它使用单一的类来定义样式，使得样式的编写和修改变得更加简单。

问题和解决思路

问题

目前我参与的工程大大小小也有几十个了，实际上有使用到这种思路的项目并没有几个，可能是因为其具有一定的学习成本，也可能是因为大部分项目都会使用scss这种预处理器，开发者可能会觉得单独去使用这种框架是对项目的一种负担，或者是这种思路本身不适合当前项目的环境。

解决思路

我最近也遇到了这种问题，因为目前负责的项目都是很久之前就完成好的用的是scss，单独在项目中引入原子化css框架，有点大材小用，而且也不清楚能不能贴合业务。

因此我决定结合业务抽离常见的样式，提供一份完整的全局样式表，集成到公司的脚手架中。

使得后续的开发也能体验到原子化css的魅力。

全局css样式表

这里是我总结目前开发以来使用较多的css全局样式表（内容较多，感兴趣的小伙伴可以按模块细分）

朋友们可以将该样式表作为全局样式导入，业务侧编写样式时可以先从全局样式表中匹配是否有符合的，这样就可以通过一份全局样式表，去体验原子化css的魅力

后续的开发就可以借助全局样式表去编写，例如：

<div class="mr30 flex-center">
    <p class="f-20"></p>
    <p class="f-12"></p>
</div>

开发同学在编程的时候基本上就是所见即所得，可以快速提高开发效率和体验。

核心文件

/* Margin */
.mr30 {
  margin-right: 30px;
}
.mr20 {
  margin-right: 20px;
}
.mr15 {
  margin-right: 15px;
}
.mr10 {
  margin-right: 10px;
}
.mr5 {
  margin-right: 5px;
}
.mt30 {
  margin-top: 30px;
}
.mt20 {
  margin-top: 20px;
}
.mt15 {
  margin-top: 15px;
}
.mt10 {
  margin-top: 10px;
}
.mt5 {
  margin-top: 5px;
}
.ml30 {
  margin-left: 30px;
}
.ml20 {
  margin-left: 20px;
}
.ml15 {
  margin-left: 15px;
}
.ml10 {
  margin-left: 10px;
}
.ml5 {
  margin-left: 5px;
}
.mb15 {
  margin-bottom: 15px;
}
.mb30 {
  margin-bottom: 30px;
}
.mb20 {
  margin-bottom: 20px;
}
.mb10 {
  margin-bottom: 10px;
}
.mb5 {
  margin-bottom: 5px;
}

/* Padding */
.pr30 {
  padding-right: 30px;
}
.pr20 {
  padding-right: 20px;
}
.pr15 {
  padding-right: 15px;
}
.pr10 {
  padding-right: 10px;
}
.pr5 {
  padding-right: 5px;
}
.pt30 {
  padding-top: 30px;
}
.pt20 {
  padding-top: 20px;
}
.pt15 {
  padding-top: 15px;
}
.pt10 {
  padding-top: 10px;
}
.pt5 {
  padding-top: 5px;
}
.pl30 {
  padding-left: 30px;
}
.pl20 {
  padding-left: 20px;
}
.pl15 {
  padding-left: 15px;
}
.pl10 {
  padding-left: 10px;
}
.pl5 {
  padding-left: 5px;
}
.pb30 {
  padding-bottom: 30px;
}
.pb20 {
  padding-bottom: 20px;
}
.pb15 {
  padding-bottom: 15px;
}
.pb10 {
  padding-bottom: 10px;
}
.pb5 {
  padding-bottom: 5px;
}



/* 宽度 */
.w-auto {
  width: auto;
}
.w-100 {
  width: 100%;
}
.w-50 {
  width: 50%;
}
.w-25 {
  width: 25%;
}
.w-75 {
  width: 75%;
}
.w-200 {
  width: 200px;
}
.w-300 {
  width: 300px;
}
.w-400 {
  width: 400px;
}
.w-500 {
  width: 500px;
}
.w-600 {
  width: 600px;
}
.w-700 {
  width: 700px;
}
.w-800 {
  width: 800px;
}
.w-900 {
  width: 900px;
}
.w-1000 {
  width: 1000px;
}

/* 高度 */
.h-auto {
  height: auto;
}
.h-100 {
  height: 100%;
}
.h-50 {
  height: 50%;
}
.h-25 {
  height: 25%;
}
.h-75 {
  height: 75%;
}
.h-200 {
  height: 200px;
}
.h-300 {
  height: 300px;
}
.h-400 {
  height: 400px;
}
.h-500 {
  height: 500px;
}
.h-600 {
  height: 600px;
}
.h-700 {
  height: 700px;
}
.h-800 {
  height: 800px;
}
.h-900 {
  height: 900px;
}
.h-1000 {
  height: 1000px;
}

/* 字体大小 */
.f-12 {
  font-size: 12px;
}
.f-14 {
  font-size: 14px;
}
.f-16 {
  font-size: 16px;
}
.f-18 {
  font-size: 18px;
}
.f-20 {
  font-size: 20px;
}

/* 字体自重 */
.fw-100 {
  font-weight: 100;
}
.fw-200 {
  font-weight: 200;
}
.fw-300 {
  font-weight: 300;
}
.fw-400 {
  font-weight: 400;
}
.fw-500 {
  font-weight: 500;
}
.fw-600 {
  font-weight: 600;
}
.fw-700 {
  font-weight: 700;
}
.fw-800 {
  font-weight: 800;
}

/* 字体样式 */
.f-bold {
  font-weight: bold;
}
.f-italic {
  font-style: italic;
}

/* 文本颜色 */
.color-primary {
  color: #007bff;
}
.color-secondary {
  color: #6c757d;
}
.color-success {
  color: #28a745;
}
.color-danger {
  color: #dc3545;
}
.color-dark {
  color: #343a40;
}

/* 文本大小写转换 */
.text-uppercase {
  text-transform: uppercase;
}
.text-lowercase {
  text-transform: lowercase;
}
.text-capitalize {
  text-transform: capitalize;
}

/* 禁止文本换行 */
.text-no-wrap {
  white-space: nowrap;
}


/* 文本对齐和行高 */
.text-c {
  text-align: center;
}
.text-l {
  text-align: left;
}
.text-r {
  text-align: right;
}
.text-justify {
  text-align: justify;
}
.line-height-normal {
  line-height: normal;
}
.line-height-1 {
  line-height: 1;
}
.line-height-15 {
  line-height: 1.5;
}
.line-height-2 {
  line-height: 2;
}

/* 禁止文本换行 */
.text-no-wrap {
  white-space: nowrap;
}

/* 清除文本样式 */
.text-reset {
  all: unset;
}

/* 文本省略号 */
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 文本加粗 */
.text-bold {
  font-weight: bold;
}

/* 文本斜体 */
.text-italic {
  font-style: italic;
}

/* 文本下划线 */
.text-underline {
  text-decoration: underline;
}

/* 文本加上划线 */
.text-overline {
  text-decoration: overline;
}

/* 文本删除线 */
.text-strikethrough {
  text-decoration: line-through;
}

/* 文本下沉效果 */
.text-sink {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* 文本浮起效果 */
.text-float {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* 文本旋转 */
.text-rotate-45 {
  transform: rotate(45deg);
}
.text-rotate-90 {
  transform: rotate(90deg);
}
.text-rotate-180 {
  transform: rotate(180deg);
}

/* 背景颜色 */
.bg-primary {
  background-color: #007bff;
}
.bg-secondary {
  background-color: #6c757d;
}
.bg-success {
  background-color: #28a745;
}
.bg-danger {
  background-color: #dc3545;
}
.bg-dark {
  background-color: #343a40;
}

/* 透明背景 */
.bg-transparent {
  background-color: transparent;
}

/* 边框样式 */
.border-solid {
  border-style: solid;
}
.border-dashed {
  border-style: dashed;
}
.border-dotted {
  border-style: dotted;
}
.border-none {
  border: none;
}

/* 圆角边框 */
.border-rounded {
  border-radius: 5px;
}
.border-circle {
  border-radius: 50%;
}


/* 阴影效果 */
.shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.shadow-lg {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.shadow-none {
  box-shadow: none;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .hide-sm {
    display: none;
  }
}
@media (min-width: 769px) and (max-width: 992px) {
  .hide-md {
    display: none;
  }
}
@media (min-width: 993px) and (max-width: 1200px) {
  .hide-lg {
    display: none;
  }
}

/* 盒子模型 */
.box-border {
  box-sizing: border-box;
}
.box-content {
  box-sizing: content-box;
}

/* 浮动 */
.float-l {
  float: left;
}
.float-r {
  float: right;
}

/* 清除浮动 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* 定位 */
.position-r {
  position: relative;
}
.position-a {
  position: absolute;
}
.position-f {
  position: fixed;
}

/* 光标样式 */
.pointer {
  cursor: pointer;
}

/* 透明度 */
.opacity-50 {
  opacity: 0.5;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-100 {
  opacity: 1;
}

/* 响应式图片 */
.img-responsive {
  max-width: 100%;
  height: auto;
}

/* 图片圆角 */
.img-rounded {
  border-radius: 50%;
}

/* 图片灰度效果 */
.img-grayscale {
  filter: grayscale(100%);
}

/* 图片模糊效果 */
.img-blur {
  filter: blur(5px);
}

/* 图片透明度 */
.img-opacity-50 {
  opacity: 0.5;
}

/* Flex布局 */
.flex {
  display: flex;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-grow {
  flex-grow: 1;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.justify-center {
  display: flex;
  justify-content: center;
}
.justify-between {
  display: flex;
  justify-content: space-between;
}
.align-center {
  display: flex;
  align-items: center;
}
.align-start {
  display: flex;
  align-items: flex-start;
}
.align-end {
  display: flex;
  align-items: flex-end;
}

/* overflow */
.o-hidden {
  overflow: hidden;
}
.o-auto {
  overflow: auto;
}
.o-scroll {
  overflow: scroll;
}
.o-x-hidden {
  overflow-x: hidden;
}
.o-x-auto {
  overflow-x: auto;
}
.o-x-scroll {
  overflow-x: scroll;
}
.o-y-hidden {
  overflow-y: hidden;
}
.o-y-auto {
  overflow-y: auto;
}
.o-y-scroll {
  overflow-y: scroll;
}

/* 隐藏滚动条 */
.hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* 禁用用户选择 */
.disable-select {
  user-select: none;
}

/* 禁用鼠标事件 */
.disable-mouse-event {
  pointer-events: none;
}

/* 禁用元素 */
.disable-element {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

/* 清除默认样式 */
.clear-default-style {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

/* 不可选中 */
.unselectable {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* 滚动动画 */
.scroll-animation {
  scroll-behavior: smooth;
}

总结

文章到这里就结束了，上述的全局样式表，属于本人的归纳总结，各位朋友使用时请根据自身的业务常见去改造。

衷心希望各位朋友可以在这篇文章中找到自己想要的东西，让自己的技术——芝麻开花节节高。

感谢！