使用助手类干燥和扩展CSS

>您正在启动一个新的Web项目，并正在寻找一种新的CSS方法，该方法将帮助您扩展代码。提供了越来越多的用于编写模块化CSS的技术，包括SMACS，BEM和许多其他类似的方法，所有方法都是基于面向对象的CSS（OCS）的。如您所见，有很多编写和组织CSS的技术。>

除了所有这些方法外，还有一些可以帮助我们编写干燥

，重复的代码较少：助手类（也称为实用程序类）。 这个概念是在Thierry Koblentz上有关Smashing Magazine的文章中进行了讨论的，但我想我会用自己的话来解释这种方法。

钥匙要点

通过创建一组可以在HTML元素上反复使用的抽象类，可以通过创建一组抽象类来帮助删除CSS中的重复。这使得代码更加重复使用，可扩展以使以后的添加。

>

助手课程负责做一项工作并做得好。创建新组件时，您只需要将一些类组合在一起以构建它。

辅助类可用于管理边距和填充，宽度和高度，位置和z索引，对齐元素，版式，颜色，颜色，列表，边界和显示值。
• >
助手类可以与CSS预处理器（如SASS或更少）结合使用，从而更容易创建和管理这些类。
• >助手类提供许多好处，但它们可能导致HTML膨胀，因为您最终可能会将多个类应用于单个元素。这可能会使您的HTML代码更难读取和维护。
>
什么是助手类？
助手类可以通过创建一组可以在HTML元素上使用的抽象类来帮助消除重复。每个助手课程都负责做一份工作并做得很好。这样做将使您的代码更加重复使用，可扩展到将来会添加的许多功能。因此，每当您想创建一个新组件时，您只需要将一些类组合在一起即可构建它。

“将代码如乐高对待。将代码分解为最小的小块。” - @csswizardry（通过@stubbornella）#btconf

- Smashing Magazine（@smashingmag）2013年5月27日

>

>让我们看看一个简单的示例，说明什么实用程序类别以及如何使用它们。查看以下代码片段：

>在这里，我们创建了一组CSS规则，在构建新组件时，我们可以在以后使用这些规则。例如，如果您想对左边的某些内容对齐，则可以使用文本左类。同样，您可以使用左或右类以沿所需方向浮动元素。>

让我们看看一个需要以其内在内容为中心的框的框架的示例。

。

我们通常会做这样的事情：

>

<span><span>.left</span>        { float: left; }
</span><span><span>.right</span>       { float: right; }
</span>
<span><span>.text-left</span>   { text-align: left; }
</span><span><span>.text-right</span>  { text-align: right; }
</span><span><span>.text-center</span> { text-align: center; }</span>

>使用此CSS：

<span><span>.left</span>        { float: left; }
</span><span><span>.right</span>       { float: right; }
</span>
<span><span>.text-left</span>   { text-align: left; }
</span><span><span>.text-right</span>  { text-align: right; }
</span><span><span>.text-center</span> { text-align: center; }</span>

相反，我们可以使用可重复使用和单一责任的助手类来实现相同的事情：

<span><span><span><div</span> class<span>="box"</span>></span>
</span><span><span><span></div</span>></span></span>

请注意我如何删除框类，而是添加了我们的预定义的类，左文字中心。

如果要更改浮点并对齐方向，而不是在不可重用的.box类上进行此操作，则可以使用其他助手类：>

网格系统是使用辅助类别的一个很好的例子。这是Foundation网格的一个示例：

<span><span>.box</span> {
</span>    <span>float: left;
</span>    <span>text-align: center;
</span><span>}</span>

基础提供了许多可以使用和组合在一起的类，以创建一个具有不同宽度的网格系统，适合不同的屏幕尺寸。这种灵活性可帮助开发人员更快地创建新的自定义布局，而无需为网格本身编辑任何CSS。例如：

<span><span><span><div</span> class<span>="left text-center"</span>></span>
</span><span><span><span></div</span>></span></span>

> .small-2和.large-4类将根据屏幕大小设置元素的宽度。

