ルール

100以上の組み込みルールを使用して、

• エラーを回避し、
• 規約を適用できます。

ほとんどのルールは、標準設定 (✅) で有効になっており、多くのルールは自動修正できます (🔧)。

エラーの回避

これらのnoルールでエラーを回避できます。

降順

これらのno-descendingルールを使用して、降順のものを禁止します。

no-descending-specificity より高い特異度を持つ上書きセレクターの後により低い特異度を持つセレクターが来ることを禁止します。	✅

重複

これらのno-duplicateルールを使用して、重複を禁止します。

declaration-block-no-duplicate-custom-properties 宣言ブロック内のカスタムプロパティの重複を禁止します。	✅
declaration-block-no-duplicate-properties 宣言ブロック内のプロパティの重複を禁止します。	✅	🔧
font-family-no-duplicate-names フォントファミリー内の名前の重複を禁止します。	✅	🔧
keyframe-block-no-duplicate-selectors キーフレームブロック内のセレクターの重複を禁止します。	✅
no-duplicate-at-import-rules @import ルールの重複を禁止します。	✅
no-duplicate-selectors セレクターの重複を禁止します。	✅

空

これらのno-emptyルールを使用して、空のものを禁止します。

block-no-empty 空のブロックを禁止します。	✅
comment-no-empty 空のコメントを禁止します。	✅
no-empty-source 空のソースを禁止します。	✅

無効

これらの（暗黙的な場合もある）no-invalidルールを使用して、無効な構文を禁止します。

color-no-invalid-hex 無効な16進数の色を禁止します。	✅
function-calc-no-unspaced-operator calc関数内の無効なスペースなしの演算子を禁止します。	✅	🔧
keyframe-declaration-no-important キーフレーム宣言内の無効な!importantを禁止します。	✅
media-query-no-invalid 無効なメディアクエリを禁止します。	✅
named-grid-areas-no-invalid 無効な名前付きグリッド領域を禁止します。	✅
no-invalid-double-slash-comments 無効なダブルスラッシュコメントを禁止します。	✅
no-invalid-position-at-import-rule 無効な位置の@importルールを禁止します。	✅
string-no-newline 文字列内の無効な改行を禁止します。	✅

不正

これらのno-irregularルールを使用して、不正なものを禁止します。

no-irregular-whitespace 不正な空白を禁止します。	✅

欠落

これらのno-missingルールを使用して、欠落しているものを禁止します。

custom-property-no-missing-var-function カスタムプロパティにvar関数が欠落していることを禁止します。	✅
font-family-no-missing-generic-family-keyword フォントファミリー内で汎用ファミリーキーワードが欠落していることを禁止します。	✅

非標準

これらのno-nonstandardルールを使用して、非標準のものを禁止します。

function-linear-gradient-no-nonstandard-direction 線形グラデーション関数に対する非標準の方向値を禁止します。	✅

上書き

これらのno-overridesルールを使用して、上書きを禁止します。

declaration-block-no-shorthand-property-overrides 関連する詳細プロパティを上書きする省略記法プロパティを禁止します。	✅

一致しない

これらのno-unmatchableルールを使用して、一致しないものを禁止します。

selector-anb-no-unmatchable 一致しないAn+Bセレクターを禁止します。	✅

不明

これらのno-unknownルールを使用して、不明なものを禁止します。

annotation-no-unknown 不明なアノテーションを禁止します。	✅
at-rule-no-unknown 不明な@ルールを禁止します。	✅
declaration-property-value-no-unknown 宣言内のプロパティの不明な値を禁止します。
function-no-unknown 不明な関数を禁止します。	✅
media-feature-name-no-unknown 不明なメディア機能名を禁止します。	✅
media-feature-name-value-no-unknown メディア機能の不明な値を禁止します。
no-unknown-animations 不明なアニメーションを禁止します。
no-unknown-custom-properties 不明なカスタムプロパティを禁止します。
property-no-unknown 不明なプロパティを禁止します。	✅
selector-pseudo-class-no-unknown 不明な擬似クラスセレクターを禁止します。	✅
selector-pseudo-element-no-unknown 不明な擬似要素セレクターを禁止します。	✅
selector-type-no-unknown 不明なタイプセレクターを禁止します。	✅
unit-no-unknown 不明な単位を禁止します。	✅

規約の適用

