by ryou

csscombでスタイルシートの自動整形をしたいならscss一択なのだろうかとか

よくガイドラインとかで「プロパティの記述順」とか「0.5じゃなく.5と記述しろ」とかありますけど、まぁそれを手作業でやるのは非常に馬鹿らしいので普通はcsscomb等(等って書いたけど他に選択肢あるんですかね)の自動整形ツールを使ってやると思うんです。

ただ生CSSを使っているなら問題ないのですが、CSSプリプロセッサに関してはそもそも対応していない模様で色々と厳しい。試してみたところsass記法はアウトでstylusもアウト(公式で「そこまでする時間ない。誰かプルリク送ってくれれば喜んで取り込むよ。」的なこと書いてた)

ただ、scssは辛うじて使えるので現状自分はscssを使用しています。本当ならインデントブロックが大好きなのでstylusを使用したかったのですが。

scssにcsscombかける時にハマったこと

レスポンシブサイトを作る際、自分はmixinでメディアクエリを管理してるんですけど。

.box {
  .txt {
    ~
  }
  @include mq-pc {
    // PCレイアウトのスタイル
  }
  @include mq-sp {
    // SPレイアウトのスタイル
  }
}

csscombを使うまでは上の記述方法でやってたんですが、これにcsscombをかけると。

.box {
  @include mq-pc {
    // PCレイアウトのスタイル
  }
  @include mq-sp {
    // SPレイアウトのスタイル
  }

  .txt {
    ~
  }
}

こうなります。

察しの通り、各レイアウトのスタイルが上書きされてしまう場合が出てきてしまいます。

それ以降は以下のように書いています。

.box {
  .txt {
    ~
  }
}
@include mq-pc {
  // PCレイアウトのスタイル
  .box {
    .txt {
      ~
    }
  }
}
@include mq-sp {
  // SPレイアウトのスタイル
  .box {
    .txt {
      ~
    }
  }
}

最初に書いてたやり方のほうが、.boxのブロック内で全てが完結してるので好みだったのですが、しょうがないですね。

gulpで出力されるCSSにcsscombかける意味

ってあるんですかね?いや、初期実装はCSSプリプロセッサでやって、保守運用は生CSSでやるっていうならあるんでしょうけど、保守運用もCSSプリプロセッサ使うならどうなのという。

ネット上の記事を見ていても、gulpで出力されるCSSにcsscombをかける例は大量にあったのですが、scss等自体にcsscombをかけるといった内容は数えるほど(というか検索しても2件)しか見当たりませんでした。