CSSフレームワークから学ぶべきこと

CSSフレームワークから学ぶべきこと

Bootstrap、Foundartionをはじめ、世の中には様々なCSSフレームワークが登場しては、消え去っています。

日々流れるフィードを紐解くと、「シンプルで使いやすいCSSフレームワーク」「すぐに使えるフレームワーク」といったような触れ込みで、様々なフレームワークが紹介されています。

そんな中、どのフレームワークを使えばいいのかわからないという方もいることでしょう。

本日はCSSフレームワークとどう向き合うべきかを考えてみます。

認知度が正義か。

さて、なぜCSSフレームワークを採用するのでしょうか?
もちろん、ここではあげられない程にメリット、デメリットがあるでしょう。

敢えてここでは 属人化というキーワードでメリットを説明します。

つまり、自分一人にコードが依存することを防ぐということです。

複数人でコーディングを行う、もしくは作業フェーズを細かく区切り、途中で誰かに作業を譲渡する。
そんな時こそ、CSSフレームワークは最大限の力を発揮します。

Bootstrapや Foudartion といった著名なフレームワークであれば、コーダーであらば利用したことがある方は多いでしょう。
つまり、コードリーディングにかかる時間も、作業の引き継ぎにかかる時間も、格段に減ります。
既に知識がある人は簡単にHTMLを追加・更新できるでしょうし、わからなくても充実したリファレンスやWeb上の文献が転がっています。

フレームワークを利用することで、ドキュメントを用意するために割く時間が減ることは間違いありません。

もちろん、これが無名なフレームワークであれば効果は半減します。

CSSフレームワークは、認知度が高いものを採用することが一番無難だと考えます。

考え方を読み解く

なぜこんなにも色んなフレームワークが台頭してきているのか。
それは、考え方が違うからです。

軽量を目指したもの、BEMに合わせたもの、その他アプリケーションを前提としたもの、リッチなフレームワークを目指したもの、、、世の中のフレームワークにはまず 目的 があり、その解決策としてCSSフレームワークを構築したという背景があると思います。

カスタマイズのしやすい Foundartionと、とにかく早くサイトが作れるように設計されているBootstrap のように、それぞれのフレームワークに特徴があります。

このフレームワークがなにを目的としたもので、どんな考え方に基づいて設計されているのか考えてみると、別の視点でCSSフレームワークと向き合えるのではないでしょうか。

まとめ

CSSフレームワークは Foundartion 使ってるからいいや なんて思ってらっしゃる方、もう一度視点を変えて他のフレームワークにも目を向けてはいかがでしょうか。

Android 4系でテキストが縮小表示されるバグ

すっかり忘れていて、久しぶりに遭遇した。

忘れないようにメモ。

 

まず前提として、モバイル非対応のサイトをAndroid 4系で表示した時に発生する。

テキストが半分の位置で改行され、縦長にずれてしまう現象だが、テキストノードが存在するDOMの最下位タグにCSSプロパティの background-color もしくは background-image を指定する。

ただし、見た目上変わる可能性もあるので、background-image : url(transparent.png) のように透明な画像を指定するのが一番手軽

CSSNEXT & Post CSS

PostCSS とかもでてからだいぶ出ているけれども、一体いつ導入を始めればいいのか。

CSSNEXTも、いくら仕様策定中のシンタックスとはいってもこれからどうなるかわからんし….

基本Sassで頑張って部分的に導入してみようかな。

とりあえず gulp-sass で戦えるところは戦おう(決意)

 

関連リンク

postcss/postcss

cssnext/cssnext

gulp-sassとgulp-cssnextで快適コンパイル環境を構築 – Qiita

cssnextを使って最新のcss syntaxで開発するのが良さそう | 69log

cssnextでみる次世代CSSとPostCSS | Yucchiy’s blog

PostCSSとcssnextで最新CSS仕様を先取り! | HTML5Experts.jp