2022年5月24日SHAREツイートシェアはてブLINEPocket僕がCSSを超効率的に書くために心がけていることをお話しします。初心者にはレベルが高いものもあるので、自分がどこまでできているのかたまにチェックするためにブックマークしておくことをおすすめします。脳内でスラスラとCSSを唱えられる究極にタイピング速度を速める最大限にまでタイプ数を減らす&マウスを使わないディスプレイがでかい、マシンスペックが高いこれができている人が最強です。できていない人はこれを理想として一歩ずつ前進していきましょう。脳内でスラスラとCSSを唱えられるデザインをみただけでHTML構造とCSSをスラスラ脳内で唱えられるようにするこれに関しては慣れです。毎日、デザインを模写してCSSの練習をするなどして嫌でも量をこなすことが大切です。これが最も効き目のある近道です。慣れ以外の方法でこれを身に付けるのは難易度高いので、慣れるためにCSSを日頃から書く習慣を身につけましょう。HTMLの構造あってのCSSなので、HTML構造をスラスラといえることも必須になってきます。HTML書いてからCSS、CSSはヘッダーから始めてフッターへ、そのあとレスポンシブ対応を一気に書き進めていくつくりやすいパーツからつくるよりはヘッダーからフッターへと上から下まで一気に書き進めていくのが速いです。僕はスマホデザインを一度確認した上でPCから書き始めて、レスポンシブ対応はそれが終わった後にしています。画像の書き出しは実は一番最後に一気に進めています。ブラウザでの更新確認を減らすことも大切です。HTMLとCSSを一気に書き進めた後に一度だけ更新。その後の微調整でブラウザを何度か更新するという状態が理想的です。クラス名で迷わないようにしておくクラス名をつけるのに毎回迷っていませんか?僕も昔は迷っていましたが、今は明確なルールを自分の中に持っているので全く迷わなくなりました。CSS設計や命名規則といったものを調べていくとクラス名を決めるコツにたどり着けますが、奥が深すぎて戻ってこれなくなる可能性もあります。自分の中でルール化して改善していくことが大切です。プロパティ順を統一しておくプロパティを記述する順序に明確なルールを持たせておくと、迷わずコーディングができて効率的です。僕が記述するときは、プロパティの影響範囲が外からだんだんと内側に影響するような順序に記述しいます。Googleはアルファベット順でプロパティを記述しているみたいです。フォントの大きさなどを決めるプロパティ究極にタイピング速度を速める隣の人と比べて倍のスピードでタイピングができれば、半分の時間でコーディングが終わります。ホームポジションでのブラインドタッチは当然ですが、波括弧「{」やセミコロン「;」もキーボードを見ずに打てることは効率の上で大切です。最大限にまでタイプ数を減らす&マウスを使わない書き出しの雛形をもっておくリセットCSSやデフォルトのスタイルシート、いつもつかっているフォントの読み込みなど毎回使っているCSSは雛形としてもっておくとよいです。フォルダをコピーしてCSSを書き始めるなりしておくと効率的に開発できます。ショートカットを駆使するショートカットにもいろいろありますが、基本戦略はマウスを使わないことです。マウス操作は時間がかかります。macにはカーソル移動のショートカットがあるのですが、これは知らないと損します。無意識に利用しているくらい後々手に馴染んでくるショートカットです。1行後に移動Stylusを使うStylusというCSSの上位言語です。波括弧やセミコロン、コロンを省略したり、オリジナルな命令をつくったりしてタイプ数を減らすことができます。SCSSやLESSもありますが、波括弧などを書かなくてはならないのでStylusと比較するとタイプ数が多くなります。以下のツイートを参考にしてください。CSSが13行から6行になる。波カッコもコロンもセミコロンもいらない。自分でCSSの命令もつくれる。これが俺の爆速コーディングの秘訣。これはStylusという言語でCSSを拡張した言語です。80pxとすると80pxの正円がつくれます。独自にプロパティがつくれます。2019emmetを使うemmetというテキストエディタのプラグインを使うと、省略記法でCSSがどんどんかけます。Emmet入門https://blogs.adobe.com/japan/web-learning-emmet-why-emmet/ディスプレイがでかい、マシンスペックが高い画面の切り替えや視点の移動を極力なくす大きな画面でデュアルディスプレイにすると、デザインデータを見ながらソースコードをかいてブラウザの更新をするのを画面の切り替えなく行えます。視点の移動をなくすためにブラウザのタブでよく使うサイトを事前に開いておくのもよいです。タイピングスピードについてこれるマシンを使うこれも意外と大事ですが、入力スピードや操作がある程度はやくなってくるとスペックの低いパソコンだとモタついてCSSコーディングが捗りません。コピペですらコンマ数秒のラグが発生するみたいなケースもあります。まとめ難易度の低いものから、ひとつひとつ取り入れて実践していってください。僕らはCSSの効率化を極めるためにCSSを書いているわけではないのですが、のめりこめるくらいまで慣れてくると頭を使わずに単純作業となっていてコーディング業務も楽しくなっているはずです。あれば、ぜひコメントまってます!▼書き足したい内容メモCSSのコーディング効率だけを求めた超大作になってしまった。Stylus、クラス命名規則、プロパティ順、ショートカットなどはそれだけで何本もの記事にできるくらい。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。