【個人的非推奨】令和に持ち込みたくなかった10のコーディング【解説あり】

この記事では、フロントエンドエンジニアの自分が令和に持ち込みたくなかった＝平成に置いてきたかったコーディングを10個上げたいと思います。

なぜこのタイミングでこの記事を上げたかというと、個人的に今の現場でされているコーディングに思うことがありまして、こういう書き方はやめようという啓蒙の意味も込めてというのが大きい理由です。

 

駆け出しの方からすると情報がいろいろあり良くわからないという状態に陥ることも多いかと思います。

 

そんな方はこの記事を読んでいただき古いコードは捨て去っていただければ幸いです。

 

尚、最後にgoogleのコーディング規約もリンク貼っておきますがこれから紹介する「令和に持ち込みたくなかった10のコーディング」はあくまで自分が個人的に思うことです。

 

しかしこれまでのコーダー経験から間違いなく平成に置いていける10個を選んだということは初めにお伝えしたいと思います。

 

この記事を読むことで、以下のことが可能になります。

 

 

令和に持ち込みたくなかった10のコーディング

その10個は下記です。

1. float
2. !important
3. cssハック
4. :before, :after
5. インラインスタイル（style属性）
6. カラーコードの大文字、#ffffff
7. 終了タグの存在しない要素に/
8. 実体参照
9. link、scriptタグのtype属性
10. タグ付きid,class 例ul#example {}

float

 

 

横並びの歴史で言うとfloatは昔からわずらわしい存在でした。

なぜなら横並びを解除しなけれなならないという仕様になっているからです。

 

そのためclear:fixという手法も登場したのですが、display:tableが登場し、さらにdisplay:flexが出てfloatは完全に過去の遺産と化したのです。

 

flexの方が利便性が高いことの一例として記述量の少なさがあります。

floatは解除するために::afterという疑似要素を作り解除することになりますが、flexはそれが不要です。

※試しに下記を消すと3つ目のボックスが横に並んでしまうことがわかります。

.float::after {
content: ”;
display: block;
clear: both;
}

 

その他にもflexは自由度が高く思うままにレイアウトができるプロパティがたくさん用意されてるためflex>>>>>floatになったというわけです。

!important

 

 

下記記事でも書きましたが!importantは不要なので使わない方がいいです。

【駆け出しエンジニアへ】未経験でもこれは覚えて入社しろ１０のCSS

 

!importantを不用意に乱発しているサイトは末期なサイトと思った方がいいです。

 

!importantを使う場面としてcssが効かないからとりあえず使ってみたり、開発者の気持ち的に絶対その値で揺るぎないからというような理由で使われてるケースも目にします。

 

つまりCSSセレクタの詳細度（優先順位）を基本的に理解していないとやりがちです。

 

事実、!importantを全部外しても全く崩れはなかったりします。

 

それは!importantで記述した値を!importantで書き換えてる可能性もあります。その場合どちらも消せば!importantがついてない状態と同じですよね。

 

つまりこのようにカオスなサイトとなってしまうのが!importantです。

 

とはいえ、!importantを使うことを許諾する例もあります。それは調整クラスと呼ばれるクラスに値を付与する場合です。主な使い方はこうです。

 

.ml5 {
margin-left: 5px!important;
｝

 

しかし、この調整クラス自体も実は微妙で、使い始めるとルールがどんどん破たんするので極力使用せず最後の手段くらいに思っておいた方がいいです。

 

なぜ破たんするかというとこのページのテキスト下のマージンは10pxだけど別のページは20px空いていたというようにルールを統一することができなくなり把握が困難だからです。

 

CSSハック

 

 

CSSハックとは要するに、ブラウザ固有に反映させるcssです。例えば、IE10だけ崩れているがそれ以外に反映させたくない場合IE10だけに適応するようにcssを記述します。

 

下記のように書きます。

 

崩れを治すんだからいいじゃんと思われるかもしれませんが、CSSハックも非推奨です。

CSSハックを使用しなくても表示崩れが起きないというのが基本的なcssの概念です。

 

googleの規約にもCSSは非推奨となっており、極力違うアプローチを試すことという一文があります。

 

:before, :after

 

 

:before, :afterを使ってる記事やサイトが未だにありますが、

 

 

 

 

 

インラインスタイル（style属性）

 

 

インラインスタイルとは、下記の通りhtml内のタグスタイル属性としてCSSを付与するやり方です。

<p style=”color: red”>赤</p>

 

 

 

 

 

 

カラーコードは#fffでも#ffffffでも#FFFFFFでも同じ白が設定されますが#fff以外は不要であり統率がとれなくなるので省略し小文字で統一しましょう。

 

その他にも0.8→.8、0px→0など小数点前の0を省略したりpxを省略できるので極力省略でサイトを統一しましょう。

 

 

 

 

 

 

 

 

 

 

 

まとめ

以上、【個人的非推奨】令和に持ち込みたくなかった10のコーディングでした。

個人的とは言いつつかなり皆さん共通して思ってることだろうと想像します。

 

ちなみにかぶってる個所もありますがgoogleのコーディング規約をリンクとして貼っておきますので気になる方はこちらも参照していただければと思います。

Google HTML/CSS Style Guide

google.github.io

Google HTML/CSS Style Guideを翻訳してみた - Qiita

(の翻訳版が必要になったので、Google翻訳のお世話になりつつ翻訳...

qiita.com