• 。 .columns类设置填充物和浮子。
>现在您了解了什么是助手课程，让我们看一下可以添加到项目中的一些可重复使用的课程，以下面的不同类别介绍。还请注意，该示例将使用一些SASS变量，但自然不是必需的。
• 边缘和填充
边缘和填充物可能是我们CSS中最常用的特性。添加一些可以处理此操作的抽象类将使我们的代码干燥。

我们首先为我们的设计定义一个基本空间单元的变量（使用SASS）。让我们从1EM开始，最重要的是，我们可以为不同的空间尺寸创建类。>

我们可以选择简短的类名称，如BASSCSS

的下面的示例代码中

选择适合您和您的团队的方法。长名称显然会使您的HTML元素更大，但是与短名称相比，它们更可读，因此您可能需要查看您的CSS来弄清楚事物的工作原理。

宽度和高度

<span><span><span><div</span> class<span>="right text-right"</span>></span>
</span><span><span><span></div</span>></span></span>

想象您想在网站上的不同位置设置一个部分以使其全高。我们这样做的传统方式就是这样：

>

<span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="small-2 large-4 columns"</span>></span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="small-4 large-4 columns"</span>></span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="small-6 large-4 columns"</span>></span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

和我们的CSS：

对于其他部分，我们将重复代码：>

和CSS：

<span><span>$base-space-unit: 1em;</span>
</span>
<span>// Top margin
</span><span>.margin-top-none    { margin-top: 0; }
</span><span>.margin-top-quarter { margin-top: $base-space-unit / 4; }
</span><span>.margin-top-half    { margin-top: $base-space-unit / 2; }
</span><span>.margin-top-one     { margin-top: $base-space-unit; }
</span><span>.margin-top-two     { margin-top: $base-space-unit * 2; }
</span>
<span>// Top padding
</span><span>.padding-top-none    { padding-top: 0; }
</span><span>.padding-top-quarter { padding-top: $base-space-unit / 4; }
</span><span>.padding-top-half    { padding-top: $base-space-unit / 2; }
</span><span>.padding-top-one     { padding-top: $base-space-unit; }
</span><span>.padding-top-two     { padding-top: $base-space-unit * 2; }</span>

，但我们可以通过一个称为全高的类减少所有这些：

以下是一些类似的示例，包括上面使用的全高类：

<span><span>.m0</span>  { margin:        0 }
</span><span><span>.mt0</span> { margin-top:    0 }
</span><span><span>.mr0</span> { margin-right:  0 }
</span><span><span>.mb0</span> { margin-bottom: 0 }
</span><span><span>.ml0</span> { margin-left:   0 }</span>

>位置和z index

与位置相关的属性可以与其他属性（例如Z-Index创建复杂的布局）结合使用。我们可以创建一组类，以设置与视口或祖先元素相关的任何元素的确切位置（右，左，左上等）：

<span><span><span><div</span> class<span>="contact-section"</span>></span>
</span>    <span><!-- Content here... -->
</span><span><span><span></div</span>></span></span>

>

“ PIN”助手类是受Mapbox的CSS启发的。

>让我们扩展全高示例，以包含位于右下角的元素。

<span><span>.left</span>        { float: left; }
</span><span><span>.right</span>       { float: right; }
</span>
<span><span>.text-left</span>   { text-align: left; }
</span><span><span>.text-right</span>  { text-align: right; }
</span><span><span>.text-center</span> { text-align: center; }</span>

demo

通过组合多个类，我们可以在更少的代码中获得所需的结果。如果要将内部元素放置在右上角，则可以使用销钉右上方而不是销钉右右。您可能已经在上面的代码中注意到了我还添加了另一个辅助类别：填充一类可确保元素不会齐平与容器或视口的边缘齐平。

浮动元素

浮动元素可以使用左或右类完成左右或右侧。众所周知的clearfix类可以在父元素上使用以清除浮点，如下所示，使用SASS的父挑选器：

demo

<span><span><span><div</span> class<span>="box"</span>></span>
</span><span><span><span></div</span>></span></span>

对齐元素

我们可以使用基于对齐的辅助类别的类使文本和其他内容与任何方向保持一致：>

可见性类

<span><span>.box</span> {
</span>    <span>float: left;
</span>    <span>text-align: center;
</span><span>}</span>

