CSSの属性セレクタを使ったミスの防ぎ方

以前書いたブラウザにガイド線を引くCSSコード と同じノリで、開発中に使う系のCSSネタで一つ紹介したいと思います。

サンプル

ソースコードのうっかりミスやは可視化されない、またバリデーションエラーにならないことが少なくなく、気付きづらいので下図のように可視化したらどうか、という案です。

Codepenのサンプル
http://codepen.io/skwbr/full/WvyXGV

うっかりミスを防ぐためにまずすること

• 開発中だけ使うclassをうっかり本番想定のページにコピペした
• リンクがダミーのまま直すのを忘れた

などのミスを防ぐためにすべきことと言えば...

TODOコメントやDUMMYを入れるようにする

• 残タスクや要修正箇所に <!-- TODO:直す --> などTODOコメントを入れるようにする。WebStorm等のエディタではリストアップしてくれる。
• リンク先が未決定のところは href="DUMMY"と入れる。もちろんTODOコメントを残してもいいが量がいと消すのも大変なので。href="TODO"としてもエディタがTODOとして検出しなかったりする。
• href="#"は、JSでreturn falseする系と区別つかなくなるので、ダミーという意味で使うのは避ける

エディタの検索機能であとから洗う

• 上記のTODOコメントやDUMMYなどの目印を残しておけば、あとからエディタでまとめて作業できます。

よく見直しをする

• ｳｵｵｵｵｵｵと作業して「できた！」と思った時にもう一度見直しをする習慣は必要です。

バリデーションチェックする

• 優れたエディタを使っていても閉じタグ忘れとか、必要属性の欠如とかのミスが完全になくなるわけではないし、これらは見た目に出てこなかったりするので、「Nu Html Checker」等信頼のおけるバリデーションチェックやリントチェックをする。

CSSの属性セレクタで問題箇所を可視化する

今回の投稿は、上記の基本的な対応は前提としつつ、こんなやり方もなくはない程度の話です。
CSS3の属性セレクタを使って、

a[href*="DUMMY"] { // hrefが"DUMMY"のaタグ
}

のように問題視する条件に一致する場合に目立たせています。
自分の場合、開発中やサンプルコードでのみ「_sample」「_code」などアンダースコアから始まるclassを使ったりすることがあって、うっかり他のページにソースをコピペしたときに残らないように、

*[class^="_"] { // "_"から始まるclassを持つセレクタ
}

あとは

content: attr(href);

のように設定値をcontentプロパティで可視化すると尚分かりやすいかも？

コード

開発またはチェック時だけ下記のようなSCSSパーシャルをimportしておく、という想定。

_dev-alert.scss

// mixin定義
// ---------------------------------------------------
@mixin dev-alert($attr:null, $content:"問題があります") {
　$zindex-guide: 999999;
  outline: red 2px solid; //問題箇所を赤く囲む
  @if $attr != null {
    position: relative;   
    &::before {
      position: absolute;
      content: attr($attr); //属性の設定値を可視化
      top: -15px;
      left: 0;
      color: red;
      font-size: 12px;
      display: inline-block;
      z-index: $zindex-guide;
    }
  }
  &::after {
    content: $content; //問題があることを画面最上部で伝える
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    background: red;
    color: white;
    font-size: 10px;
    padding: .2em .5em;
    z-index: $zindex-guide;
  }
}

// 実行
// ---------------------------------------------------
body:not(.module) { //bodyのクラスが".module"の場合は対象外

  //「_」から始まるクラスの混入可視化
  *[class^="_"] {
    @include dev-alert(class, "【注意】「_」から始まるclassが残っています");
  }

  // ダミーリンク可視化
  a[href=""],
  a[href*="DUMMY"],
  a[href*="DAMMY"],
  a[href*="dammy"], 
  a[href*="dummy"],
  a[href*="DAMY"],
  a[href*="damy"],
  a[href*="DUMY"],
  a[href*="dumy"] {
    @include dev-alert(href, "【注意】ダミーのhrefが残っています");
  }
}

最後に

Web Developer みたいな拡張機能を使えば、もっと高機能なハイライティングができますし、リンク切れチェッカーのようなツールも便利です。
しかしチェックする意思や余裕がないと、これらのツールがあっても使わないだけなので、こちらが何もしなくても「CSSで否応なしに赤くされてしまう」という仕組みにしておけば、作業中に洗うことができるかなと思いました。

ただジャストアイデアなので有用性は定かではないですが、属性セレクタの使い方の応用方法の一つとして。。このスタイル自体消し忘れたら本末転倒なのでご注意ください。