CSS設計と保守性を考えたコーディング【iSARA6期/Day 8】

バンコクのノマドエンジニア育成講座『iSARA』5期生で、フリーランスWEBエンジニアのへぼちゃんずです。

5期の講座にはなかった6期の現地講座をまとめます。

» プログラミングスクール「iSara」に興味のある人が最初に見るべきブログ

Day 8 - 1コマ目は『知らないとまずい！？いいコード、悪いコードケーススタディ with CSS設計思想』です。

TOTO

形にはなってるけど自分のコードが良いか悪いかわからない

GIGLIO

CSS設計っておいしいの？

講師は、しょーご(@samuraibrass)さんです。

しょーごさんはiSARA3rd卒業から1年半フリーランスとして活動されていますが、

技術面（コーディング）で契約を切られたことはないそうです。

この講座で学べるのは「実務経験1年の人も意外に抜けてる知識」です。

駆け出しコーダーの方はもちろん、すでに案件を獲得されている方も必読です！

この記事を読むメリット

WEB制作会社と対等に話せる知識が得られる
大規模サイトの設計力が身につく
コーディング面でのSEO対策もカバーできる
ディレクターやデザイナーにも必須の知識が体系的にまとめられている

そしてこれが、しょーごさんの初めての講座になります。

CSS設計と保守性を考えたコーディング【iSARA6期/Day 8】
【HTML編】
【CSS/Sass編】
継続して案件をもらえる方程式
ライブコーディングYouTube動画とXDデザインカンプnote
おわり

CSS設計と保守性を考えたコーディング【iSARA6期/Day 8】

いいコード、悪いコードケーススタディ with CSS 設計思想

【HTML】いいコード、悪いコード
【CSS】いいコードを書くためのCSS設計思想入門

【HTML編】

linkタグまとめてますか？
scriptは<head>より</body>の上ですよ？
meta descriptionをページ毎に設定してますか？
div地獄に堕ちてませんか？
レイアウト3兄弟つかってますか？
h（見出し）タグのルール理解してますか？

linkタグまとめてますか？

<head>
　<link rel="stylesheet" href="css/style.css">
　<link rel="stylesheet" href="css/about.css">
　<link rel="stylesheet" href="css/company.css">
　<link rel="stylesheet" href="css/contact.css">
</head>

↑のようにページ毎にcssを読み込んでいる人はstyle.cssにまとめましょう。

scriptは<head>より</body>の上ですよ？

<!-- No Good -->
<head>
　<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
　<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
</head>
<!-- Good -->
　<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
　<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
</body>

head内で読み込んでいるあいだWEBページは表示されなくなります。

ユーザーは3秒待ってくれないので、離脱率が上がり、SEO的にもNGです。

致し方ない時はローディングアニメーションを使いましょう。

meta descriptionをページ毎に設定してますか？

<head>
  <title>iSara[イサラ]｜バンコクのノマドエンジニア育成講座</title>
  <meta name="keywords" content="プログラミング,ノマド">
　<meta name="description" content="iSara[イサラ]とは「稼ぐこと」にフォーカスしたエンジニア育成講座（実質０円）です。iSaraで「基本的なプログラミングスキル」は教えません。基礎的なプログラミングスキルは無料で学べる時代。iSaraでは、基礎知識学習は事前課題とチャットサポートのみ。さぁ、稼ぐスキルを身に着けましょう。"/>
</head>

meta descriptionとは、検索結果のタイトルの下に表示されるそのサイトや記事の説明（概要）文のことです。

SEO対策以外にもユーザーへのPRが目的です（設定しないとクリック率が下がる）。

表示される文字数はPCで120文字前後、スマホで70文字前後です。

ページ毎に設定するのが基本です（ページ毎に設定するんですね…！ by 実務経験1年）。

WordPressサイトなら「All in One SEO Pack」や「カスタムフィールド」を使うことによって実装できます。

ちなみに、meta keywordsはSEO的にはもうなくて良いものですが、制作会社からの指示書にはまだ指定の記載があります。

div地獄に堕ちてませんか？

<div class="article">
 <div class="article-wrapper">
  <h2>記事のタイトル</h2>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<p>
 </div>
</div>

divは意味を持たないブロックです。

多用するとGoogleがコンテンツを正しく理解できない恐れがあります。

では上記のようなケースでは何タグを使うべきでしょうか。

レイアウト3兄弟つかってますか？

section → ブロックの塊ごとに区切る
article → 記事ブロックを囲む
aside → サイドバーや広告など（ページの内容と直接関係ない要素）を囲む

いずれにも当てはまらなそうならdivを使うという認識でOKです。

レイアウト3兄弟なんてキャッチーにネーミングされたら忘れませんね！

ここまでの内容は、しょーごさん本人がQiitaにまとめてくださいました！

h（見出し）タグのルール理解してますか？

h1〜h6まで順番に使う
フォントの大きさ等デザインの都合で使わない
h1は1回だけ使える（h2〜h6は何回使ってもOK）
h1タグで広い範囲を囲むのはNG
h1でimgタグを囲っても良い

