前言
在前端开发中，CSS 的重要性是不言而喻的。然而，CSS 的语法繁琐、细节繁琐，很多时候会让开发者感到十分烦恼。因此，很多轮子出现了。今天我们要介绍的就是一款优秀的 npm 轮子：cherry-css。它以简单、易用、轻量化著称，受到很多开发者的喜爱。想要了解更多的话，请继续阅读本文！
安装
如果你已经有了一个 npm 项目，那么安装 cherry-css 会非常简单。只需要在终端中输入以下命令即可：
npm install cherry-css
如果你还没有一个 npm 项目，那么可以通过以下命令初始化一个：
npm init
使用
安装完 cherry-css 之后，我们就可以在 JavaScript 中调用它了。具体做法如下：
import 'cherry-css';
在这一点上，cherry-css 与其他 CSS 框架的使用是一样的。
接下来，我们来介绍一下这个框架的主要功能。
栅格系统
在一个网站中，栅格系统是一个基本的需求。cherry-css 提供了一个十分简化的栅格系统。首先，我们需要在 HTML 中建立一个二维网格，即“行”和“列”。行用一个div容器来表示，而列则是在行中使用column类定位的div元素。具体范例如下：
<div class="row"> <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> </div>
如上所示，我们将三个列放在一个行中。此时，默认情况下，每个列将等宽布局。如果我们想要让第一个列占据一半的宽度、第二个列占据四分之一的宽度，第三个列占据四分之一的宽度，可以在 HTML 中这样写：
<div class="row"> <div class="column col-6">1</div> <div class="column col-3">2</div> <div class="column col-3">3</div> </div>
其中，col-6表示第一个列占用 6 个格子，col-3表示第二个和第三个列各占用 3 个格子。
响应式设计
在移动设备上，网页的尺寸和排版需要做一些适应性调整，这就需要进行响应式设计。cherry-css 提供了一些十分方便的工具类，可以帮助我们创建响应式的设计。
首先，我们来了解一下如何使用 cherry-css 来创建响应式图像。当屏幕的宽度小于 768 像素时，我们想要展示一个小图标，而当屏幕宽度大于 768 像素时，则展示一个大图标。我们可以这样写：
<img class="img-responsive"
srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"
src="large.jpg"
alt="Responsive image">其中，srcset属性指定了各种不同尺寸的图像文件，src则指定了默认情况下需要展示哪个图像。
此外，我们还可以通过 chery-css 来控制元素在不同屏幕大小下的显示和隐藏。例如，下面的代码将在屏幕宽度小于 576 像素时，隐藏一个元素：
<div class="d-none d-sm-block">这是一个区块</div>
在屏幕宽度大于等于 576 像素时，这个区块将会显示出来。
主题颜色
cherry-css 的主题颜色非常丰富，我们可以通过调用相应的类来改变元素的颜色。例如，我们可以用以下语句将文本字体颜色设定为红色：
<p class="text-danger">红色文本</p>
除了为文本设置颜色，我们还可以设置元素的背景颜色。例如，我们可以为一个区块设置灰色背景：
<div class="bg-secondary">这是一个灰色区块</div>
当然，要想使用这些类，我们必须引入 cherry-css 的 CSS 文件。具体方法见使用部分。
支持的浏览器
cherry-css 的支持的浏览器非常广泛，我们可以在所有主流的现代浏览器中使用它。具体来说，支持的浏览器版本如下：
- Chrome（最新版）
- Edge（最新版）
- Firefox（最新版）
- Safari（最新版）
- iOS Safari 8+
- Android （Chrome 上）43+
总结
通过本文，我们了解了在前端类网站开发中如何使用 cherry-css，包括栅格系统、响应式设计和主题颜色。这些功能虽然简化了我们的代码写作，但它们并不只是简单的语法糖。实际上，它们都有着深刻的设计思想和技术实现。学习和使用这些功能，不仅可以提高代码的可读性，还可以让我们更好地理解并掌握网页排版、响应式设计和各种技术细节。如果你还没来得及尝试使用 cherry-css，不妨试一试！它可能会让开发工作变得更加顺利和愉快。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562a581e8991b448dfe11