Scribble at 2023-08-19 12:15:56 Last modified: unmodified

添付画像

Utility-First Fundamentals

仕事でも、それからここのように趣味で運営しているサイトでも、僕は CSS の「フレームワーク」というものは殆ど使っていない。せいぜい、昔から使われてきたエリック・メイヤーの "reset" 用のスタイルシートを最初に読み込むくらいで、後は毎回のようにオリジナルのスタイルシートを組んでいっている。Bootstrap すら自分では仕事で組み込んだことはない(他のコーダが組み込んだ状態で作業することはあるが、その場合は HTML/CSS/JavaScript を扱わないプログラマとして携わることが大半だ)。Tailwind CSS の本体をダウンロードしてみると 362 KB ていどだから、これをベースに作業しても無駄が多いとは思えないから、もちろん有効に使うことも検討したい。ただ、どうもドキュメントを読んでいて困惑させられるのが、Bootstrap でも言えることだが、このインラインのクラス名を大量に書き込むという手法だ。コーディングとして、まずもって醜悪であることは疑いない。僕は、どちらかといえば CSS の名にあるとおりカスケードした要素の構造を使って DOM アクセスを基準に要素へプレゼンテーションを適用するというオーソドックスなスタイルを好んでいるし、結局はその方が扱いやすいという実感がある。個別の要素について頻繁にスタイルの適用内容を変更するならともかく、僕はもともと JavaScript で要素のプレゼンテーションを変更するという UI 設計を好まないし、そういうことは JavaScript が動かないか動かしていない環境では意味を為さないことなので(これでも電通案件でキャンペーン・サイトとかのコーディングを長年にわたってやってるわけだから、「できない」と思ってもらっては困る)、なおさらクラス名を頻繁に変える理由がないのである。

  1. もっと新しいノート <<
  2. >> もっと古いノート

冒頭に戻る


※ 以下の SNS 共有ボタンは JavaScript を使っておらず、ボタンを押すまでは SNS サイトと全く通信しません。

Twitter Facebook