stylelint を使用して CSS_StyleLint_Basics を確認してください

大量の CSS コードを記述すると、複数のエラーが発生することがあります。 CSS の記述エラーを防ぐツールが必要な場合があります。

おそらく、エラーが実際にはバグである場合もあります。あるいは、単に一貫性がなかったり、不注意によるコーディング スタイルが不明瞭だったりする可能性もあります。おそらく、それらの多くは (気質にもよりますが) 些細なことのように思えるかもしれませんが、コードベースが増大し、時間の経過とともに、多くの人がそれらを使用するときに醜いものを作成するようになります。この問題の結果はあなたの想像を超えています。

あなたは自分をコントロールしようとします。同僚もあなたを助け、あなたが歩き回っているときに間違いをすぐに修正します。ただし、あなたとあなたの同僚は間違いを犯すものであるため、少なくともある程度は失敗は最終的には避けられません。後で、あなたまたは他の誰かが、ページ上の CSS エラーによって引き起こされた問題を修正する必要があります。

あなたもあなたの同僚も、自分の間違いについて話すのは恥ずかしいからです。時にはイライラしたり、精神的に傷ついたりすることもあります。一貫した記述スタイルなど、コード ベースを維持するのに特定の規律が役立つ場合がありますが、手動で実装すると少し衒学的で退屈に見えるかもしれません。そうしないと、あなたが普段好んでいる強引で頑固な要素が出てきてしまいます。

さらに、コードレビュー後に他の人がエラーを指摘するのを待つのではなく、時間内にエラーを修正し、自分で修正して、二度とそのようなエラーを起こさないことを宣言したいと思うかもしれません。 CSS にエラーがある場合、タイムリーなフィードバックは時間を大幅に節約するのに役立ちます。

必要なのはエラーを防ぐマシンです

CSS を理解し、あなたの意図、好み、アイデア、弱点などを理解する、バグのないマシンが必要です。

このマシンには制限があります。すべてのものは完璧ではありません。ただし、この制限はあなたとあなたの同僚では異なります。エラーを防ぐことができる限り、たゆまぬ努力を続けます。その間、あなたと同僚はいつでもマシンを改良して、その機能を拡張したり、制限を弱めたりすることができます。これはオープンソースであり、CSS の記述ミスを防ぎたいと考えている他の作成者など、世界中の人々が参加して自分の役割を果たすことができます。

他のものと同様、CSS 作成者にはリンターが必要です

エラーを防ぐこれらのプログラムを「リンター」と呼びます。 Javascript には、より優れたリンターがいくつかあります。特に ESLint は奇跡のように機能し、優れたリンターがいかに役立つかを示しています。しかし、CSS ではそれほど幸運ではなく、選択肢は非常に限られています。特別なプリプロセッサを備えた Ruby ベースの scss-lint と、古い CSS Lint です。

