前言
在前端开发中，样式是不可或缺的一部分。在如此复杂的网页结构中，如何优雅地处理样式是前端工程师需要思考的难题。如果您认同这一观点，那么您一定需要看一下本篇文章。
本文将介绍一个非常小巧、灵活且易于使用的npm包——picostyle，此包的体积仅有２KB，可以让你更加方便地组织和编写css样式。
Picostyle简介
Picostyle是一个基于function的css in js库。使用它，你可以像React中的写行内Style一样使用JavaScript来编写css，以取代传统的css文件。
Picostyle的官方网站为：https://cssinjs.org/picostyle
安装
使用npm安装picostyle：
npm install picostyle
如何使用
在使用picostyle之前，我们先引入它的库文件，一般都放在入口文件中：
// import the library
import { h, createStyle } from 'picostyle';
// create a stylesheet tag
const sheet = createStyle();
// attach the tag to the document
document.head.appendChild(sheet);这里有两个重要的函数：h和createStyle。
h
h是Vue，React等框架产生的虚拟化DOM架构，意思是如同React元素一样的虚拟元素，用于替代创建真实具体的DOM，最后统一渲染。
createStyle
用于创建样式表的函数。
接下来我们可以编写我们自己的css样式了：
-- -------------------- ---- -------
----- --- - ----------
------- ---
-------- ---
---------------- -------
---
----- ------ - -------------
---------------- ----------
------ -------
------- -------
------------- --
-------- ---- ------
---------- -
---------------- ----------
------- ----------
--
---我们现在已经定义了两个组件：Box和Button，它们可以像这样子渲染：
-- -------------------- ---- -------
------ - -- ----------- - ---- ------------
----- ----- - --------------
---------------------------------
----- ------ - -
---- -
------- ---
-------- ---
---------------- -------
--
------- -
---------------- ----------
------ -------
------- -------
------------- --
-------- ---- ------
---------- -
---------------- ----------
------- ----------
-
-
--
----- --- - -- -- -
---------- ---------- ----- --
-------- ---------- ----- -- ------ ---------
----------- ---------- -------- -- ------ ------
-
--
---------------------
请注意，这些类名（例如：‘box’ or ‘button’）仅限于Javascript中，并不会被渲染到HTML中。
运行这个代码片段可以看到，这是一个非常简单的开端。您可以通过JavaScript操作HTML元素，并将CSS属性用作JavaScript对象的键。
使用示例
在这个例子中，我们创建了一个简单的组件，它显示了一个框框里的输入框和按钮。
-- -------------------- ---- -------
------ - -- ----------- - ---- ------------
----- ----- - --------------
---------------------------------
----- ------ - -
---------- -
-------- -------
--------------- ---------
----------- ---------
------- --------
----------- ---------- ------
----------- -------
--
--------- -
-------- -------
-------------- ---------
------- ---- ----- ------
------------- --
-------- ---
--------- ----
--------- ----
--
------ -
------- ---- ----- ------
------------- --
-------- --
-------- -------
--
------- -
---------- ---
-------- ---- ------
---------------- ----------
------ -------
------- -------
------------- --
------- ----------
--
--
-- --- --- ---------
----- --- - -- -- -
----- ------- --------- - -------------------
----- ------------ - ------- -- -
-----------------------------
--
----- ----------- - -- -- -
------------- --- ----------- -----------
-------------
--
------ -------- - ---------- ----------- --
-------- - ---------- ---------- --
------- ----- ------ ---- -------
---------- -
---------- --------
----- -------
----------- ------
------
--------- -------------
---
----------- - ---------- --------- -------- ----------- -- ---------
-
-
--
---------------------
-- ------ --- ----
----------------------- ---------------------------------总结
当你使用picostyle时，你会发现你的代码变得更加工整、可维护性更好，并且有着更好的灵活度和可扩展性。
总的来说，picostyle是一个非常好的工具，可以让你的应用程序开发更加卓有成效。希望这篇文章可以对你有所帮助，谢谢你的阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006725f3660cf7123b36436