BLOG きょうのできごと

10年間のCSSトレンド雑感まとめ

bsPAK85_coding15095904

この記事は、CSS昔話 Advent Calendar 2015の3日目の記事です。

コーダー歴10年の私が個人的にCSSトレンドをまとめてみました。
個人の記憶が元になっており、時代の前後や混同がありましたらお許しくださいませ。

2005年頃 CSSレイアウト 黎明期

俺たちは幅が守られたテーブルレイアウトから、CSSで幅を決めるようになったんだ…
ただし文字の縦中央寄せはtableだったよ…。それが辛い思い出だ。

テーブルレイアウトからCSSレイアウトに移行した時期。
ブラウザで使えるフォントが限られていて、この頃の見出しテキストは全て画像。
CSSは下に書いたほうが優先されると知って、どの指定を上に下に書くという設計?を懸命にやっていた記憶が…w
この頃からHTMLは小文字で書くようになった記憶がある。
初期のHTMLは大文字が基本だったため、class名に大文字をつける人も居た。
テーブルレイアウトからCSSレイアウトに移行して、CSSを変えればデザインが変わることに燃えてました。

キーワード
ハイブリッドレイアウト、スタイルシート、class名は大文字

2007年頃 web2.0 自由

俺たちは透過pngを使ってドロップシャドウを作ったんだ…
要素の大きさ変更があったら、画像切り出しからやり直しだったのさ…。

ブラウザで中間色を表現するようになった時代。
グラデーションやドロップシャドウ鏡面反射が流行った。
CSS3が使えない時代、リッチに見せるため盛ったデザインが流行った。

CMSやwebシステムもあまり存在せず、
CSS設計の重要さはさほど重要ではなかった時代。
トップページと下層ページはページレイアウトごとにCSSファイルをを分割していた。

キーワード
鏡面反射、グラデーション、CSS zen、png

2009年頃 XHTML 厳格

俺達はあの頃セマンティック脳だったんだ、日本語から連想する英単語を探したものさ。
ただし中学レベルの単語しか使わずsaiyouとローマ字にすることもあったのさ。

HTMLのネーミングがやたらセマンティックな流れになり
セマンティックになりすぎて、使い回しが効かず
後付のCSSが増殖して破綻するという事があった。

やたらidをつけてCSSを細分化していた。
シングルclassが主流でSSプロパティを個別にたくさん書いていた。
CSSファイルもid毎に作ってそのほうが管理しやすいから、と言われて作った事案がありました。
読み込み記述を作るのが大変で、何のためだったか謎です。

キーワード
セマンティック、XHTML

2011年頃 効率化 自由

あの頃俺たちは大量のHTMLを作るために効率化を追い求めた
ネーミングは短く、効率的なツールや手法も使いこなしたのさ。

スマホ対応が一般的になった頃。HTML5がスタンダードになりました。
セマンティック時代の反動かネーミングは短く、HTMLもclass名も極力短くするのがカッコイイ流れに。
Zen-CodingでHTML記述も効率化できるように。

global=gb、menu=mn、header=hd、footer=ft
など…元ネタを考えると数秒くらい思考停止するネーミングが実際にあった。
サポートブラウザが増えてきてCSSハックが乱立

キーワード
CSSハック、IE対策、HTML5、CSS3初期、Zen-Coding、coda

2013年頃 モジュール化 厳格

スタイルガイド、コーディング規約を作った。俺ってカッコイイ。

スタイルガイド、コーディング規約が定着する。
デザインが破綻しない、ルールを統一化するため、サイト設計をドキュメント化する流れ。
class名はハイフン、アンダースコア、キャメルケースなど好みによってバラバラ。
IE6が対象ブラウザから外れてCSS3が流行りだしたのもこの頃。

CMSを使ったサイトが盛り上がってくる。
使い回しに適したモジュール設計が定着し、デザインやコードを統一するためコーディング規約を作るプロダクションが増えた。

キーワード
OOCSS、CSS命名、CSS3一般化、マルチクラス復活、Sublime Text、bootstrap

2015年頃 CSS設計 自由

ツールを使いながらCSSを書く俺ってカッコイイ。←イマココ

運用・CMSが盛り上がり、大規模サイトに適したCSS設計が本格的に求められる。
設計方法が公開され、複数の手法を組み合わせた方法も。

SCSS、git、タスクランナーなど使用技術ごとに複数のツールが登場し、
テクニカルの自由度が増したように感じる。

キーワード
BEM、sass、SMACSS、CSS3アニメ、Brackets、Emmet

まとめ

大きく2年毎にトレンドが変わる
厳格時代と自由度が高い時代を繰り返している
個人的な仮説をまとめると、このような法則がありました。
2年後の2017年に振り返ったら面白そうです。

CSSの中身は見えない部分なので、コードを書く人により、ルールがいろいろ有ると思います。
案件の内容により、設計内容も変えますし、運用のアリナシでも変わってきます。

人それぞれのCSS設計にこれからも注目していきたいです。

  • アーカイブ