可见性类控制元素的可见性，具体取决于屏幕尺寸，设备方向，触摸屏或其他因素。这些可以用响应式设计派上用场。

>

>我们可以在媒体查询中进行以下类：>

和我们的html：

>

<span><span><span><div</span> class<span>="left text-center"</span>></span>
</span><span><span><span></div</span>></span></span>

上面的元素将隐藏在小屏幕上，但在较大的屏幕上可以看到。

我们还可以使用这些类来控制触摸设备上的元素：>

<span><span><span><div</span> class<span>="right text-right"</span>></span>
</span><span><span><span></div</span>></span></span>

在上面的示例中，.touch类将来自添加到元素的类中。

可见性课程的一个很好的例子是基金会和自举的响应式实用。

版式

<span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="small-2 large-4 columns"</span>></span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="small-4 large-4 columns"</span>></span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="small-6 large-4 columns"</span>></span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

在排版中，您可以为字体重量和文本操纵等内容创建类，例如省略文字。

颜色

每个应用程序都有不同的指南和品牌规则，我们可以在本质上“皮肤”界面的课程中定义这些规则。这将包括文本颜色，背景等。

>

>让我们看看如何将其翻译成代码。首先，让我们用sass定义我们的变量：

<span><span>$base-space-unit: 1em;</span>
</span>
<span>// Top margin
</span><span>.margin-top-none    { margin-top: 0; }
</span><span>.margin-top-quarter { margin-top: $base-space-unit / 4; }
</span><span>.margin-top-half    { margin-top: $base-space-unit / 2; }
</span><span>.margin-top-one     { margin-top: $base-space-unit; }
</span><span>.margin-top-two     { margin-top: $base-space-unit * 2; }
</span>
<span>// Top padding
</span><span>.padding-top-none    { padding-top: 0; }
</span><span>.padding-top-quarter { padding-top: $base-space-unit / 4; }
</span><span>.padding-top-half    { padding-top: $base-space-unit / 2; }
</span><span>.padding-top-one     { padding-top: $base-space-unit; }
</span><span>.padding-top-two     { padding-top: $base-space-unit * 2; }</span>

然后，我们根据变量来定义辅助类别：

>

>在Mapbox和Google Web Starter套件项目中找到了使用颜色和背景辅助类别的两个好示例。

<span><span>.m0</span>  { margin:        0 }
</span><span><span>.mt0</span> { margin-top:    0 }
</span><span><span>.mr0</span> { margin-right:  0 }
</span><span><span>.mb0</span> { margin-bottom: 0 }
</span><span><span>.ml0</span> { margin-left:   0 }</span>

>另一种用例是通知组件。让我们看看我们如何通过背景辅助课程为此设计。

>

<span><span><span><div</span> class<span>="contact-section"</span>></span>
</span>    <span><!-- Content here... -->
</span><span><span><span></div</span>></span></span>

>列表

您想从UL元素中摆脱子弹和填充多少次？一个称为list-bare的类，如inuitcss所用，可以为您做。

>

<span><span>.left</span>        { float: left; }
</span><span><span>.right</span>       { float: right; }
</span>
<span><span>.text-left</span>   { text-align: left; }
</span><span><span>.text-right</span>  { text-align: right; }
</span><span><span>.text-center</span> { text-align: center; }</span>

边界

辅助类可用于将边界添加到一个元素中，无论是针对各个方面还是一侧。因此，您的CSS/SASS可能看起来像这样：

<span><span><span><div</span> class<span>="box"</span>></span>
</span><span><span><span></div</span>></span></span>

显示值

以下辅助类别使我们能够使用CSS的显示属性的不同值：

<span><span>.box</span> {
</span>    <span>float: left;
</span>    <span>text-align: center;
</span><span>}</span>

结论

遵循这一抽象原则可能与您习惯于创作CSS时的方法有很大不同。但是根据我的经验，我可以说这是您下一个项目的一个很好的方法。>

>您可以在我创建的名为CSS-Helpers的新库中查看此帖子中的所有辅助类别。

相关库链接

您可以学习并探索以下项目的结构：>

mapbox styleguide - base.css