ロゴをh1タグで囲むケースが多いと思いますが、ロゴってだいたい画像です。

そんな時は以下のようにimgタグをh1タグで囲ってあげればOKです。

その際、altに会社名やブランド名を入れます。

<h1><a href="#"><img src="img/isara.png" alt="iSARA"></a></h1>

【CSS/Sass編】

【Sass】ネストは孫まで&class命名する
なぜCSS設計が大事なのか
四大原則
四大設計思想
コーダー with CSS

【Sass】ネストは孫まで&class命名する

.oya {
	position: relative;

	.ko {
		position: absolute;
		top: 50%;
		left: 50%;
		
		.mago {
			text-align: center;
		}
	}
}

Sassの入れ子は3つまでを基本としましょう。

ネストが深くなると可読性が悪くなり、保守性にも問題があります。

また、タグを直接指定せずclass命名しましょう。

タグは変更に弱い（h2 → h3に変えるなど）、classなら別の場所にも使えます。

なぜCSS設計が大事なのか

メンテナンス性 → サイトは作って終わりではない
大規模サイト対策 → 命名規則がないとクラス名がかぶる
複数人でのコーディング → 制作会社によってはコーディング規約が決められている

メンテナンス性

サイトは作ってからがスタートなので、必ず更新・改修することになります。

他人はもちろん自分が見ても役割がわかるクラス名が理想です。

大規模サイト対策

ページ数が増えるほど、クラス名がバッティングしておかしな挙動を起こします。

特にトップページの一覧から、その下層ページに飛ぶ場合などsection名が同じなので、かぶりがちですよね。

また、命名規則があることによって「クラス名」や「画像名」を考える時間をなくせるので、コーディングスピードが上がります。

複数人でのコーディング

細かなコーディング規約が決められている制作会社もあるので、CSS設計を知ることで

制作会社と対等に話せる
受注できる案件の幅も広がる

といったメリットがあります。

四大原則

予測しやすい → クラス名を見て役割・挙動がわかる
再利用しやすい → 共通パーツを使いまわしてコードを短く、スピードを上げる
保守しやすい → 他人が見ても、自分で見てもわかるコード
拡張しやすい → 新しい機能を盛り込みやすい

CSS設計で最重要なのは

『共通コンポーネントを意識すること』

この考えはデザインにも共通する概念です。

コードを書き出す前に、共通部品を洗い出しましょう。

四大思想

BEM（Block-Element-Modifier） - 利用率38%
OOCSS（構造と見た目の分離） - 利用率15%
SMACSS - 利用率15%
FLOCSS（前者3つの良いとこ取り）

BEMが一番メジャーですが、そのBEMの命名規則をベースとした

あの、はにわまん(@haniwa008)さんが採用するCSS設計が「FLOCSS」です。

サイバーエージェントのエンジニアである谷拓樹さんが設計したもので、本も執筆されています。

Web制作者のためのCSS設計の教科書

posted with ヨメレバ

谷拓樹インプレス 2014年08月

コーダー with CSS

1〜3ヶ月目 → まずは形にすることが大事
3ヶ月目〜 → CSS設計やSEOを意識したコーディング
2年目〜 → FLOCSSやBEMなど案件毎に使い分ける

継続して案件をもらえる方程式

顧客満足度 - 事前期待値 > 0

最後に、しょーごさんが『継続して案件をもらえる方程式』を教えてくれました。

相手の期待を超える成果物を、相手の想定より早く納品する。

特にフリーランスは、労働時間 = 対価ではないので

圧倒的な価値を提供した者の勝ち

というiSARAの考えやGiveの精神にも通じます。

他にも発注者の視点に立つと、スキル面以外での『人間性』が大事とも仰っていました。

相手に負担をかけないコミュニケーション → 質問はまとめて（何往復もさせない）
自責に落とし込む → たとえ相手が悪くても、その結果を招いたのは自分自身

ライブコーディングYouTube動画とXDデザインカンプnote

そんなTHE・エンジニアのしょーごさんが『ライブコーディング動画』と、

『XDデザインカンプnote』をリリースされました！

XDで作られたデザインカンプからのコーディング
それを元に自分で考えてSPデザインをコーディング
それをしょーごさん自らが確認してくれる
さらにポートフォリオにしてオッケー！

という超実践的なサービスです。

「class命名」「Emmet」「Sass」「Gulp」…

『まずは形にすること』の次のステップにこのライブコーディング動画は超有益なはずです！！

おわり

詳しくはオフレコですが、iSARA恒例しょーごさんの"フリーランス失敗談"も聞けました。

『クライアントに泣きながら電話した』という逸話はぜひ、しょーごさんに電話で聞いてください。笑

泣きながら電話越しに謝ったこともありました(　ﾟдﾟ)
人に語れるフリーランス失敗談は結構蓄積してる
ここ数ヶ月は良くも悪くもそういうのないから、そろそろチャレンジするかなぁ
— しょーご@マークアップエンジニア (@samuraibrass) November 7, 2019

人気記事【全４６本】プログラミングスクール『ISARA』ブログまとめ