適切に拡張できる一貫性のある読みやすいCSSを作成することは、困難なプロセスです。特に、スタイルシートが大きくなり、複雑になり、保守が難しくなっている場合。開発者がより良いCSSを作成するために利用できるツールの1つは、プリプロセッサです。プリプロセッサは、あるタイプのデータを取得して別のタイプのデータに変換するプログラムです。この場合、CSSプリプロセッサはCSSにコンパイルされる前処理言語です。多くのCSSプリプロセッサがあります フロントエンド開発者 が推奨および使用していますが、この記事ではSassに焦点を当てます。何を見てみましょう サスは提供する必要があります 、なぜそれが他のCSSプリプロセッサよりも好ましい選択であるのか、そしてそれを最良の方法で使い始める方法。
Sassとは何かを知らない人にとって、最良の出発点は、 Sassの公式ウェブページ 。 SassはSyntacticallyAwesome StyleSheetsの頭字語であり、基本言語にパワーとエレガンスを追加するCSSの拡張機能です。
Sassは、多くの強力な機能を備えたCSSプリプロセッサです。最も注目すべき機能は 変数 、 拡張します 、および ミックスイン 。
変数には、色やその他の一般的に使用される値など、後で再利用できる情報が格納されます。拡張は、ルールの継承を可能にする「クラス」の作成に役立ちます。 Mixins、あなたは「機能」のように考えることができます。 Sassには、ロジックステートメント(条件とループ)の使用、カスタム関数、他のライブラリとの統合など、他のプリプロセッサと比較して他の驚くべき機能もいくつかあります。 方位磁針 、 などなど。これらの機能だけでも、あなたとあなたのチームがより生産的になり、最終的にはより良いCSSを作成するのに役立ちます。
残念ながら、プリプロセッサでさえすべてを修正して、優れたCSSコードを作成するのに役立つわけではありません。すべての開発者が直面している問題は、現在のWebアプリケーションがますます大きくなっていることです。そのため、コードはスケーラブルで読み取り可能である必要があり、回避する必要があります スパゲッティコード そしてそれの未使用の行。上記の問題を回避するには、日常業務におけるチームの何らかの基準が必要です。スパゲッティコードとは何ですか?それはどのように起こりますか?スパゲッティコードは、悪く、遅く、反復的で、読めないコードの名前です。チームが定義されたガイドラインや標準を設定せずに大きなアプリケーションを作成する場合、各開発者は必要なものと必要な方法を作成します。また、開発者が多くのバグ修正、修正プログラム、パッチを作成している場合、問題を解決するコードを作成する傾向がありますが、最良の方法でコードを作成する時間がありません。このような状況では、アプリケーションのどのセクターでも使用されなくなったCSSの行が大量に発生するのが非常に一般的です。開発者はコードをクリーンアップするのに十分な時間がなく、できるだけ早く修正を公開することを余儀なくされています。もう1つの再発する状況は、壊れたものをすばやく修正するために、開発者が多くの!important
を使用することです。これは、保守が困難な非常にハッキーなコードになり、予期しない動作が多くなり、後でリファクタリングする必要があります。すでに述べたように、コードが大きくなるにつれて、状況は悪化するだけです。
この記事のアイデアは、より良いSassを作成するためのルール、ヒント、およびベストプラクティスを共有することです。これらのSassのヒントとベストプラクティスをグループ化すると、Sassスタイルガイドとして使用できます。このスタイルガイドは、開発者が上記の状況を回避するのに役立つはずです。ルールは参照しやすいように論理セグメントにグループ化されていますが、最終的にはすべてを採用して従う必要があります。または少なくとも、それらのほとんど。
このスタイルガイドの一連のルールとベストプラクティスは、多くのチームでの作業経験に基づいて採用されています。それらのいくつかは試行錯誤から来ており、他はBEMのようないくつかの人気のあるアプローチに触発されています。一部のルールでは、それらが設定された理由と方法に特定の理由はありません。過去の経験を唯一の理由として持つだけで十分な場合もあります。たとえば、コードが読み取り可能であることを確認するには、すべての開発者が同じ方法でコードを記述していることが重要です。したがって、括弧の間にスペースを含めないという規則があります。括弧の間にスペースを含める方がよいかどうかを議論することができます。括弧の間にスペースがあると見栄えが良くなると思う場合は、このスタイルガイドとルールを好みに応じて調整してください。結局、スタイルガイドの主な目標は、ルールを定義し、開発プロセスをより標準的にすることです。
一般的な規則に常に従う必要があります。それらは主に、コードの一貫性と可読性をもたらすためにSassコードをフォーマットする方法に焦点を当てています。
selector1, selector2 { }
selector { @include mixin1($size: 4, $color: red); }
selector { font-family: ‘Roboto’, serif; }
selector { margin: 10px; }
次に、セレクターを処理するときに使用する一連のルールに従います。
!important
は避けてください。このルールを使用する必要がある場合は、CSSルール全般に問題があり、CSSが適切に構造化されていないことを意味します。多くのCSS !important
ルールは簡単に悪用される可能性があり、CSSコードを維持するのが面倒で困難になります。
コードの一貫性を保つことが重要です。ルールの1つは、ルールの順序を維持する必要があるということです。このようにして、他の開発者はより多くの理解を持ってコードを読むことができ、自分の道を見つけるために費やす時間が少なくなります。提案された注文は次のとおりです。
@extend
を使用する最初。これにより、このクラスが他の場所からルールを継承していることが最初にわかります。@include
を使用する次。ミックスインと関数を一番上に含めると便利です。また、何を上書きするかを知ることもできます(必要な場合)。.homepage { @extend page; @include border-radius(5px); margin-left: 5px; &:after{ content: ‘’; } a { } ul { } }
スタイルブックの命名規則の一部は、既存の2つに基づいています。 良い そして SMACSS 開発者の間で人気になった命名規則。 BEMは、Block、Element、Modifierの略です。これはYANDEXチームによって開発され、BEMの背後にある考え方は、開発者がプロジェクト内のHTMLとCSSの関係を理解できるようにすることでした。一方、SMACSSは、CSSのスケーラブルでモジュラーなアーキテクチャの略です。これは、保守性を可能にするためにCSSを構造化するためのガイドです。
それらに触発されて、私たちの命名規則の規則は次のとおりです。
l-
)、モジュール(m-
)、状態(is-
)のように、ブロックのプレフィックスを付けます。.m-tab__icon {}
.m-tab--borderless {}
変数を使用します。色のようなより一般的でグローバルな変数から始めて、それらのために別のファイルを作成します_colors.scss
。スタイルシート上で値を複数回繰り返していることに気付いた場合は、その値の新しい変数を作成してください。お願いします ドライ 。その値を変更したいとき、そして一箇所だけで変更する必要があるとき、あなたは感謝するでしょう。
また、ハイフンを使用して変数に名前を付けます。
$red : #f44336; $secondary-red :#ebccd1;
Sassを使用すると、メディアクエリを要素クエリとして記述できます。ほとんどの開発者は、メディアクエリを別のファイルまたはルールの下部に記述しますが、これはお勧めしません。 Sassを使用すると、メディアクエリをネストすることで、次の例のようなものを書くことができます。
// ScSS .m-block { &:after { @include breakpoint(tablet){ content: ''; width: 100%; } } }
これにより、次のようなCSSが生成されます。
ダミーのためにビットコインはどのように機能しますか
// Generated CSS @media screen and (min-width: 767px) { .m-block:after { content: ''; width: 100%; } }
このネストされたメディアクエリルールを使用すると、名前付きメディアクエリが使用されているSassスニペットでわかるように、上書きしているルールを非常に明確に知ることができます。
名前付きメディアクエリを作成するには、次のようにミックスインを作成します。
@mixin breakpoint($point) { @if $point == tablet { @media (min-width: 768px) and (max-width: 1024px) { @content; } } @else if $point == phone { @media (max-width: 767px) { @content; } } @else if $point == desktop { @media (min-width: 1025px) { @content; } } }
メディアクエリの命名について詳しくは、次の記事をご覧ください。 メディアクエリの命名 そして Sassでより良いメディアクエリを書く 。
最後に、以下の考慮事項も念頭に置いて従う必要があります。
.class1 { .class2 { li { //last rules } } }
このスタイルガイドの背後にある考え方は、Sassコードの記述方法を改善する方法についてアドバイスを提供することです。 Sassを使用していない場合でも、このスタイルガイドで提供されているヒントとルールが適用可能であり、VanillaCSSまたは別のプリプロセッサを使用している場合に従うことをお勧めします。繰り返しますが、どのルールにも同意できない場合は、自分の考え方に合うようにルールを変更してください。最終的に、このスタイルガイドを採用するか、他のスタイルガイドを使用するか、まったく新しいスタイルガイドを作成するかは、あなたとあなたのチーム次第です。ガイドを定義して、すばらしいコードを書き始めてください。
関連: * SMACSSの探索:CSSのスケーラブルでモジュラーなアーキテクチャ*