Go to Qiita Advent Calendar 2024 Top
LoginSignup
15
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Qiita株式会社Advent Calendar 2023

Day 11
@kabechiyo13(かべちよ)inQiita株式会社

レビュー時に「読みやすいな」と思うHTML・CSS

Last updated at Posted at 2023-12-10

これは何

個人的にコードレビューにはいるときに読みやすいなと感じるコードの特徴をまとめてみました。

レビュー時に「読みやすいな」と思うコードの特徴

不要なマークアップがない

本来なくても良いマークアップがあると、構造がその分複雑になるためコードを読みづらくなることが多いです。
また、不要なマークアップは減らした方がパフォーマンス的にも良いです。

ただし、「見た目」を表現する上では不要なマークアップでも情報の構造上は必要なマークアップは残すべきです。

不要なマークアップがある例
<section css={sectionStyle}>
  <div css={innerStyle}>
    <h2 css={titleStyle}>素敵なタイトル</h2>
    <p css={textStyle}><span>hogehoge</span></p>
  </div>
</section>
不要なDOMを削除した例
<section css={sectionStyle}>
  <h2 css={titleStyle}>素敵なタイトル</h2>
  <p css={textStyle}>hogehoge</p>
</section>

セマンティックなマークアップになっている

マークアップがきちんと意味を持っていると、タグをさらうだけで構造を把握できるので、コードを読みやすくなります。

HTMLのマークアップで使うh1~h6やpといった要素はそれぞれ「見出し」や「段落」といった意味を持ちます。
この意味を適切にマークアップすることを「セマンティックなマークアップ」と表現しています。

また、セマンティックなマークアップを心がけると、前項の「不要なマークアップがない」状態を自然に作ることができます。

セマンティックなマークアップになっていない例
<div css={sectionStyle}>
  <div>hogeのリスト</div>
  <div css={listStyle}>
    <span css={listItemStyle}>hogehoge1</span>
    <span css={listItemStyle}>hogehoge2</span>
    <span css={listItemStyle}>hogehoge3</span>
  </div>
  <div>hogehoge</div>
</div>
セマンティックなマークアップになっている例
<section css={sectionStyle}>
  <h2>hogeのリスト</h2>
  <ol css={listStyle}>
    <li css={listItemStyle}>hogehoge1</li>
    <li css={listItemStyle}>hogehoge2</li>
    <li css={listItemStyle}>hogehoge3</li>
  </ol>
</section>

マークアップとCSSの指定順が揃っている

マークアップとCSSの指定順が揃っていると、マークアップやデザインデータと照らし合わせて読みやすくなります。
CSSだけを読んでも大体どこの指定か予想できるのでいちいちマークアップと照らし合わせなくても良くなります。

また、CSSには「継承」という概念があり、一部のプロパティは親要素の指定を引き継いで反映します。
そのため、マークアップと指定順が揃っていると「どのスタイルが継承されるのか」が分かりやすくなります。

DOM構造と指定順が揃っていない例（HTML）
<section css={sectionStyle}>
  <h2>hogeのリスト</h2>
  <ol css={listStyle}>
    <li css={listItemStyle}>hogehoge1</li>
    <li css={listItemStyle}>hogehoge2</li>
    <li css={listItemStyle}>hogehoge3</li>
  </ol>
</section>
DOM構造と指定順が揃っていない例（CSS）
.listStyle {
  padding: 16px;
  list-style: none;
}

.listItemStyle {
  padding: 16px;
}

.sectionStyle {
  color: gray;
  padding: 16px;
}
DOM構造と指定順が揃っている例（HTML）
<section css={sectionStyle}>
  <h2>hogeのリスト</h2>
  <ol css={listStyle}>
    <li css={listItemStyle}>hogehoge1</li>
    <li css={listItemStyle}>hogehoge2</li>
    <li css={listItemStyle}>hogehoge3</li>
  </ol>
</section>
DOM構造と指定順が揃っている例（CSS）
.sectionStyle{
  color: gray;
  padding: 16px;
}

.listStyle{
  list-style: none;
  padding: 16px;
}

.listItemStyle{
  padding: 16px;
}

プロパティの指定順にルールがある

CSSのプロパティの指定されている順序にルールがないと、どんなスタイルが指定されているかの把握に時間がかかります。
特にファイルが大きくなってくると、全体で指定順が揃っている時のコードが読みやすさがグッと上がります。

プロパティの種類（ボックスモデル、配置、色..）で並べ替えると、指定内容が分かりやすくなります。
メンテナンスコストが低くルールとして統一しやすいので、アルファベット順で並べる方法もおすすめです。

指定順にルールがない例
.sectionStyle {
  color: gray;
  margin-top: 8px;
  height: 40px;
  padding: 16px;
  background: lightgray;
  width: 40px;
}

