マークアップのスピードを上げたいならCSSのGrid化を検討して欲しい
CSSは使いやすくも、使いにくくもあると思う。
他言語のフレームワークから入ってきてる人からしたら、「デザインを弄る」ためだけにあんな細かな作業をするなんて想像もつかなかったりする。
しかも、よく壊れる。
だいたい、「サイト崩れてる」
ってときは、CSSの問題。もう、嫌になっちゃう
(という僕は、当分CSSを書くことから離れている)
追記：
全然離れてなかった。今朝もCSSを書いていたわ。
Grid化はいわゆる高度なマス目化だ。
これは、今までの技術でもできなくない。というか、やってたサイトが存在している以上、できるに決まってる。
マス目上にする場合
・ブロック要素は何個並びそうか
・ブロックそれぞれの高さは異なるか
みたいなことを調整するのが意外と面倒。
グロースハックな現代は、予期してない変更をしないといけないことがおおい
よくある問題が
マス目っぽくブロック要素を1行に3列の状態で並べていると(3カラム)、そこ1カラムのものを追加したいという話がでてきたりする。
大体の場合、実装する時にこんなことが問題になる。
・そもそも1カラムなんて想定してなかったため、CSSが無い
・横並びにさせるためにfloatさせてるため、clearを導入しないとずれる
・display:inline-blockを使っている場合、余白問題(widthが合計で100%にならない問題)で、微妙にずれる
・条件分岐をマークアップ以前の問題で行わないといけない(必然的にハードコーディングになりやすい)
こうして、問題を解決するために追加のコードを書いて...
と継ぎ足し継ぎ足しすれば、当然醜くなる。
だったらもともとbootstrapを一部導入すればよかったかななんて思う。
どうせ書き換えるなら、捨てやすいコードがいい
bootstrapを入れたくなかった理由や、ハードコーディングしたくない理由は、昔自分が描いたコード(既に適応されてるコード)が、どんどん分からなくなってくるから。
CSSを書く時はゴリゴリ書き進めていいと思うけど、いざ消すとなると、分散していると結構面倒くさい。
デベロッパーツールでかなり短縮はできるけど。
できれば、それぞれのマス目を定義するのに、30行くらいで済ませたい。
さらには、マス目を作るためにHTMLを書き換えて、親要素(wrap)を作ったりなんてのもしたくない。
ある意味、こういうのを解決してくれたのがCSS Gridなんだと思う。
とにかく早く書こう
CSS Gridもそうだけど、まずはとにかく書く量、が重要だと思う。
いろんな方面からインプットして、自分で書いてみる。Gridもそう。
今の知識でもできるから〜なんて言ってると、そのうち置いてかれると思うから。
高度なテクニックなら、同じように↓の情報もおすすめ
CSS3開発者ガイド 第2版 ―モダンWebデザインのスタイル設計
- 作者: Peter Gasston,牧野聡
- 出版社/メーカー: オライリージャパン
- 発売日: 2015/07/03
- メディア: 大型本
- この商品を含むブログ (1件) を見る
まだまだこれから勉強という人へ
大体の場合、相手のイメージを聞いて、細かな色彩とかは別にして、大体の実現可能なCSSコード群を思いつかないのは、まだ勉強が足りてないと思う。
(もちろん、予期してないエラーも起こるけど)
そういう人には、↓を読んで欲しい。
