CSSを超効率的に書くために心がけていること

僕がCSSを超効率的に書くために心がけていることをお話しします。初心者にはレベルが高いものもあるので、自分がどこまでできているのかたまにチェックするためにブックマークしておくことをおすすめします。

結論

脳内でスラスラとCSSを唱えられる
究極にタイピング速度を速める
最大限にまでタイプ数を減らす＆マウスを使わない
ディスプレイがでかい、マシンスペックが高い

これができている人が最強です。そして、できていない人はこれを理想として一歩ずつ前進していきましょう。超速くなるはずです。

脳内でスラスラとCSSを唱えられる

デザインをみただけでHTML構造とCSSをスラスラ脳内で唱えられるようにする

これに関しては慣れです。毎日、デザインを模写してCSSの練習をするなどして嫌でも量をこなすことが大切です。でも、これが最も効き目のある近道です。慣れ以外の方法でこれを身に付けるのは難易度高いので、慣れるためにCSSを日頃から書く習慣を身につけましょう。HTMLの構造あってのCSSなので、HTML構造をスラスラといえることも必須になってきます。

HTML書いてからCSS、CSSはヘッダーから始めてフッターへ、そのあとレスポンシブ対応を一気に書き進めていく

つくりやすいパーツからつくるよりはヘッダーからフッターへと上から下まで一気に書き進めていくのが速いです。僕はスマホデザインを一度確認した上でPCから書き始めて、レスポンシブ対応はそれが終わった後にしています。画像の書き出しは実は一番最後に一気に進めています。ブラウザでの更新確認を減らすことも大切です。HTMLとCSSを一気に書き進めた後に一度だけ更新。その後の微調整でブラウザを何度か更新するという状態が理想的です。

クラス名で迷わないようにしておく

クラス名をつけるのに毎回迷っていませんか？僕も昔は迷っていましたが、今は明確なルールを自分の中に持っているので全く迷わなくなりました。CSS設計や命名規則といったものを調べていくとクラス名を決めるコツにたどり着けますが、奥が深すぎて戻ってこれなくなる可能性もあります。まずは自分の中でルール化して改善していくことが大切です。

プロパティ順を統一しておく

プロパティを記述する順序に明確なルールを持たせておくと、迷わずコーディングができて効率的です。僕が記述するときは、プロパティの影響範囲が外からだんだんと内側に影響するような順序に記述しいます。Googleはアルファベット順でプロパティを記述しているみたいです。

position、marginなどの配置を制御するプロパティ
width、height、border-radiusなどの形状を決めるプロパティ
border、backgroundなどの装飾系プロパティ
display: flex; justify-content: center; align-items: center; などの中の要素の配置を決定するプロパティ
font-size: 14px; などのフォントの大きさなどを決めるプロパティ

究極にタイピング速度を速める

隣の人と比べて倍のスピードでタイピングができれば、半分の時間でコーディングが終わります。ホームポジションでのブラインドタッチは当然ですが、波括弧「{」やセミコロン「;」もキーボードを見ずに打てることは効率の上で大切です。

最大限にまでタイプ数を減らす＆マウスを使わない

書き出しの雛形をもっておく

リセットCSSやデフォルトのスタイルシート、いつもつかっているフォントの読み込みなど毎回使っているCSSは雛形としてもっておくとよいです。フォルダをコピーしてCSSを書き始めるなりしておくと効率的に開発できます。

ショートカットを駆使する

ショートカットにもいろいろありますが、基本戦略はマウスを使わないことです。マウス操作は時間がかかります。
macにはカーソル移動のショートカットがあるのですが、これは知らないと損します。無意識に利用しているくらい後々手に馴染んでくるショートカットです。

Ctrl + B で1文字前に移動
Ctrl + P で1行前に移動
Ctrl + F で1文字後に移動
Ctrl + N で1行後に移動

Stylusを使う

StylusというCSSの上位言語です。波括弧やセミコロン、コロンを省略したり、オリジナルな命令をつくったりしてタイプ数を減らすことができます。SCSSやLESSもありますが、波括弧などを書かなくてはならないのでStylusと比較するとタイプ数が多くなります。以下のツイートを参考にしてください。

CSSが13行から6行になる。
波カッコもコロンもセミコロンもいらない。
自分でCSSの命令もつくれる。

これが俺の爆速コーディングの秘訣。
これはStylusという言語でCSSを拡張した言語です。#駆け出しエンジニアと繋がりたい pic.twitter.com/DzbI0NiZ6K
— YutoSeta＠ウェブ制作とコーディングのメディア (@YutoSeta) October 23, 2019

昨日のstylusの解説ですが、
circleって命令をつくっておくと、
circle 80px
とすると80pxの正円がつくれます。
独自にプロパティがつくれます。 pic.twitter.com/IxPn6OO0Qv
— YutoSeta＠ウェブ制作とコーディングのメディア (@YutoSeta) October 24, 2019

emmetを使う

emmetというテキストエディタのプラグインを使うと、省略記法でCSSがどんどんかけます。

w ＝＞　width
h => height
lh => line-height

HTML/CSSを爆速コーディング Emmet入門
https://blogs.adobe.com/japan/web-learning-emmet-why-emmet/

ディスプレイがでかい、マシンスペックが高い

画面の切り替えや視点の移動を極力なくす

大きな画面でデュアルディスプレイにすると、デザインデータを見ながらソースコードをかいてブラウザの更新をするのを画面の切り替えなく行えます。視点の移動をなくすためにブラウザのタブでよく使うサイトを事前に開いておくのもよいです。

タイピングスピードについてこれるマシンを使う

これも意外と大事ですが、入力スピードや操作がある程度はやくなってくるとスペックの低いパソコンだとモタついてCSSコーディングが捗りません。コピペですらコンマ数秒のラグが発生するみたいなケースもあります。

まとめ

難易度の低いものから、ひとつひとつ取り入れて実践していってください。
僕らはCSSの効率化を極めるためにCSSを書いているわけではないのですが、のめりこめるくらいまで慣れてくると頭を使わずに単純作業となっていてコーディング業務も楽しくなっているはずです。

この記事をかいてみての感想

Yuto Seta

CSSに関する質問やブログ記事として解説して欲しいテーマなどあれば、ぜひコメントまってます！

▼書き足したい内容メモ
CSSのコーディング効率だけを求めた超大作になってしまった。そして、Stylus、クラス命名規則、プロパティ順、ショートカットなどはそれだけで何本もの記事にできるくらい。

結論