今までcssはすべてオリジナルで書いてきました。（リセットcssはパブリックドメインのものは使用していましたが）
その中でサイト構築の効率化を考えて、PhraseExpressやクリボーなど使ってきました。少しは早くなるのですが、根本的な解決になっていないように感じて、構築しながら、いつも効率的な方法はないかと考えていました。
▼クリボーについて少し書いています
ウェブサイトやメールソフトなどhtmlタグが使用されているもの（表示上はタグは見えません）をコピーすると、htmlタグも一緒にコピーされることがあります。htmlタグごとコピーしてほしい場合もありますが、テキストだけ欲し …
▼PhraseExperessについて少し書いています
AtomでPhraseExpressを使うと自動保管で重複したりインデントがずれるたりすることはありませんか？私はこの現象が起きていて、どう解決しようかと思っていました。そのとき文字数の違いで動きが違うことに気付き、その設定があることが分かりました。この方法と原因を共有したいと思います。
phpやjavascriptを使って開発
決まったコードを入力するとソースセット（html、css、javascript、ファイル読込）を書き出すようなウェブアプリを作っていたのですが、どうも使い勝手がよく仕上がりませんでした。
なぜしっくりこないかと考えると、構築・開発時にはテキストエディタ以外のソフトは基本的には使いたくないからです。特にウィンドウを変更しないといけないのは不便でした。そういった点ではPhraseExpressやクリボーはウィンドウを切り替えることなく利用できるので非常に使いやすいです。なので、作っていたウェブアプリは、PhraseExpressやクリボーの劣化版と言わざるを得ません。
テキストエディタ→（FTPソフト→）ブラウザ→テキストエディタ→・・・
この流れが私にとっては一番合っています。このフローに近づけることが（私の場合）効率化に繋がります。
bootstrapやTailwind CSSの利用
以前から気になっていたbootstrap4を最近の構築で使用してみました。
すべてをbootstrapを使用するわけではなく、グローバルメニューやcssを書くしかない箇所はstyle.cssに書いたのですが、使ってみた感じだと cssを書く量は3分の1か半分程になったように感じます。
bootstrapはカスタマイズせず、そのまま利用しています。そのため、コンテンツごとの隙間などmarginやpaddingを大きくとる必要がある場合などはクラスを指定しています。
また、下記のようにリストの場合などタグが複数になるが、同じ値を指定したい場合は、修正が入ったときにクラスで指定した方が改修が楽かと思いましたので、クラス指定し、cssで書きました。
<ul> <li class="mb-3">リスト</li> <li class="mb-3">リスト</li> <li class="mb-3">リスト</li> </ul>
よって、指定するclassが標準では無い場合や同じスタイルの指定を複数のタグに行う場合（例えばリストやギャラリーなど）はcssに書き出すというルールで、ある程度うまく利用できそうです。
Tailwind CSS
どのレベルのスタイルまでbootstrapで書くのが望ましいか調べていたところ、Tailwind CSSというcssのフレームワークに関する記事を見かけました。内容を見てみると私にはbootstrapよりも合ってそうな気が…
というのも、効率化を考えていたときに、独自のユーティリティcssファイルを作るのがベターかなと思っていた時期がありました。そのイメージにTailwind CSSが近いように感じます。
次回は「Tailwind CSS」を試してみようかと思っています。
余談（独自のユーティリティcssファイルを作るのがベターな理由）
私は同じスタイルでもコンテンツによってクラスを分けています。コンテンツごとにすべてクラスが分かれているといっても過言ではありません。
理由は、クラスを共通化して対応しても、このコンテンツのここだけはこうして欲しいなど結局コンテンツごとに別々のスタイルになっていくことが多かったのです。そうなると、共通化していると他に影響が出ないように、後付けでクラスが増えていきます。増やす予定ではなかったクラスが増えるので、ソースは汚くなっていきます。
と、それによって結局メンテナンス性が落ちていきます。よって、最初からコンテンツごとにクラスを分けるようになりました。ですが、その結果として、cssを書く量が増えていきます。同じスタイルはコピペするのですが、スタイルを探したり、クラス名を変更したりと地味に手間です。
ここで思ったのが、「結局コンテンツごとにクラスを分けて書いていくのであれば、ユーティリティcssファイルを作って行うのとあまり違いは無いのでは？」ということでした。もちろんメンテナンス性は落ちると思います。ですが、クラス名を把握できていれば、あまり問題ないように思います。
ということで、「Tailwind CSS」に大きな希望を抱いている今日この頃です。
ちなみに「Tailwind CSS」を利用する際も、同じスタイルの指定を複数のタグに行う場合（例えばリストやギャラリーなど）はcssに書き出すというルールは適応しようと思っています。この部分はcssで書いた方がメンテナンス性も保ちやすく思いますので。
最後に
すみません、ダラダラと書いてしまいました。
今後は「bootstrap4」と「Tailwind CSS」のそれぞれで、最低限のcssだけを記述して、どういったレイアウトができるかなど試した記事も書けたらと思います。それを思ったベース記事として残しておきます。
スポンサーリンク
