<style>の中にcssを書く

最近はコンポーネント指向が主流でreactやvue、wordpressもその傾向にある。LPのマークアップにreactやvueを導入する状況もあると思うが、htmlとcssを使う程度の場合にはスタイルタグに直接cssを書く方法も十分合理的だ。大昔はhtmlタグに直接styleを書いたり、スタイルタグ内に書くことも流行った。ちょっと前はcssを外部ファイルに分けるのが常識になって、最近ではコンポーネント指向の流行りや表示速度、管理の面からhtmlファイルに直接cssが出力されることも好まれるようになった。cssとhtmlが

BEMを一部採用とそのルール

BEMとは

使い方

大枠のブロックのクラス名を基準に、その内側の要素のクラス名にBEMを考慮したクラス名とする。

cssのルール

メディアクエリ、clamp、gridとflexの使い分け、margin、padding、疑似要素できるだけ使わない

デザインソフトのグループ化とclass、ファイル名

xd,figma,illustratorのレイヤー名、書き出し名とclassの関係、画像ファイル名を統一

常にリファクタリングしていく

リファクタリングとは

デザインソフトのグループ名を整理する段階で、できるだけclass名をBEMで準備しておく。それでも、マークアップ中にclass名を変更したくなるときが来るので手間を惜しまずにデザインソフトとコード、ファイル名を変更する。いつもブロックとしてaboutやinfoなどよくある命名のclass名になるわけではない。そのブロックの意味を英語にしたときに英語に馴染みの薄い日本人には聞き慣れない英語だったりする。そのときは日本語をそのままローマ字にしたclass名としておいて、良い命名を思いついたら変更する。命名に悩んで手が止まるより、マークアップに集中したほうが幾分良い。

作業画面の構成

検索用ブラウザ、デバッグ用ブラウザ、コードエディタ、デザインソフトをウィンドウとして立ち上げた状態で作業を進めることになる。

その他のウィンドウとして、ファイラー、オフィスソフト、チャットツールなども使用することも多い。使用頻度は前述のソフトには及ばないため、別の仮想デスクトップに分けて置くのが集中を邪魔しない。