しかし、これは PostCSS より前のことです。さらに、PostCSS は、よりインタラクティブな CSS ツールを構築するためのメソッドをいくつか提供します。 CSS に似た構文を解析して抽象構文ツリー (AST) プラグインに変換し、分析と操作を行うことができます。また、カスタム パーサーを使用すると、PostCSS は非標準の無効なパターン (// コメントなど)

も処理できます。

PostCSS の機能をベースにし、scss-lint と ESLint の最高の機能からインスピレーションを得た、より強力な機能を備えたリンターを作成する条件が整いました。

私は数人の友人とこのプロジェクトに取り組んでいます。ここで私たちが開発したツール、stylelint の紹介を始めます。

stylelint でできること

以下は、stylelint で試した関数の概要です。stylelint には 100 を超えるルールがあり、スケーラブルです。

この時点で、少し焦っていることに気付いた場合は (「分かった、分かった: stylelint は素晴らしい効果を発揮すると信じています。要約する必要はありません。」)。次のセクションに進んで、いくつかの問題に対処し、いくつかのヒントを提供します。

エラーをキャッチしています

一部の stylelint ルールは、注意力が散漫になったり目が曇ったりしたときに発生するスペルミスや省略など、明らかなエラーを検出するように設計されています。たとえば、空のブロック、無効な 16 進値、重複したセレクター、名前のないアニメーション名、不正な線形グラデーション構文を抑制できます。

他のルールは、より微妙なエラーを見つけるために最善を尽くすことに関するものです。これはルールです。対応する属性 (margin-top など) をオーバーライドする短縮属性 (margin など) を使用する場合は、ユーザー側の見落としが原因である可能性があるため、警告を発します。さらに、警告を発するルールもあります。たとえば、ルール A がルール B の前に出現するが、ルール A のセレクターの方が優先順位が高いため、実際にはルール B をオーバーライドするなど、混乱を招く状況が発生した場合です (たとえば、ルール A が.foo.bar{···}、ルール B は .foo{···})。これは非常に難しい状況です。

PostCSS の douse プラグインを使用して、ブラウザーがこのスタイルをサポートしているかどうかを確認するルールもあります。もう 1 つは、混乱を避けるために、css-colorguard プラグインを使用して色の類似性を示します。 (注意: これは、PostCSS に加えて stylelint を使用する主な利点の 1 つです。stylelint は、他の PostCSS プラグインと比較して、非常に少ない労力でプロンプトを表示できます。)

ベストプラクティスを強制する

スタイルシートでシステム メソッドを使用する場合、またはコードにスタイル ガイドを設定する場合は、これらのパターンを無効にする必要があります。 stylelint はこれらの関数をすでに提供しています。

まず、セレクターを厳密に制御する必要があります。 stylelint を使用すると、特定の特異性を超えてセレクターを無効にしたり、ネストの深さに制限を設定したりできます。カテゴリ セレクター (ID のないセレクターなど) を抑制し、残りのセレクターに正規表現の命名規則を使用できます。

!important またはブラウザがサポートしていないブラウザ ハックの使用を無効にすることができます。 Autoprefixer を使用する場合 (または使用する必要がある場合)、ソース スタイルシートでのベンダー プレフィックスの使用を無効にすることができます。

より厳密にしたい場合は、構成に時間をかけて絶対的な一貫性を確保することができます。スタイルシートのプロパティの順序を強制し、ブラックリスト、ホワイトリストのプロパティ、値、関数にも単位を指定できます。

コードスタイル規則を強制する

stylelint はコード スタイル規則を自動的に適用するため、あなたやチームメイトが積極的にコード スタイル規則を設定する必要はありません。私たちは、これらのルールをより包括的かつ柔軟にすることに取り組んでいます。

これらのルールは主に空白に焦点を当てていますが、引用符、大文字と小文字、小数点の前にゼロを書く、キーワードの使用や値のスペルアウトなど、他の詳細にも適用されます。

あなたとあなたのチームメイトが書式設定規則を確立し (たとえば、宣言ではコロンの後に常にスペースを残します)、それを stylelint 設定で変更でき、それについて再度話し合う必要がなくなることを夢見てください。機械王国で実行させてください。

すべてを作成して拡張します

ESLint (および CSS Lint) の作成者である Nicholas Zakas は、ESLint の成功はその拡張性にあると書いています。 stylelint は、ESLint の先例に倣い、CSS 作成者に拡張可能なリンターを提供しようとしています。

独自のルール プラグインを作成して公開できます。現在、たくさんのプラグインが利用可能になっており、他の人の素晴らしいプラグインを楽しみにしています。

構成は拡張可能であるため、共有することができます。プラグインに関しては、ESLint からこの機能の価値を学びました。 WordPress および SUITSS の構成と公開されたものがどれに含まれているかを確認してください。

stylelint の組み込みヒントが気に入らない場合は、組織向けであっても独自のスタイルを手動で作成できます。警告メッセージを提供するために使用されるルールをカスタマイズすることもできます。

stylelint API を使用すると、テキスト コンパイラ プラグインを作成し、それらをテストして、ワークフローのあらゆる側面に stylelint を統合できます。

stylelint 拡張機能に関するアイデアがありましたら、ぜひお知らせください。

予想される質問への回答

あなたの心にはいくつかの疑問があるかもしれません。最も一般的な質問については、次のような説明があります:

SCSS 以下で stylelint を使用することはできますか?

答えは「はい」です。SCSS で stylelint を使用でき、Less でサポートされています。 PostCSS ではカスタム パーサーが許可されているため、stylelint はさまざまな非標準構文を簡単にサポートできます。解析用に PostCSS パーサーをカスタマイズできます。

PostCSS パーサーのおかげで、stylelint は SCSS、Less、および新しい SugarSS をサポートしています。別のカスタム構文サポートを実装したい場合は、PostLess を通じて実現できます。

もちろん、非標準の構文には障害となる特定のルールがあります (Sass ID セレクターを混乱させる #{$interpolation} など)。 stylelint はスタイルシートのスタイルをマスクしようとするため、標準の CSS を使用する人もいれば、SCSS などの拡張言語を使用する人も、奇妙なカスタム プロパティを使用する人もいます。これらにより、必然的に、埋める必要のあるいくつかの穴が生じます。ただし、私たちはこれらのバグを見つけ次第、継続的に取り組んでいます。その間、スタイルシートごとまたは行ごとにルールを完全に無効にしたり、無効にしたりすることができます。

stylelint は将来の CSS 構文を使用できますか?

はい！上記の回答と同様に、stylelint は、将来の CSS 構文 (おそらく PostCSS プラグイン経由) の有効化を含め、PostCSS が理解できるものはすべて理解できます。実際、一部の stylelint ルールは、将来の CSS 構文と一部のカスタム プロパティを特別に処理します。

stylelint の設定は膨大です。どこから始めればよいですか?

次の 3 つの構成方法をお勧めします。

公開された構成を拡張します。ユーザーに一貫したベースラインを提供するために、私たちは stylelint 設定標準を維持しています。そして多くの構成も発表されました。最初から開始して、一度に 1 つのルールを追加します。デフォルトでは、どのルールも有効になっていないため、ルールを手動で追加すると、どのルールが適用されるのかがわかり、追加した各ルールを理解できます。コピー＆ペースト構成を有効にし、使用するオプションを決定し、それらを選択的に削除します。

ありがたいことに、膨大な stylelint 設定を何度も記述する必要はありません。好きなスタイルを選んでどこでも使用できます。

stylelint を実行する最も簡単な方法は?

ほとんどの人にとって、最も簡単な方法はコマンドラインを使用することです。

gulp プラグインを使用したい場合は、gulp-stylelint を使用できます。 Webpack に関しては、さまざまな選択肢があります。これらのプラグインが、Grunt などの他の stylelint プラグインを作成するきっかけとなることを願っています。 (オープンソース プロジェクトで見つけることができます!)

PostCSS プラグイン (プラグインに含まれるものを含む) を使用して stylelint を実行することもできます。これは、PostCSS が使用できる場所であればどこでも stylelint を使用できることを意味します (ほぼすべてのコンパイル ツールをカバーします)。

さらに、最速のフィードバックを提供する、Atom、Sublime Text、VS Code 用の stylelint テキスト コンパイル プラグインもあります。詳細については、stylelint Web サイトの補完ツールのリストを確認してください。

以下に示すように、コマンドラインで表示されると予想される結果は次のとおりです。

は Atom

では次のように表示されます。

stylelint でエラーを修正できますか?

いいえ、しかし、stylefmt と呼ばれる別のツールはまさにそれを目的としています。これは、lint に使用するものと非常によく似た stylelint 設定を使用し、あらゆるエラーを修正できます。コミュニティからの貢献により、stylelint が stylelint ルールに違反するバグに自動的にパッチを適用できるように進化できることを願っています。彼らがこの目標を達成できるよう支援してください。

CSScomb や、stylelint と組み合わせた Perfectionlist などの他のツールを使用して、自動的に中断を修正したり強制的に中断したりすることもできます。

制約の補足に lint を使用する

優れた CSS には膨大な量の制約があります。そのため、私たちは SMACSS、ACSS、BEM、SUITCSS、ITCSS などの手法について議論することに多くの時間を費やしています。悪い CSS を書くのがいかに簡単かは誰もが知っているので、CSS スタイルを書くことを恐れなくなったら、仕事において賢明な戦略を確立し、勇敢にそれに固執する必要があります。

stylelint の目標は、実行を自動化することです。CSS 作成者が独自の戦略を実装するために使用できる、ルールのコア セットとプラグイン可能なフレームワークを提供します。

試してみて、どのように機能するかをお知らせください。貢献ルール、機能強化、テスト、バグ修正、ドキュメント、新しいアイデア、または単なるフィードバックなど、より良い改善のためのアイデアをお持ちの場合は、ぜひご連絡ください。これにより、あらゆるレベルの開発者にやるべきことが与えられます。