搜尋

首頁 >web前端 >css教學 >使用助手類乾燥和擴展CSS

使用助手類乾燥和擴展CSS

Jennifer Aniston
Jennifer Aniston原創
2025-02-25 19:47:15319瀏覽

使用助手類乾燥和擴展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>

>列表使用助手類乾燥和擴展CSS

您想從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中文網其他相關文章！

css bootstrap less html sass edge Float Object define if for while include break using class Interface Property number function this display position margin padding viewport background ul Foundation Other
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：BEM和SMACSS：來自那裡的開發人員的建議下一篇：BEM和SMACSS：來自那裡的開發人員的建議

相關文章

看更多