[add] デバッグ用CSSファイルを作成

[manabuyasuda]

リンク先の漏れがないか、適切にマークアップされているか、任意のクラスやプレフィックスが付いているか探すなど。

// 任意のプレフィックスがついている要素を探します。
// @example scss
// @include _debug-prefix('c-') {
//   outline: 5px solid crimson !important;
//   background-color: rgba(crimson, 0.1) !important;
// }
@mixin _debug-prefix($prefix) {
  [class^="#{$prefix}"],
  [class*=" #{$prefix}"] {
    @content;
  }
}

// 任意のクラスがついている要素を探します。
// @example scss
// @include _debug-class('c-layout') {
//   outline: 5px solid crimson !important;
//   background-color: rgba(crimson, 0.1) !important;
// }
@mixin _debug-class($class) {
  [class^="#{$class} "],
  [class$="#{$class}"] {
    @content;
  }
}

// @include _debug-element('[target="_blank"]') { // 外部リンクを探す
//   outline: 5px solid crimson !important;
//   background-color: rgba(crimson, 0.1) !important;
// }
// @include _debug-element('[href=""], [href="#"]') { // リンク先の指定がない
//   outline: 5px solid crimson !important;
//   background-color: rgba(crimson, 0.1) !important;
// }
@mixin _debug-element($element) {
  #{$element} {
    @content;
  }
}

[manabuyasuda]

/**
 * red: バリデートエラーになるので要修正。
 */
/* img要素にalt属性は必須。 */
img:not([alt]) { outline: 5px solid red; }

/* 直下の子要素にはli要素以外は入れられない。 */
ul > :not(li),
ol > :not(li) { outline: 5px solid red; }

/**
 * purple: バリデートで警告される。フォールバックをする必要はあるか？
 * フォールバック対応するのであればコメントアウトする。
 */
header[role="banner"] { outline: 5px solid purple; }
nav[role="navigation"] { outline: 5px solid purple; }
main[role="main"] { outline: 5px solid purple; }
aside[role="complementary"] { outline: 5px solid purple; }
footer[role="contentinfo"] { outline: 5px solid purple; }

/**
 * yellow: 問題がないか確認する。
 */
/* altは必要か？ */
img[alt=""] { outline: 5px solid yellow; }

/* ルート相対パスになっていない（相対パスを使用する場合は`:not()`を削除する） */
img:not([src^="/"]) { outline: 5px solid yellow; }

/* リンク漏れ？インラインでjsのトリガーが必要か？ */
a[href="#"],
a[href*="javascript"] { outline: 5px solid yellow; }

/* 外部リンクを使用するか？リンク漏れがないか？ */
a[target] { outline: 5px solid yellow; }

/* acope属性を指定するのが望ましい。 */
th:not([scope]) { outline: 5px solid yellow; }

/* `thead``tbody``tfoot`を指定するのが望ましい。 */
table > tr { outline: 5px solid yellow; }

/* style属性とID属性は指定しないのが望ましい。 */
[style] { outline: 5px solid yellow; }
[id] { outline: 5px solid yellow; }

[manabuyasuda]

CSSとしてデバッグ機能を持たせる必要があるか？
例えばChromeの拡張機能やブックマークレットなどで代用できないか？