Generated with sparks and insights from 5 sources

img6

img7

img8

img9

img10

img11

Introduction

  • クラス名の基本ルール: クラス名は半角英数字で始め、スペースや特定の記号を使用しない。

  • BEMメソッド: Block、Element、Modifierの3つの要素でクラス名を構成する。

  • よく使う単語: global, main, section, container, about, works, product, service, archive, news, blog, contact, access, content, article, top, toc, area, box, title, subtitle, description, intro, detail, wrap, inner, text, thumb, img, date, time, logo, hero, nav, card, btn。

  • Javaのクラス名: クラス名は名詞を使用し、頭文字を大文字にする。メンバ名は小文字で始める。

  • CSSのクラス名: 見た目や機能に基づいて命名し、メンテナンス性を高めるために一貫性を持たせる。

  • 命名規則の重要性: 規則を守ることで、コードの可読性とメンテナンス性が向上する。

基本ルール [1]

  • 半角英数字: クラス名は半角英数字で始める必要がある。

  • スペース禁止: クラス名にスペースを使用しない。

  • 特定の記号: ハイフン（-）とアンダースコア（_）以外の記号は使用しない。

  • アルファベット開始: クラス名はアルファベットから始める。

img6

BEMメソッド [1]

  • Block: 独立した意味を持つ要素。

  • Element: Blockの一部であり、独立して意味を持たない。

  • Modifier: BlockやElementの状態や外観を変更する。

  • 命名規則: Block__Element--Modifierの形式で命名。

  • 例: <div class="search"><input class="search__input" type="text"><input class="search__button" type="submit"></div>

よく使う単語 [1]

  • global: 全体的な

  • main: メイン、主要な

  • section: セクション、分割された部分

  • container: コンテナー、容器

  • about: 〜について、企業情報など

  • works: 仕事、実績

  • product: 製品

  • service: サービス

  • archive: アーカイブ、保管所

  • news: ニュース、新着情報

Javaのクラス名 [2]

  • 名詞を使用: クラス名には名詞を使用する。

  • 頭文字を大文字: クラス名の頭文字は大文字にする。

  • メンバ名: メンバ名は小文字で始める。

  • 例: クラス名はUser、メンバ名はuserName。

img6

CSSのクラス名 [1]

  • 見た目や機能: クラス名は見た目や機能に基づいて命名する。

  • 一貫性: 命名規則に一貫性を持たせる。

  • メンテナンス性: 規則を守ることでメンテナンス性が向上する。

  • 例: .btn-primary, .btn-secondary

img6

命名規則の重要性 [1]

  • 可読性: 規則を守ることでコードの可読性が向上する。

  • メンテナンス性: 規則を守ることでメンテナンス性が向上する。

  • 一貫性: 一貫した命名規則が重要。

  • 例: BEMメソッドを使用することで一貫性を保つ。

Related Videos

<br><br>

<div class="-md-ext-youtube-widget"> { "title": "CSS\u5165\u9580\u8b1b\u5ea7 #10\uff1a\u30af\u30e9\u30b9\u3068ID\u3092\u4f7f\u3063\u305f\u6307\u5b9a\u65b9\u6cd5", "link": "https://www.youtube.com/watch?v=O6XNvYEhI-0", "channel": { "name": ""}, "published_date": "Dec 11, 2021", "length": "" }</div>

<div class="-md-ext-youtube-widget"> { "title": "\u3010Python\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u5165\u9580\u3011\u547d\u540d\u898f\u5247 \uff06 \u826f\u3044\u5909\u6570\u540d\u3092\u3064\u3051\u308b\u305f\u3081 ...", "link": "https://www.youtube.com/watch?v=1ADKKMHLrBs", "channel": { "name": ""}, "published_date": "Mar 23, 2021", "length": "" }</div>