在前端开发中，CSS 的样式设计与排版非常重要，能够使网页的呈现美观而有条理，提升用户体验。但是从头开始编写 CSS 样式的工作量较大，而且很多时候我们需要使用到一些常见的 CSS 类，例如清除浮动、垂直居中、灵活布局等等，如果每次都要手写，势必会增加我们的工作复杂度，降低我们的效率。在这种情况下，使用一些常用的 CSS 工具库会提高我们的开发效率，减少一些不必要的重复劳动。
本篇文章介绍一款 CSS 工具库 —— cake-css，它以简洁、高效、易用的特点受到许多前端工程师的欢迎。Cake CSS 提供了一套由简到繁、完整而不失灵活的浅色主题集合和一套强大的 CSS 工具库，同时还提供了一些丰富的布局样式。本文将为大家介绍 cake-css 的使用方法及其常用功能。
安装 cake-css
要使用 cake-css，你首先需要在你的项目中安装它。cake-css 是一个 npm 包，所以你可以通过 npm 来安装。
使用 npm 安装 cake-css：
npm install cake-css
如果你使用的是 yarn 包管理，可以使用如下命令安装:
yarn add cake-css
使用 cake-css 样式
安装好 cake-css 后，我们可以在 HTML 代码中引入它提供的 CSS 样式，这里给出一个简单的示例。
先在 HTML 文件中引入 CSS 文件:
<link rel="stylesheet" href="node_modules/cake-css/dist/cake.min.css" />
然后在 HTML 某个元素的 class 属性中使用已经定义好的 CSS 类，如下示例：
<div class="flex flex-center">
<p>Hello, Cake CSS!</p>
</div>以上代码中，我们使用了 cake-css 提供的 flex 和 flex-center 两个类来让文本内容处于其父元素水平、垂直居中的位置。
此外，cake-css 还提供了许多常用的 CSS 类，这里列出一些常用的类及其作用：
clearfix：清除浮动flex：使用 flexbox 进行布局flex-center：使元素水平、垂直平齐hide：隐藏元素text-center：将文字内容居中对齐block：将元素设置为块级元素inline-block：将元素设置为内联块元素visually-hidden：可视隐藏，也就是只让屏幕阅读器读取元素内容，但不在页面上显示出来sr-only：屏幕阅读器隐藏，只会读取元素内容，而不会在页面上显示出来
实例演示
这里提供一个简单的实例来展示 cake-css 的运用。我们使用 cake-css 来实现一个导航栏以及一个卡片式布局的页面。
先看一下页面效果：
HTML 代码实现：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- --- ----------
----- ---------------- -----------------------------------------------
-------
---- -
------------ ---------- ------ -----------
---------- -----
------- --
-------- --
-
------- -
----------------- --------
-------- -----
------ -----
-
---------- -
---------- ------
------- - -----
-------- ---- -----
-
----- -
------- --- ----- -----
-------------- ----
----------- - --- --- ------- -- -- ----
-------- -----
----------------- -----
-
----------- -
-------------- -----
-
----------- --- -
---------- -----
------- -----
-
----------- -
---------- -----
------------ -----
-------------- -----
-
---------- -
-------------- -----
-
---------- -
------ --------
---------------- -----
-
--------
-------
------
------- ----------- --------------------
-------- --- -------
---------
---- ------------------
-------- ---- --- ---------
----------------------------------------
---- ---- -- ---
---- ----------- -----------
---- ------------ -------- ----------
---- -------------
---- -------------------
---- -------------------------------------------- --
------
--- ---------------------------------
-- --------------------- ------- -------------------------------
-- -------- --------------------------
------
------
---- ------------ -------- ----------
---- -------------
---- -------------------
---- -------------------------------------------- --
------
--- ---------------------------------
-- --------------------- ------- -------------------------------
-- -------- --------------------------
------
------
---- ------------ -------- ----------
---- -------------
---- -------------------
---- -------------------------------------------- --
------
--- ---------------------------------
-- --------------------- ------- -------------------------------
-- -------- --------------------------
------
------
---- ------------ -------- ----------
---- -------------
---- -------------------
---- -------------------------------------------- --
------
--- ---------------------------------
-- --------------------- ------- -------------------------------
-- -------- --------------------------
------
------
------
------
-------
-------以上代码中，通过外部引用 cake-css 样式文件并使用了其中的 flex，text-center 等 class 类将页面布局以及每个组件的样式设置好。
总结
通过本篇文章的介绍，我们了解了 npm 包 cake-css 的安装和使用方法，以及一些常用的 CSS 类及其作用，同时还通过实例演示了 cake-css 常见的布局样式。
当然，以上仅仅是 cake-css 的一些基本用法，cake-css 还有更多高级的功能和使用方法，需要读者自己动手实践并通过文档进行学习。 无论如何，使用 cake-css 可以大大地提高我们的前端开发效率，使得我们更加专注于业务逻辑的实现。希望本文对各位读者有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601281e8991b448de0b9