こんにちは！コーダーの大野です！！！

最近弊社のブログの全然関係ない記事で
僕がめっちゃいじられてるんですが、なぜでしょうか？

DJパリピッピコーディング大好き後輩、、、、、、

そんな目で見られてたんだ、、、、、

僕がいじられている記事はこちら
日常会話で解説！業務を改善する『PDCAサイクル』
一本取られた！大分市府内町の焼肉屋さん戦略！

そんなことは置いておいて
一気に寒くなり始めたましたが、いかがお過ごしでしょうか？

僕はと言うと、三度のご飯の次くらいにコーディングが好きになりつつあります。

単にHTMLとCSSだけでも終わりがないんですよね。

勉強し続けたり、考えながら仕事ができるのはとても楽しいです。

どうやったら効率的に書けるかな～

この考え方は参考になるな～

最低でも１日１回は考えて、１つ新しいことを取り入れるようにしているので、それに伴って書き方がどんどん変わっていきます。

毎日新鮮な気持ちというか、全く新しいことを覚えているかのようなワクワク感で毎日コーディングをしています。控えめに言って最高。

ということで、今回は書き方を絶賛模索中の僕がHTMLとCSSをコーディングをしているときに

個人的に意識した方がいい、取り入れた方がいい！

と思ったものを書いていこうと思います！

個人的に意識した方がいいと思ったこと

1.HTMLは全て先に書き上げる

デザインを見て、ブロックを整理して書くので、マークアップしている時間はかなり短くなります。
デザインとにらめっこする時間は増えますが、よく考えてから書くので頭の中が整理されます。
おかげで前よりも見やすいHTMLが書けるようになった気がします。

2.マルチクラスは極力使わない

<p class=“text red”>レッド</p>

.red{color: red;}

のようなCSSを変更するためにHTMLを変更しないといけないようなマークアップはHTMLが汚くなり、メンテナンス性が下がるのでしない。BEMでもよっぽどのことがない限りシングルクラスで書きましょう。と書かれていますね。

3.今あるもの(できること)でやろうとしない

今やってることが一番いいと思わずに作る前にまず情報収集！
そして作り始めてからも情報収集！
めっちゃ大事だな～と思います。

自分の引き出しは多ければ多いだけいいので、色んな書き方をどんどん覚えて臨機応変に対応していけるようにしたいです。

業界としても新しい技術や流行がどんどん出てくるので、時代遅れにならないようにしたいですね！

4.とりあえずやる

迷ったらやりましょう、やってから考えましょう、現場からは以上です。

個人的に取り入れた方がいいと思ったもの

1.吉本式BEM設計

HTMLを書く時は最近は試験的に、吉本式BEM設計を参考にしています。

簡単に言うと
コーディングにある程度の制約を持たせて、わかりやすく、メンテナンスしやすくしよう！
というものです。

色々試してみたんですが、個人的にはこれが一番わかりやすいので、
このまま導入しようかなと思っています。

当選確実。

吉本式BEM設計
http://tsudoi.org/guide/about/

2.命名規則

上記の吉本式 BEM設計とこちらの記事を参考につけています。
導入する前に書いていたHTMLと比べるとすごくわかりやすいHTMLが書けるようになったと思います。

これも当選確実。

CSSのクラス名を決めるときに使うリストをつくりました
https://qiita.com/manabuyasuda/items/dbb76ed36970bec95470

3.Sass

Syntactically Awesome StyleSheetの略です。
何を言ってるかわかりませんね、困ったときはGoogle先生に聞きましょう。

構文的に素晴らしいスタイルシートです。
わかりやすいですね。

Sass（サース、英: Syntactically Awesome Stylesheets）は、ハンプトン・キャトリンが設計しネイサン・バイゼンバウム[5]が開発したスタイルシート言語である。 後にSassファイルに用いられる単純なスクリプト言語である SassScript 用の拡張が加えられた。

CSSの機能を拡張して、変数や関数を使い効率的に書けるようにしたもの

といった感じです。
日本ではサス呼ばれることが多いそうです。

Sassのファイルの構成に関してはこちらも吉本式BEM設計を参考にしています。
Sassについて書いてしまうととても長くなるので割愛します、、、、いずれ書きたいですね、、、、

生のCSS書くのが嫌になってしまうくらい良いのです、、、、、

ちなみにエディターはVisual Studio Codeを使用しています。

2018年の時点でCSSプリプロセッサでSassを使用している人は世界のフロントエンド開発者の全体の65％

一方で生のCSSを書いている人は14％という結果だったそうです。

もうSassで書くのが当たり前、といった風潮なんでしょうか。

どちらにしても効率的に書いていきたいところですね。

The Front-End Tooling Survey 2018 - Results
https://ashleynolan.co.uk/blog/frontend-tooling-survey-2018-results

これから意識していきたいこと

HTMLに依存しないCSS設計

色んなパターンに柔軟に対応できる設計を意識したいです。
具体的に言えばHTMLタグにCSSを当てないとか、ブロック要素にmarginを当てない等を意識した方がいいかなと思っています。

セレクタを短くする

セレクタが長くなってしまうとメンテナンス性が悪くなるなと思いました。
見やすいCSSをもっと心掛けていこうと思います。セレクタをもっと限定的にするということも意識した方が良さそうです。

3回繰り返したものはパターンとして成立する

@mixinに入れてCSSをガンガンコンポーネント化していきたいです。

Emmet使いこなしたい

これはもう願望です。頑張ります。

2019年11月現在の僕の状況をざっくりとまとめてみました。
書きたいことは山のようにあるんですが、どうしても長くなってしまうので、
機会があればまた詳しく書いていきたいと思います！！！！

来月は上に書いたことから取捨選択して、また違うことを意識しながらコーディングしているんだろうな〜

と思います。

このときはこういうことを意識しながら書いていたな〜
なんてことが後々わかるようにどこかに書き溜めていくと面白いかもしれませんね！

それではみなさん、よいコーディングライフを！！