.listStyle {
  margin-top: 8px;
  color: gray;
  background: lightgray;
}
指定順にルールがある例①プロパティの種類順
.sectionStyle {
  /* 色 */
  background: lightgray;
  color: gray;

  /* サイズ・余白 */
  width: 40px;
  height: 40px;
  margin-top: 8px;
  padding: 16px;
}

.listStyle {
  /* 色 */
  background: lightgray;
  color: gray;

  /* サイズ・余白 */
  margin-top: 8px;
}
指定順にルールがある例②アルファベット順
.sectionStyle {
  background: lightgray;
  color: gray;
  height: 40px;
  margin-top: 8px;
  padding: 16px;
  width: 40px;
}

.listStyle {
  background: lightgray;
  color: gray;
  marginTop: 8px;
}

クラス名からどの要素か推定しやすい

基本的に自分はまずマークアップを上からチェックし、次にCSSを上からチェックします。

スタイルはマークアップがセマンティックである状態でレビューしたいため、そもそも先にマークアップが適切かをチェックしたいからです。
また、マークアップとCSSを照らし合わせながらよりも視線移動が少なくスムーズに済みます。

そのため、CSSを読むときにマークアップと照らし合わせなくても「どのマークアップの部分か」が分かるとスムーズにコードが読めます。

クラス名からどの要素か推定しにくい例（HTML）
<section css={wrapperStyle}>
  <h2>hogeのリスト</h2>
  <ol css={containerStyle}>
    <li css={itemStyle}>hogehoge1</li>
    <li css={itemStyle}>hogehoge2</li>
    <li css={itemStyle}>hogehoge3</li>
  </ol>
</section>
クラス名からどの要素か推定しにくい例（CSS）
.wrapperStyle {
  padding: 16px;
}

.containerStyle {
  padding: 16px;
}

.itemStyle {
  padding: 16px;
}
クラス名からどの要素か推定しやすい例（HTML）
<section css={sectionStyle}>
  <h2>hogeのリスト</h2>
  <ol css={listStyle}>
    <li css={listItemStyle}>hogehoge1</li>
    <li css={listItemStyle}>hogehoge2</li>
    <li css={listItemStyle}>hogehoge3</li>
  </ol>
</section>
クラス名からどの要素か推定しやすい例（CSS）
.sectionStyle {
  padding: 16px;
}

.listStyle {
  padding: 16px;
}

.listItemStyle {
  padding: 16px;
}

不要な指定がされていない

不要な指定を減らすとコードがスッキリして読みやすくなります。
指定を省略するには以下のような方法があります

  • :bulb: 継承を利用して指定を減らす
    • color, font-family, font-sizeなどの継承プロパティは、親要素に1度指定すれば、子要素にいちいち指定する必要がなくなります
  • :bulb: ショートハンドを活用する
    • marginやpaddin、borderやfontなどはショートハンドを使ってプロパティをまとめて指定できます
  • :bulb: デフォルト値やreset.cssと重複している指定を削除する
    • プロパティごとの初期値や、reset.css・親要素から継承している値と重複して指定している場合は削除できます

コードを読みやすくするためにあえて省略せず指定する場合もあるので、無理に全てを省略する必要はありません。

不要な指定がされている例
<section css={sectionStyle}>
  <h2 css={titleStyle}>hogeのリスト</h2>
  <ul css={innerStyle}>
    <li css={listItemStyle}>hogehoge1</li>
    <li css={listItemStyle}>hogehoge2</li>
    <li css={listItemStyle}>hogehoge3</li>
  </ul>
</section>
不要な指定がされている例
.sectionStyle {
  padding-top: 16px;
  padding-right: 24px;
  padding-bottom: 24px;
  padding-left: 16px;
}

.titleStyle {
  color: #333;
}

.listStyle {
  margin-right: 16px;
  margin-right: 16px;
  list-style-type: disc;
}

.listItemStyle {
  color: #333;
  border-color: gray;
  border-width: 1px;
  border-style: solid;
}
不要な指定を削除した例
<section css={sectionStyle}>
  <h2>hogeのリスト</h2>
  <ul css={listStyle}>
    <li>hogehoge1</li>
    <li>hogehoge2</li>
    <li>hogehoge3</li>
  </ul>
</section>
不要な指定を削除した例
.sectionStyle {
  color: #333; /* 継承を活用する */
  padding: 16px 24px; /* ショートハンドを活用する */
  /* デフォルト値を省略 */
}

.listStyle {
  margin-inline: 16px; /* ショートハンドを活用する */
  border: 1px solid gray; /* 同じプロパティをまとめる */
}

終わりに

コードが読みやすくなるとレビュー時に助かるだけでなく、開発時のミスを防いだりメンテナンス性が上がったりします。
もし他にも効果的なポイントやチームで取り組んでいるおすすめの方法などありましたら是非教えてください！

15
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
15
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?