Bonsai CSS-一个超轻量级实用优先的CSS框架

盆景CSS是一个超轻量级的、响应充分的、实用优先的框架。您只需轻松构建制作精美的Web界面即可。

当谈论CSS框架时，术语“实用程序”指的是将单个CSS属性应用于元素的CSS类。例如，类名.BG-GREEN将背景颜色：GREEN应用到该元素。构建“实用程序优先”框架的目的是将此实践作为在HTML文档中设置元素样式的主要方式，并为大多数更广泛使用的CSS属性提供实用程序。

实用程序优先CSS的概念并不新鲜，今天您会发现有很多实用程序优先框架可供选择。然而，盆景的独特之处在于这些实用程序是如何实现的。传统上，实用优先框架包括每个常见CSS属性/值组合的规则。这不仅会导致非常大的CSS文件大小，还意味着您只能使用框架开发人员定义的一定数量的属性/值组合。盆景CSS使用了一种不同的方法。相反，实用程序仅由属性定义，您作为开发人员定义该值。生成的CSS不仅是其大小的一小部分，而且您还可以完全访问每个属性的CSS规范。

其中相关实用程序可以有条件地应用于每种屏幕尺寸。这允许您将实用程序应用于特定的屏幕大小，使响应性设计就像在公园里散步一样。

默认情况下，根据最常见的设备分辨率设置了四个断点。

/*Small'；-sm'；*/@media(最小宽度：640px){。。。}/*MEDIUM'；-MD'；*/@MEDIA(最小宽度：768px){。。。}/*Large'；-lg'；*/@media(最小宽度：1024px){。。。}/*超大'；-xl'；*/@媒体(最小宽度：1280px){。。。}。

要将实用程序分配给设置的屏幕大小断点，只需在前面加上一个-，后跟断点简写名称。默认情况下，媒体查询使用移动优先的方法，听起来就是为最小的屏幕而设计的，而且是在往上走。

考虑以下示例，其中--d是display CSS属性的Bonsai实用程序。按钮默认为Disply：BLOCK。显示：中等大小屏幕以上无显示。