CSSをStylusでスッキリ！コーディングの効率を上げるコツ ｜ SiTest (サイテスト) ブログ

こんにちは、SiTest事業部エンジニアの森永です。

HTMLと並んで、Webサイト/フロントエンドのコーディングで欠かせないのがCSS。最近はCSSのコーディングを効率的に行うためCSSプリプロセッサ(CSSメタ言語)を使用されるところも多いかと思います。
CSSプリプロセッサとしてはSass、less、Stylusなど様々なものが知られていますが、今回は、そのうち Stylus を紹介いたします。

CSSプリプロセッサは様々な特徴がありますが、今回はコーディングの効率アップにフォーカスを絞って見て参ります。

CSSプリプロセッサ共通の特徴として、

• 入れ子構造にできる
• プログラミング言語のように変数、関数定義や演算、Mixinが使用可能
• 親参照セレクタ「&」を使用可能

といった特徴があります。

したがって、素のCSSを直接書くよりも書きやすく、長くなりがちなコードを短くまとめやすいということが言えます。

CSSプリプロセッサは様々な種類がありますが、Stylusは node.js や Jade を作った TJ Holowaychuk 氏が開発したCSSプリプロセッサです。

他のCSSプリプロセッサにない最大の特徴としては、

• 波括弧、セミコロン、コロン、カンマの有無にかかわらずコンパイルが通るので、書き方を問わない

というものがあり、記載の仕方に柔軟性があるため、初心者でも入りやすくなっています。
この「記号の省略」をうまく使えばコードがスッキリした仕上がりにできます。

これらを組み合わせると、例えば以下のような書き方になります。

[CSS]

p{
    font-size: 12px;
}
p span.line{
    text-decoration: underline;
}

[Sass]

p{
    font-size: 12px;
    span.line{
        text-decoration: underline;
    }
}

[Stylus]

p
    font-size 12px
    span.line
        text-decoration underline

他にも、先に挙げたCSSプリプロセッサ共通の特徴である関数、Mixinなどを組み合わせるとスタイルシートの記載もスッキリしたものになり、コーディング作業の効率、およびスタイルの可読性が格段にアップします。

[参考記事] SASSよりもStylusが優れている6つのポイント

もちろん、ただ闇雲に書いていくだけではコードが読みにくく、業務効率の向上にはつながりません。
例えば、スタイル記述を共通化出来るところは集約し、コードの冗長さをなくしていきましょう。
そして、他の人が見てもわかりやすいコードを心がけましょう。

また、Stylusを使えば万事解決というわけではありません。
書き方の幅が広い(波括弧などの有無関係なくコンパイルが通る)ので、書く人によって書き方が違うと訳がわからなくなるかもしれないので、社内(グループ内)ではコーディングルールを決めておいたほうがいいでしょう。
ちなみに、StylusはSassに比べるとシェアが高くないので、出回っているライブラリなどはSass専用のものが多く歯痒い思いをするかもしれません。

しかしながら、Stylusの特徴を念頭に入れながらコーディングを行うと、Stylusでのコーディング効率アップはかなりのものになります。

皆さんもStylusでCSSコーディングの効率を上げ、業務速度の向上につなげていきましょう！