これらのnoおよびlistルールを使用して、規約を適用できます。これらはコードの一貫性を確保するための強力なルールです。ほとんどのルールは、ニーズに合わせて設定する必要があります。

許可、禁止、必須

これらのallowed-list、disallowed-list、required-list、noルールを使用して、ものを許可、禁止、または必須にすることができます。

@ルール

at-rule-allowed-list 許可される@ルールのリストを指定します。
at-rule-disallowed-list 禁止される@ルールのリストを指定します。
at-rule-no-vendor-prefix @ルールのベンダープレフィックスを禁止します。	✅	🔧
at-rule-property-required-list @ルールに必要なプロパティのリストを指定します。

色

color-hex-alpha 16進数の色のアルファチャネルを必須または禁止します。
color-named (可能な場合は)名前付きの色を必須または禁止します。
color-no-hex 16進数の色を禁止します。

コメント

comment-word-disallowed-list コメント内で禁止される単語のリストを指定します。

宣言

declaration-no-important 宣言内の!importantを禁止します。
declaration-property-unit-allowed-list 宣言内で許可されるプロパティと単位のペアのリストを指定します。
declaration-property-unit-disallowed-list 宣言内で禁止されるプロパティと単位のペアのリストを指定します。
declaration-property-value-allowed-list 宣言内で許可されるプロパティと値のペアのリストを指定します。
declaration-property-value-disallowed-list 宣言内で禁止されるプロパティと値のペアのリストを指定します。

関数

function-allowed-list 許可される関数のリストを指定します。
function-disallowed-list 禁止される関数のリストを指定します。
function-url-no-scheme-relative スキーム相対URLを禁止します。
function-url-scheme-allowed-list 許可されるURLスキームのリストを指定します。
function-url-scheme-disallowed-list 禁止されるURLスキームのリストを指定します。

長さ

length-zero-no-unit 長さ0の単位を禁止します。	✅	🔧

メディア機能

media-feature-name-allowed-list 許可されるメディア機能名のリストを指定します。
media-feature-name-disallowed-list 禁止されるメディア機能名のリストを指定します。
media-feature-name-no-vendor-prefix メディア機能名のベンダープレフィックスを禁止します。	✅	🔧
media-feature-name-unit-allowed-list メディア機能内で許可される名前と単位のペアのリストを指定します。
media-feature-name-value-allowed-list 許可されるメディア機能名と値のペアのリストを指定します。

プロパティ

property-allowed-list 許可されるプロパティのリストを指定します。
property-disallowed-list 禁止されるプロパティのリストを指定します。
property-no-vendor-prefix プロパティのベンダープレフィックスを禁止します。	✅	🔧

ルール

rule-selector-property-disallowed-list ルール内のセレクターに対して禁止されるプロパティのリストを指定します。

セレクター

selector-attribute-name-disallowed-list 禁止される属性名のリストを指定します。
selector-attribute-operator-allowed-list 許可される属性演算子のリストを指定します。
selector-attribute-operator-disallowed-list 禁止される属性演算子のリストを指定します。
selector-combinator-allowed-list 許可されるコンバイナのリストを指定します。
selector-combinator-disallowed-list 禁止されるコンバイナのリストを指定します。
selector-disallowed-list 禁止されるセレクターのリストを指定します。
selector-no-qualifying-type タイプでセレクターを修飾することを禁止します。
selector-no-vendor-prefix セレクターのベンダープレフィックスを禁止します。	✅	🔧
selector-pseudo-class-allowed-list 許可される擬似クラスセレクターのリストを指定します。
selector-pseudo-class-disallowed-list 禁止される擬似クラスセレクターのリストを指定します。
selector-pseudo-element-allowed-list 許可される擬似要素セレクターのリストを指定します。
selector-pseudo-element-disallowed-list 禁止される擬似要素セレクターのリストを指定します。

単位

unit-allowed-list 許可される単位のリストを指定します。
unit-disallowed-list 禁止される単位のリストを指定します。

値

value-no-vendor-prefix 値に対するベンダープレフィックスを禁止します。	✅	🔧

ケース

これらのcaseルールに従って、単語の大文字と小文字を指定します。

function-name-case 関数名の大文字と小文字を指定します。	✅	🔧
selector-type-case タイプセレクタの大文字と小文字を指定します。	✅	🔧
value-keyword-case キーワード値の大文字と小文字を指定します。	✅	🔧

空行

これらのempty-line-beforeルールを使用して、構成要素の前に空行を強制するか、禁止します。

