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

メニューボタン閉じるボタン

CSSをStylusでスッキリ!コーディングの効率を上げるコツ

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

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

Stylusロゴ(Stylus公式サイトstylus-lang.comより)

CSSプリプロセッサとは

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

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

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

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

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

Stylusの特徴

CSSプリプロセッサは様々な種類がありますが、Stylusは node.jsJade を作った 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で効率アップ!

CSSプリプロセッサを使う上での注意点

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

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

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

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

今すぐお気軽に
ご相談ください。

0120-315-465

(平日 10:00~19:00)

今すぐお気軽に
ご相談ください。

0120-315-465

(平日 10:00~19:00)

グラッドキューブは
「ISMS認証」を取得しています。

認証範囲:
インターネットマーケティング支援事業、インターネットASPサービスの提供、コンテンツメディア事業

「ISMS認証」とは、財団法人・日本情報処理開発協会が定めた企業の情報情報セキュリティマネジメントシステムの評価制度です。

いますぐ無料で
お試しください。

トライアル終了後も
無料でご利用いただけます。

お名前【必須】
メールアドレス【必須】
※携帯・フリーアドレスは不可
電話番号【必須】

利用規約』『プライバシーポリシー』に同意する