検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >ヘルパークラスを使用して、CSSを乾燥およびスケーリングします

ヘルパークラスを使用して、CSSを乾燥およびスケーリングします

Jennifer Aniston
Jennifer Anistonオリジナル
2025-02-25 19:47:15325ブラウズ

ヘルパークラスを使用して、CSSを乾燥およびスケーリングします

新しいWebプロジェクトを開始し、コードのスケーリングに役立つ新しいCSS方法論を探しています。 SMACS、BEM、およびその他の多くの同様の方法論など、モジュラーCSSを作成するための一連の技術が増えています。これらはすべて、オブジェクト指向のCSS（OCS）に基づいています。ご覧のとおり、CSSを書いて整理するためのテクニックがたくさんあります。 これらのすべての方法論に加えて、乾燥した

、繰り返しの少ないコードを書くのに役立つものがあります：ヘルパークラス（ユーティリティクラスとも呼ばれます）。

この概念は、Smashing Magazineに関するThierry Koblentzの記事でしばらく前に議論されましたが、ここで自分の言葉でこの方法を説明すると思いました。 キーテイクアウト

ヘルパークラス、またはユーティリティクラスは、HTML要素で繰り返し使用できる一連の抽象クラスを作成することにより、CSSの繰り返しを削除するのに役立ちます。これにより、将来の追加のためにコードがより再利用可能になり、スケーラブルになります。

ヘルパークラスは、1つの仕事をしてうまくやっている責任があります。新しいコンポーネントを作成するときは、いくつかのクラスを組み合わせてそれを構築する必要があります。

ヘルパークラスを使用して、マージンとパディング、幅と高さ、位置とZインデックスを管理し、要素、タイポグラフィ、色、リスト、境界、および表示値を調整できます。
    ヘルパークラスは、SASS以下のようなCSS前処理者と組み合わせて使用​​できるため、これらのクラスの作成と管理が容易になります。
  • ヘルパークラスは多くの利点を提供しますが、複数のクラスを単一の要素に適用する可能性があるため、HTML膨満感につながる可能性があります。これにより、HTMLコードが読み取りと維持が難しくなる可能性があります。
  • ヘルパークラスとは？
  • ヘルパークラスは、HTML要素で何度も使用できる一連の抽象クラスを作成することにより、繰り返しを削除するのに役立ちます。各ヘルパークラスは、1つの仕事をして、それをうまくやっている責任があります。これを行うと、将来追加される多くの機能に対してコードがより再利用可能でスケーラブルになります。したがって、新しいコンポーネントを作成したいときはいつでも、いくつかのクラスを組み合わせてそれを構築するだけです。
  • 「レゴのようなコードを扱います。コードを可能な限り小さな小さなブロックに分割します。」 - @csswizardry（@stubbornella経由）#btconf
    • - Smashing Magazine（@smashingmag）2013年5月ユーティリティクラスがどのように見えるか、どのように使用できるかの簡単な例を見てみましょう。コードの次のスニペットを見てください：

ここでは、新しいコンポーネントを構築するときに後で使用できる一連のCSSルールを作成しました。たとえば、一部のコンテンツを左に並べる場合は、テキスト左クラスを使用できます。同様に、左または右のクラスを使用して、必要な方向に要素を浮かせることができます。

内側のコンテンツが中心にある左側にある必要があるボックスの別の例を見てみましょう。

通常、このようなことをします：

この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クラスでこれを行う代わりに、他のヘルパークラスを使用できます。

グリッドシステムは、使用中のヘルパークラスの良い例です。財団のグリッドの例は次のとおりです 

<span><span>.box</span> {
</span>    <span>float: left;
</span>    <span>text-align: center;
</span><span>}</span>
Foundationは、さまざまな画面サイズの幅が異なるグリッドシステムを作成するために、一緒に使用して組み合わせることができる多数のクラスを提供します。この柔軟性は、グリッド自体の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クラスは、画面サイズに基づいて要素の幅を設定します。

.rowクラスは、列を保持するコンテナの幅を設定します。

.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>

および私たちのCSS：

<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：

<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>
しかし、フルハイトと呼ばれる1つのクラスでこれらすべてを減らすことができます：

以下は、上記で使用されているフルハイトクラスを含むいくつかの同様の例です。 
<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

<span><span><span><div</span> class<span>="contact-section"</span>></span>
</span>    <span><!-- Content here... -->
</span><span><span><span></div</span>></span></span>
位置に関連するプロパティをz-indexなどの他のプロパティと組み合わせて、複雑なレイアウトを作成できます。一連のクラスを作成して、ビューポートまたは祖先要素（右、左、左上など）に関連して要素の正確な位置を設定できます。

「ピン」ヘルパークラスは、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

複数のクラスを組み合わせることにより、必要な結果をコードを減らすことができます。内側の要素を右上に配置する場合は、ピンボトム右ではなくピントップ右を使用できます。上記のコードで気づいたかもしれません。別のヘルパークラスも追加しました。パディング1つのクラスは、要素がコンテナまたはビューポートの端に向かって洗い流されないようにします。

フローリング要素

左または右のフローティング要素は、左または右のクラスを使用して行うことができます。よく知られているClearFixクラスは、親要素でフロートをクリアするために使用できます。

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>
上記の要素は小さな画面に隠されていますが、より大きな画面に表示されます。