at-rule-empty-line-before @ルールの前後に空行を必須とするか、禁止します。	✅	🔧
comment-empty-line-before コメントの前に空行を必須とするか、禁止します。	✅	🔧
custom-property-empty-line-before カスタムプロパティの前に空行を必須とするか、禁止します。	✅	🔧
declaration-empty-line-before 宣言の前に空行を必須とするか、禁止します。	✅	🔧
rule-empty-line-before ルールの前後に空行を必須とするか、禁止します。	✅	🔧

最大値と最小値

これらのmaxとminルールを使用して制限を適用します。

declaration-block-single-line-max-declarations シングルライン宣言ブロック内の宣言数を制限します。		✅
declaration-property-max-values 宣言内のプロパティリストの値の数を制限します。
max-nesting-depth ネストの深さを制限します。
number-max-precision 数値で許可される小数点以下の桁数を制限します。		✅
selector-max-attribute セレクタ内の属性セレクタの数を制限します。
selector-max-class セレクタ内のクラスの数を制限します。
selector-max-combinators セレクタ内の組み合わせ子の数を制限します。
selector-max-compound-selectors セレクタ内の複合セレクタの数を制限します。
selector-max-id セレクタ内のIDセレクタの数を制限します。
selector-max-pseudo-class セレクタ内の擬似クラスの数を制限します。
selector-max-specificity セレクタの特異性を制限します。
selector-max-type セレクタ内のタイプセレクタの数を制限します。
selector-max-universal セレクタ内のユニバーサルセレクタの数を制限します。
time-min-milliseconds 時間値の最小ミリ秒数を制限します。

表記法

これらのnotation（暗黙的な場合もある）ルールを使用して、複数の表現を持つものの表現を1つに強制します。

alpha-value-notation アルファ値のパーセンテージ表記または数値表記を指定します。	✅	🔧
color-function-notation カラー関数の最新の表記法または従来の表記法を指定します。	✅	🔧
color-hex-length 16進数の色の短い表記法または長い表記法を指定します。	✅	🔧
font-weight-notation フォントウェイトの数値表記または名前付き表記を指定します。		🔧
hue-degree-notation 色相の度数の数値表記または角度表記を指定します。	✅	🔧
import-notation @importルールの文字列表記またはURL表記を指定します。	✅	🔧
keyframe-selector-notation キーフレームセレクタのキーワード表記またはパーセンテージ表記を指定します。	✅	🔧
lightness-notation 明度の数値表記またはパーセンテージ表記を指定します。	✅	🔧
media-feature-range-notation メディアフィーチャ範囲のコンテキスト表記またはプレフィックス表記を指定します。	✅	🔧
selector-not-notation :not()擬似クラスセレクタの単純な表記法または複雑な表記法を指定します。	✅	🔧
selector-pseudo-element-colon-notation 該当する擬似要素セレクタのシングルコロン表記またはダブルコロン表記を指定します。	✅	🔧

パターン

これらのpatternルールを使用して、命名規則を適用します。

comment-pattern コメントのパターンを指定します。
custom-media-pattern カスタムメディアクエリ名のパターンを指定します。		✅
custom-property-pattern カスタムプロパティのパターンを指定します。		✅
keyframes-name-pattern キーフレーム名のパターンを指定します。		✅
selector-class-pattern クラスセレクタのパターンを指定します。		✅
selector-id-pattern IDセレクタのパターンを指定します。		✅
selector-nested-pattern ルール内にネストされたルールのセレクタのパターンを指定します。

引用符

これらのquotesルールを使用して、引用符を必須とするか、禁止します。

font-family-name-quotes フォントファミリー名に引用符を必須とするか、禁止します。	✅	🔧
function-url-quotes URLに引用符を必須とするか、禁止します。	✅	🔧
selector-attribute-quotes 属性値に引用符を必須とするか、禁止します。	✅	🔧

冗長性

これらのno-redundantルールを使用して、冗長性を禁止します。

declaration-block-no-redundant-longhand-properties declaration-block内の冗長なロングハンドプロパティを禁止します。	✅	🔧
shorthand-property-no-redundant-values 省略記法プロパティ内の冗長な値を禁止します。	✅	🔧

内部の空白

このwhitespace-insideルールを使用して、内部の空白を必須とするか、禁止します。

comment-whitespace-inside コメントマーカーの内側に空白を必須とするか、禁止します。	✅	🔧