CSS反省会-class名が適当だとこうなるよ。

愛と勇気のいいとこ取り

EROエンジニアのきのピーです。

この記事は、未経験からエンジニアになり、入社2年目で年収600万円を達成するまでの道を書いたブログです。

給料を全部公開している年収600万円の道のブログはこちらです。

前回は、HTMLのclass名を適当につけたら大変になるという話でした。

（前回の記事はこちら）

今回は、CSSの反省会になります。

※CSS：webページのスタイルを指定するための言語

この記事で分かることは、

「HTMLのclass名を適当につけているとCSSもやばい事になる」です。

以下の画像のCSSを試行錯誤しながら組んでみました。

それがこちらです。

以下のソースコードを見て、画面のどこのCSSを書いているかイメージして下さい。

@charset "UTF-8";

body { font-family: 'Noto Sans Japanese', sans-serif;
}

body{
 margin:0;
}


.site h1{
 margin:0;
}

.site img{
}

/*ヘッダーメニュー*/
.menu ul{
 margin:0;
 padding:0;
 list-style: none;
}

.menu li a{
 text-decoration: none;
 display: block;
 padding:3px 42px 20px 42px;
}

.menu li a:hover{
 opacity: 0.7;
}

.menu li{
 float:left;
 width:auto;
}

.menu ul:after{
 clear:both;
 content:"";
 display: block;
}


/*ヘッダー画像*/
.topimg{
 max-width: 100%;
 height:auto;
 vertical-align: bottom;
}


/*サーチルーム*/
.searchRoom{
 margin:0;
 padding:0;
 clear:both;
 margin-bottom: 30px;
}

.searchRoom h2{
 margin:0;
 padding:0;
 margin-bottom: 10px;
}

.searchRoom i{
 padding-right: 5px;
}


/*サーチルームテキスト、セレクトサイズ*/
.searchRoom input{
 text-indent: 0.8em;
 outline: 0;
}


.searchRoom .searchStation{
 border:solid 3px #EF8853;
 height:50px;
 margin-right: 8px;
 font-size:17px;
 width:210px;
 vertical-align: middle;
 border-radius: 5px;
}

.searchRoom .searchMinute{
 border:solid 3px #EF8853;
 height:59px;
 margin: 0;
 margin-right: 5px;
 font-size:17px;
 width:120px;
 vertical-align: top;
 outline: 0;
 border-radius: 0;
}


.searchRoom .searchStructure{
 border:solid 3px #EF8853;
 height:59px;
 margin-right: 5px;
 font-size:17px;
 width:180px;
 vertical-align: middle;
 outline: 0;
}

.searchRoom .searchEn{
 border:solid 3px #EF8853;
 height:59px;
 margin-right: 5px;
 font-size:17px;
 width:110px;
 vertical-align: middle;
 outline: 0;
}


.searchRoom span{
 font-size: 17px;
 margin-right: 12px;
}


.searchRoom input{
border:none;
background:none;
}

/*サーチルーム送信ボタン*/
.searchRoom input[type=submit]{
 color:#fff;
 background-color:#EF493C;
 float: right;
 font-size: 25px;
 text-align: center;
 width:250px;
 text-indent: 0em;
 cursor:pointer;
 height: 58px;
 border-radius: 5px;
 position: relative;
 display: inline-block;
}

.searchRoom input[type=submit]:hover{
 opacity: 0.8;
}

/*サーチマネー*/
.searchMoney{
 margin:0;
 padding:0;
 clear:both;
 margin-bottom: 30px;
}

.searchMoney h2{
 margin:0;
 padding:0;
 margin-bottom: 10px;
}

.searchMoney i{
 padding-right: 5px;
}

/*サーチマネー、セレクト空き*/
.searchMoney input{
 text-indent: 0.8em;
 outline: 0;
}


.searchMoney .stationMoney{
 border:solid 3px #EF8853;
 height:50px;
 margin-right: 8px;
 font-size:17px;
 width:210px;
 vertical-align: middle;
 border-radius: 5px;
}

.searchMoney .minuteMoney{
 border:solid 3px #EF8853;
 height:59px;
 margin: 0;
 margin-right: 5px;
 font-size:17px;
 width:120px;
 vertical-align: top;
 outline: 0;
 border-radius: 0;
}


.searchMoney .structureMoney{
 border:solid 3px #EF8853;
 height:59px;
 margin-right: 5px;
 font-size:17px;
 width:180px;
 vertical-align: middle;
 outline: 0;
}

.yearMoney{
 border:solid 3px #EF8853;
 height:59px;
 margin-right: 5px;
 font-size:17px;
 width:110px;
 vertical-align: middle;
 outline: 0;
}


.searchMoney span{
 font-size: 17px;
 margin-right: 12px;
}

/*サーチマネー送信ボタン*/
#btnSerch2{
 color:#fff;
 background-color:#EF493C;
 float: right;
 font-size: 25px;
 text-align: center;
 width:250px;
 text-indent: 0em;
 cursor:pointer;
 height: 58px;
 border-radius: 5px;
 border:none;
}

.searchMoney input[type=submit]:hover{
 opacity: 0.8;
}


/*コピーライト*/
.copyright p{
 color:#ffffff;
}

/*boxレイアウト*/
.boxA:after{
 content:"";
 display: block;
 clear:both;
}

.box1{
 float:left;
 width:auto;
}

.box2{
 float:right;
 width:auto;
}

/*フッターの形にする*/
.box5{
 background-color: #EF8853;
 padding-top:5px;
 padding-bottom: 5px;
 margin-top:20px;
}

.boxA, .box4, .box5{
 padding-left:15px;
 padding-right: 15px;
}


/*ボックスの上下*/
.boxA{
 padding-top:20px;
 padding-bottom:10px;
}

.box4{
 padding-top:30px;
 padding-bottom: 20px;
}


/*全体の横幅を固定*/
.box3, .box4, .boxA-inner, .box5-inner{
 width:1140px;
 margin-left:auto;
 margin-right: auto;
}

/*boxAの下に羅線を挿入*/
.boxA{
 border-bottom:solid 2px #EF8853;
}

どこの画面部分のCSSか分かりましたか？

直接書いた自分が言うのも何ですが

一切分かりませんでした　笑

ちなみに、こういった分からない状態で「過去に受諾開発したソースコードの修正依頼が来た時」どうなると思いますか？

classが当たっている画面部分の調査だけで1日潰れてしまいます。

コメントアウトを丁寧に書いているんならいいですが、それもないソースコードは時間が恐ろしいほどかかります。

そして、間違いなく

「このソースコードを書いた奴をころ●したい」「マジでう●こみたいなコードを書くなよ」と連呼します。（自分の事ですが、、）

皆さんもclass名を適当にすると後々、自分の事を「こ●したい」と連呼すると思いますので、class名は最低限分かるようにしましょう。

（上のソースコードは最低限の礼儀もないクソコードなので、、、笑）

次回は、「プログラミングスクールに入学する前に準備した事」です。

それでは、グッドブラック！！