CSSコードの品質をどう考えるか？

私たちは、その品質に関する多くの出版物を見つけることができる。 コード などのプログラミング言語で書かれている。 JavaScript, ジャワRubyなどである。デザイン・パターン、自動テスト、ソフトウェア・アーキテクチャについては、すでに多くのことが語られている。これらの出版物のすべてにおいて、CSSは補助的なメディアとして扱われているようですが、すべてのインターネット・アプリケーションの重要な部分を構成しています。

この記事では、私たちがクライアントに提供するプロジェクトが常に最高品質であるように、コーデストで使用しているツールやグッドプラクティスについて説明します。

scss プリプロセッサ

小さなアプリケーションであれば、CSSコードを書くだけで十分だ。より大きな プロジェクトSCSSプリプロセッサは、類似したHTMLオブジェクトのコードを異なる場所で何度も繰り返す必要がないようにします。SCSSプリプロセッサは、変数や関数、いわゆるミキシンを使うのを助けてくれます。

以下のリストは、「Do not Repeat Yourself」の原則を満たすためのミキシンの例です：

フレックスセンター
  display: flex；
  align-items: center；
  justify-content: center；
}

このミキシンを使えば、コードを書くことができる：

.item-a {
  display: flex；
  align-items: center；
  justify-content: center；
  ...
}

.item-b {
  display: flex；
  align-items: center；
  justify-content: center；
  ...
}

より簡潔でクリーンな方法で：

.item-a {
  フレックスセンターを含む；
}

.item-b {
  flex-center を含む；
}

ビーイーエム メソドロジー

BEM手法は、モジュール化され、再利用可能でスケーラブルなCSSコードを作成できるシンプルな命名規則です。Codestの一部として、VueJSコンポーネントのスタイリングに使用しています。1つのブロックを含む1つの.scssファイルが、1つの.vueコンポーネントに割り当てられるように、コードを整理するようにしています。例として、v-page-header.vueコンポーネントのスタイリングを設定できます。

ページヘッダー
  タイトル
    font-size: 2.0rem；
    color: $color-black；
    background: $color-white；
  }

  &__logo {
    background: url('/images/background.png') no-repeat 0 0；

    縦書き
      background: url('/images/background-2.png') no-repeat 0 0；
    }
  }

ユーティリティクラス

BEMの手法で作業しているとき、非常に単純な操作、たとえばテキストの一部を太字にするといった操作を行うには、人工的なCSSクラス名を考案しなければならないことに気づいた：

.page-header {
  &__bolder-item {
    font-weight: bold；
  }
}

この問題を解決するために、Bootstrapフレームワークのソースコードで使用されている「ユーティリティ」クラスからヒントを得ました。このおかげで、Vue/HTMLテンプレートのコードで、以下の型を使用することができます：

<div>
  <span class="text-bold">内容</span>
</div>

コードの静的解析

透明性があり、一貫した構造を持つコードで作業することで、簡単に変更したり、新しい機能を追加したりすることができることは、誰にも納得してもらう必要はない。重要なのは、既存のコードの断片に取りかかろうとする人が、それをすぐに見つけられることだ。しかし、プログラマーには独自の癖があり、他のプログラマーには理解されないことがよくある。 チーム メンバーだ。そのため、コードチェックを自動化できるツールを使うことがとても重要です。Codestの一部として、私たちはSCSS-LINTツールを使ってSCSSコードを自動的に分析しています。私たちのプロジェクトで使用している最も興味深く、最も制限的なルールの1つは、1つのSCSSクラス内の属性の適切な順序を保証するPropertySortOrderルールです。

SCSSコードの次の2つの部分を想像してみてください：

.item-a {
    font-size: 14px；
    color: #FF00FF；
    margin-top: 10px；
    font-weight: bold；
    background-color: #00FFFF；
    padding：5px；
    margin-bottom：margin-bottom: 10px；
}

.item-b {
    font-size: 18px；
    padding：3px；
    background-color: #00FFFF；
    margin-bottom：margin-bottom: 4px；
}

と：

.item-a {
  margin: 10px 0；
  padding：5px；
  background-color: #00FFFF；
  color: #FF00FF；
    font-size: 14px；
    font-weight: bold；
}

.item-b {
  margin-bottom：4px；
  padding：3px；
  background-color: #00FFFF；
    font-size: 18px；
}

どちらの文章も正しいが、2番目の方が読みやすい。マージンやパディングといった関連する属性は一緒にまとめられている。

概要

私たちがCodestフレームワークで作成する広範なWebアプリケーションのCSSコード構成に関するすべての情報を、わずかな文章でお伝えすることは困難です。読者の皆さんには、ご自身のプロジェクトでどのツールやグッドプラクティスを使用しているか、コメントを残していただくことをお勧めします。