酷CSS框架
切换作业和启动一堆侧面项目之间，我发现自己在过去的一年里重新编写了很多CSS。我想，如果我可以在任何项目上写下一个CSS框架并在任何项目上使用它？ Cool.css是我尝试这样做的事情。
Dave Rupert曾经主张针对每个客户的小型举动，这是困扰着我的东西。为什么要使用一个CSS框架，＆＃39; s将添加一堆＆＃39;重新无法使用，并要求自定义和覆盖特定于您需求的一系列新风格？
这就是为什么我＆＃39; Ve为每个项目制作的自定义CSS框架，包括Groupon的三个CSS框架，为他们的消费者，商家和内部工具产品。
作为i＆＃39; ve更深入地进入设计系统工作，我希望a支持使用CSS框架的那些系统：
每个新的框架我多年来建立在艰苦的经验教训中，从最后吸取了一段时间。一如既往地躲在我的最大问题之一是，无论我做出框架有多好，开发人员都会在框架之上建立自己的风格，以不同程度的成功。
最终我的过程进化到自己的方法，将SMACC，原子设计，尾风和立方体CSS的部分结合在一起，进入了一些我想要的东西的东西。
在任何上下文中都使用各个组件，并使用实用风格组成更大的组件。
这些单一目的类允许您以任何数量的方式撰写多个组件，而无需重新声明不同的上下文。
不是使用通用12列网格，提供了多个预定义的布局（使用CSS网格），可用于组织内容页面。
许多框架将样式直接适用于HTML元素，如＆lt; body＆gt ;.如果您开始新的项目，这是罚款，但如果您＆＃39;重新进入现有项目，介绍框架会导致与这些样式的冲突。
COOL.css有一个$前缀令牌，＆＃39; s附加到框架中的每个选择器。否则将直接添加到元素的样式，而是在全局类中播放，。＃{$前缀} -Styles。 （$前缀的默认值为＆＃34; cool＆＃34;，所以.cool-styles）您可以将此类应用于身体，或者如果＆＃39;慢慢将框架慢慢向现有网站介绍，您可以将其添加到要使用该框架的父容器中。
像CSS重置或ranalize.css一样重置非常适合在所有浏览器上显示相同的东西，但通常要求您重新redeclare为每个元素的基本样式。除此之外，浏览器多年来一直改善了他们严格地拍摄的地点。
此外，Cool.css重置利润率和（某些）填充默认值。例如，在标题元素上具有默认边距，通常需要开发人员在不同的上下文中覆盖余量。相反，Cool.css鼓励使用实用程序来控制元素之间的边距。
COOL.css还为继承的字体属性设置为继承。这鼓励开发人员使用该框架选择单语义上选择元素，并使用类来应用视觉样式，而不是选择＆lt; h2＆gt;因为它与＆＃39; s视觉上大于＆lt; h3＆gt;。
尾风等纯净框架具有它们的优点。但是，我有两个问题。
它们抵消了从CSS到HTML的视觉样式的组成。在CSS之前，我们的HTML属性数量有限，允许我们将视觉样式添加到元素。当CSS周围时，周围的整个运动＆＃34;关注的分离＆＃34;实用框架基本上将我们带回那个在标记中宣布所有视觉样式的时间，只能在CSS中定制这些样式而不是将其留给浏览器。它不会让开发人员更容易让网站看起来像设计师给他们的网站的图片。
他们让你结合任何数量的样式。设计系统需要一致的视觉风格之间的精细平衡，并允许灵活地设计新功能。我们不想要的是开发人员（或设计师，因为那些物质），在调色板中使用颜色的任何颜色组合，用于文本，背景，边框等。
Cool.css具有许多有用的实用类别，但它们更少地对称为默认风格的变化或将这些组分安排成较大分子/生物的变化，它们更少。
目标是您应该能够构建任何设计，而无需添加其他样式。
有趣的事实：CSS中的C代表级联。像BEM这样的方法，以封装样式，通常会导致具有过于特定的选择器和许多冗余样式声明。
例如，拍摄卡组件。它很常见，看起来像：
这一切都是必要的吗？标题的风格是否必须被视为卡？或者我们可以使用.card定义容器并使用它内部的更通用，可重复使用的风格？
通过限制我们在不同上下文中声明相同样式的频率，我们可以大大减少设计新产品功能和复杂组件所需的CSS和标记量。
CSS框架已使12列网格普遍存在。这些网格始于模仿印刷设计的愿望。但我们不是瑞士现代主义者，我们＆＃39;重新制作网站，y＆＃39;所有。
这些网格系统允许您以任何组合组成元素，但通常使用一半或季度，或者将多个元素划分在可用空间上。你不需要网格系统的开销。
Cool.css包括用于组件的简单Flexbox和网格布局的实用类，以及页面的常见响应布局模式。还记得圣杯布局吗？那个＆＃39;在那里的90％的页面。你不需要一个12柱网格系统来制作。
全局令牌包括系统中的所有可能值。颜色调色板，型刻度，间距等等，如果我们想更改我们品牌颜色的价值，我们可以在此处执行此操作，它将在使用令牌的任何地方都会改变。
上下文令牌描述了如何使用全局令牌。它们包括跨多个组件使用的通用值，例如$ COLORE-BORTHTRE-BRAND。上下文令牌允许我们在多个组件中从一个全局令牌值更改为另一个组件。组件令牌是特定于单个组件的值，并且可以指向上下文令牌，全局令牌或甚至一次性值。组件令牌允许我们对单个组件进行更改 - 更改从绿色到蓝色的CTA按钮的背景颜色 - 而无需编辑任何CSS。
Cool.css是用SASS构建的，但您不一定必须使用SASS来使用Cool.css。您可以轻松地将编译的CSS添加到任何项目中。
我曾经与CSS斗争的这么多开发商合作。多年来，在建立定制CSS框架的多年来，用于不同项目和公司的方法，帮助加速了从概念到生产的想法的过程。
Devs喜欢它，因为它大大减少了他们花费CSS的时间。
设计师喜欢它，因为成品最终看起来像他们的设计，这又有很多来回。
管理者和其他利益相关者喜欢它，因为它释放了他们的团队，专注于他们的东西＆＃39;再善于。
Cool.css并不意味着与框架等框架竞争，例如盗版或尾风。它主要是一个工具，让我在项目之间快速港口普通模式，并使它们在视觉上与设计令牌不同。如果您从框架中获取一些使用或酷方法的想法，我喜欢听到它。如果你有建设性的反馈我＆＃39; D也很乐意听到它！
