ブログ

クラスレスCSS

2021.03.15 : Yamamoto Naoki
Coding
クラスレスCSS

最近よく耳にするようになってきましたクラスレスCSS。

使う使わないは別として、私個人的に素敵だと思っています。なぜならHTMLの文法に則って装飾するからです。

CSS主体でコーディングしているとCSSで見た目があっていればHTMLはどうでもいい(極端な話として)感じがしてならないので、このクラスレスの考え方は賛成です。

例)従来のCSS

<h1 class=”title-1″>・・・

<button class=”btn”>・・・

とはいえ、デザイン上単一HTMLで装飾するのは難しいという実感もあります。

例えばレイアウトです。

クラスがない(つけない)ので、HTMLに対して1パターンしか装飾できません。
これだと複雑なレイアウトだと難しいです。(単純なものならOK)大規模サイトやデザインに凝ったサイトは難しいと思います。

純粋にクラスレスCSSを使うなら、単純なLPや、デザインにこらないサイトでしょうか?

通常のホームページを制作するには、クラスレスは難しく思いますので、結局クラスは必要だと思っています。

ただ、先にいった考え方は素敵だと思うので、業務的に活かせる部分は取り入れていこうと思います。

参考

new.css
https://newcss.net

Bamboo CSS
https://rilwis.github.io/bamboo/

Bahunya
https://kimeiga.github.io/bahunya/

Tacit
https://yegor256.github.io/tacit/

MVP
https://andybrewer.github.io/mvp/

アーカイブ

新しいサイト制作や、既存サイトの運用に関するお困りごとなどございましたらご依頼、ご相談ください。

ビジネスやサービスに最適なウェブ制作、デザインをおこなっている株式会社ナナサンの会社案内をダウンロードいただけます。

制作依頼・ご相談 資料ダウンロード
イメージ:制作依頼・ご相談
イメージ:制作依頼・ご相談