これらのクラスを使用して、タッチデバイスの要素を制御することもできます。

上記の例では、.Touchクラスは、Modernizr。 
<span><span><span><div</span> class<span>="right text-right"</span>></span>
</span><span><span><span></div</span>></span></span>
視認性クラスの良い例は、FoundationとBootstrapのレスポンシブな有効性のものです。

タイポグラフィ

タイポグラフィでは、Ellipsisテキストのようなフォントの重量やテキスト操作などのクラスを作成できます。

色
<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で変数を定義してみましょう：

変数に基づいて、ヘルパークラスを定義します。

色とバックグラウンドのヘルパークラスを使用する2つの良い例は、マップボックスとGoogle Webスターターキットプロジェクトにあります。 

<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>

UL要素から弾丸やパディングを取り除きたいと思ったのは何回ですか？ 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コードのスケーラビリティを向上させることができます。また、変更を1か所で行う必要があるため、メンテナンスと更新を容易にします。
CSSヘルパークラスを作成するにはどうすればよいですか？ StyleSheetでクラスを定義し、目的のプロパティと値を割り当てるだけです。たとえば、頻繁にテキストを集中する必要がある場合は、次のようなヘルパークラスを作成できます。その後、このクラスを任意のHTML要素に適用してテキストを中央に置くことができます。

単一の要素で複数のヘルパークラスを使用できますか？単一のHTML要素に。これにより、組み合わせごとに個別のクラスを作成することなく、さまざまなスタイルとエフェクトを組み合わせることができます。たとえば、テキストを中心にして色を変更するためのヘルパークラスがある場合、このような同じ要素で両方を使用できます。

CSSのヘルパークラスとユーティリティクラスの違いは何ですか？

「ヘルパークラス」と「ユーティリティクラス」という用語は、CSSのコンテキストでしばしば交換可能に使用されます。どちらも、特定の単一目的関数を提供するクラスを参照しています。ただし、一部の開発者は2つを区別しています。彼らの見解では、ヘルパークラスはより複雑で複数のプロパティを含む場合がありますが、ユーティリティクラスはより単純で、通常1つのプロパティのみが含まれています。ヘルパークラスは、CSSを書くときに生産性を大幅に向上させることができます。再利用可能なクラスで一般的なスタイルをカプセル化することにより、記述する必要があるコードの量を減らして、スタイルシートを管理しやすくすることができます。これにより、特に大規模なプロジェクトでは、多くの時間を節約できます。さらに、ヘルパークラスは、同じスタイルが異なる要素やコンポーネントにわたって同じ方法で適用されることを保証するため、設計の一貫性を維持するのに役立ちます。 >

ヘルパークラスには多くの利点がありますが、潜在的な欠点もあります。主な批判の1つは、単一の要素に複数のクラスを適用することになる可能性があるため、HTML肥大につながる可能性があるということです。これにより、HTMLコードが読み取りと維持を難しくすることができます。さらに、ヘルパークラスへの過度の依存は、クラスでセマンティックな意味の不足をもたらす可能性があり、他の開発者にとってスタイルシートを理解しにくくすることができます。 ？

はい、SASS以下のようなCSSプリプロセッサを備えたヘルパークラスを使用できます。実際、これらのツールにより、ヘルパークラスの作成と管理がさらに簡単になります。たとえば、SASSでは、引数を受け入れることができるヘルパークラスのようなミックスインを使用できます。これにより、より柔軟で再利用可能なスタイルを作成することができます。

ヘルパークラスを使用してCSSコードをスケーリングするにはどうすればよいですか？再利用可能なクラスで一般的なスタイルをカプセル化することにより、さまざまな要素やコンポーネントにこれらのスタイルを簡単に適用できます。これにより、コードの他の部分に影響を与えることなくスタイルを追加、削除、または変更できるため、コードがよりモジュール化され、スケーラブルになります。さらに、ヘルパークラスは、プロジェクトが成長するにつれて、デザインの一貫性を維持するのに役立ちます。

一般的に使用されるCSSヘルパークラスの例は何ですか？いくつかの例には、テキストアライメントのクラス（例：.text-center）、表示プロパティ（例：.dブロック）、マージンとパディング（例：.m-0または.p-0）、および可視性（例：。非表示または視界）。これらのクラスを使用して、同じCSSプロパティと値を何度も何度も書き込むことなく、一般的なスタイルをすばやく適用できます。 CSSヘルパークラスを整理するにはどうすればよいですか？

CSSヘルパークラスを整理するにはさまざまな方法があります。一般的なアプローチの1つは、機能によってグループ化することです。たとえば、タイポグラフィに関連するクラス用のスタイルシートの1つのセクション、レイアウトクラスなどの別のセクションを使用できます。別のアプローチは、各クラスの機能を示す命名規則を使用することです。たとえば、Bootstrapは、クラス名の最初の部分がプロパティ（たとえば、マージンの「M」など）を示し、2番目の部分が値（たとえば、0単位の「0」）を示し、命名規則を使用します。これにより、各クラスがその名前を見るだけで何をするかを簡単に理解できます。

以上がヘルパークラスを使用して、CSSを乾燥およびスケーリングしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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：そこにいた開発者からのアドバイス

関連記事

続きを見る