• basscss
• >基础实用程序类
• > Bootstrap助手类
• Uikit实用程序类
进一步阅读

挑战CSS最佳实践

ACSS：重新思考CSS最佳实践
中等的CSS
• 经常询问有关使用助手课程干燥和缩放CSS
的问题

使用CSS助手类别有什么好处？他们促进了干燥（不要重复自己）原则，这是编程中的一个基本概念。通过使用助手类，您可以避免在样式表中重复相同的CSS属性和值。这不仅使您的代码清洁器更清洁，而且可以减少文件大小，从而导致加载时间更快。此外，可以在不同的元素和组件上重复使用辅助类，从而增强CSS代码的可扩展性。它们还可以促进更轻松的维护和更新，因为只需要在一个地方进行更改。

如何创建CSS辅助类别？

>创建CSS助手类是简单的。您只需在样式表中定义一个类，然后为其分配所需的属性和值。例如，如果您经常需要集中文本，则可以创建一个类似的助手类：

.center-text { text-align：center; }

}

然后，您可以将此类应用于任何HTML元素以将其文本中心。

>我可以在单个元素上使用多个辅助类吗？一个HTML元素。这使您可以组合不同的样式和效果，而无需为每种组合创建一个单独的类。例如，如果您有用于中心文本和更改其颜色的助手类，则可以在这样的同一元素上使用两者：

这是一些文本。

>

>在CSS中，辅助类别和实用程序类之间有什么区别？两者都指具有特定单用途函数的类。但是，一些开发人员在两者之间有所区别。在他们看来，辅助类更复杂，可能包含多个属性，而实用程序类更简单，通常只包含一个属性。

>

>我如何使用助手类来提高我的生产力？在编写CSS时，帮助人课可以显着提高您的生产力。通过将常见样式封装在可重复使用的类中，您可以减少编写所需的代码量，并使样式表更易于管理。这可以节省大量时间，尤其是在较大的项目上。此外，辅助课程可以帮助您保持设计的一致性，因为它们确保以相同的方式在不同元素和组件中使用相同的样式。

>是否有任何使用CSS助手类的缺点？ >

虽然辅助课程提供了许多好处，但它们也具有一些潜在的缺点。主要批评之一是它们可能导致HTML膨胀，因为您最终可能会将多个类应用于单个元素。这可以使您的HTML代码更难阅读和维护。此外，过度依赖辅助课程可能会导致课堂上缺乏语义含义，这可能会使您的样式表更难理解其他开发人员。

我可以使用CSS预处理程序（例如SASS）（例如SASS）（例如SASS）使用助手课程是的，是的，您可以使用CSS预处理器（如SASS）或更少的CSS预处理器使用辅助类。实际上，这些工具可以使创建和管理助手类更容易。例如，SASS允许您使用Mixins，就像可以接受参数的辅助类一样。这使您能够创建更灵活和可重复使用的样式。

>如何使用助手类来缩放我的CSS代码？

辅助类可以在扩展CSS代码方面起关键作用。通过在可重复使用的类中封装常见样式，您可以轻松地在不同的元素和组件上应用这些样式。这使您的代码更加模块化，可扩展，因为您可以添加，删除或修改样式而不会影响代码的其他部分。此外，随着项目的增长，辅助类可以帮助您保持设计的一致性。

>

>有哪些常用CSS助手类的示例是什么？一些示例包括用于文本对齐的类（例如.text-center），显示属性（例如.d-block），边距和填充（例如，.m-0或.p-0）和可见性（例如。隐藏或可见）。这些类可用于快速应用通用样式，而无需一遍又一遍地编写相同的CSS属性和值。

>

>如何组织CSS助手课程？一种常见的方法是按功能对它们进行分组。例如，您可以将样式表的一个部分用于与排版相关的类，另一个用于布局类，等等。另一种方法是使用指示每个类函数的命名约定。例如，Bootstrap使用命名约定，其中类名称的第一部分指示该属性（例如，余量为“ M”），第二部分表示值（例如0个单位的“ 0”）。这使得仅通过查看其名称就可以轻松理解每个班级的作用。

>

以上是使用助手类干燥和扩展CSS的详细内容。更多信息请关注PHP中文网其他相关文章！