BLOG2018.01.09HTML・CSSをコーディングする時、私なりに気を付けていることこんにちは関です。今回のブログはマークアップするときに気を付けていることを紹介します。可能な限り!importantは使わない!importantはCSSが複雑になっている可能性があるので、可能な限り使うのは避けています。!important;}IDを使わないIDセレクタはクラスセレクタと違い、ページ内で1回しか使用する事ができませんので使わず、CLASSを使うほうが良いです。JavaScriptのdocument.getElementByIdなどIDを使わざるを得ない場合を除いて、使うことは避けています。class="header"></header>タイプセレクタは使わないタイプセレクタとはh1やulタグのことです。h1やh2などはSEO的に書き換えることもありますので、タイプセレクタだけでプロパティを書くのは危険です。150%;}これでh1はh2やp要素に変わってもCSSは書き換える必要はありません。ショートハンドを使うか使わないか統一するショートハンドとは一括指定することです。10px;」となると、可読性が落ちたりするので、ショートハンドを使うか使わないか統一します。20px;}マージンの方向はmargin-bottomに統一する例えば下記のようなレイアウトがあったとき、マージンの方向を統一します。こっちのボックスは「margin-top」、あっちのボックスは「margin-bottom」が無いようにします。{}または一括にまとめても良いですね。20px;}コンテンツに余白を入れる文字がブラウザの端にくっついていると、文章が読みづらいので、コンテンツの左右に余白を入れます。横スクロールした時に背景が途切れることがあるので、min-widthを入れています。1200px;}min-widthを入れたことで背景が途切れなくなりました。以上が、私なりにコーディングで気を付けていることです。コーディングを極めたい方は「メンテナブルCSS」などで、検索する良いでしょう。CSSの命名規則については弊社のもう後悔したくない!CSSの設計概念を知りメンテナンス性を高めようをご参照ください。個人的にはOOCSS(オブジェクト指向CSS)が好きですが、OOCSSは設計に頭を使うので難しいです。BEM(ベム)は再利用がなく、名前が冗長になりますが、バッティングすることがないので、書きやすいのではないかと思います。CSSこの記事は1年以上前の記事で内容が古くなっている場合があります。【CSS】今更ながら、フレックスボックスの使い方をまとめてみた。