結論 HTML要素のID属性を指定する場合が #(シャープ) です。 HTML要素のクラス属性を指定する場合が .(ドット) です。 #(シャープ) html <p id="hoge">hogeです</p> css #hoge{ /*ccsを記載*/ } .(ドット) html <div class="hoge">hogeです</p> css .hoge{ /*ccsを記載*/ }

BEMとFLOCSSとは BEM（MindBEMding）は一意なクラスを作るための命名規則 FLOCSSはCSSファイルをモジュール化するための命名規則 （参考：https://backlog.com/ja/blog/how-to-write-markdown/） この命名規則に従うことで、 1.クラス名に悩む必要がなくなる 2.クラス名を見ることである程度何に対応しているかわかる 3.各要素を管理しやすくなる などなど… BEMについて BEMとはBlock Element Modifierの略称。この3つを組み合わせてクラス名を決めること。（調べた結果、Modifierは２つに比べてあまり使われない模様） 各説明は以下の通り。 Block：大きな要素 Element：Blockを構成する要素 Modifier：BlockとElementのスタイルの一部を変えるもの BEMを取り入れることで 保守性が高くなる BEMの規則上block要素が1つになるので、各要素のまとまりごとに管理することができ、要素の追加、削除を簡単に行うことができる 可読性が上がる BEMはblock__element--modifierと、記述する規則があるため、SCSSで記載する際にネストが深くなりすぎず、すぐに読み解くことができる。 再利用がしやすい BEMはblockを起点として1つの塊で使用しているため、ページ内でコンテンツを移動したときや、同じデザインでコンテンツを追加した際に、他のスタイルによる影響を受けないため再利用がしやすくなる （参考：https://qiita.com/ryo_cy/items/a328ea7779f8f52e5f22） また、記入の仕方は以下の通り class="block__element–-modifier" blockとelementはアンダースコア2つで区切る Elementとmodifierはハイフン2つで区切る ハイフンとアンダースコアは2つ block, element, modifierが複数単語になる場合、単語と単語の間はハイフン1つで区切る ハイフン1つの場合はElementとModifierの区切りではなく、ただの単語の区切りとして使用 例） class="sidebar__title"←サイドバーのタイトル class="article__text"←記事のテキスト FLOCSSとは 1つのCSSファイルにまとめて記述するのではなく、スタイルを適用するレイヤーやパーツごとに、ファイル単位で分割・モジュール化して管理しやすくする。 Foundation　Layout　Objectの頭文字をとったもの。 ３つの説明は以下の通り。 Foundation←reset.cssなどデフォルトのスタイルを記述するCSSファイルを格納 Layout←ページを構成するheader, main, footerという大きな枠のスタイルを記述するCSSファイルを格納 Object←プロジェクト内で繰り返し使われるビジュアルパターン。さらに「component」「project」「utility」のレイヤーに分けられる。 各々を分割してファイルをまとめる。 例） css ┣ Foundation ┃ ┗ base.scss ┣ Layout ┃ ┣ footer.scss ┃ ┗ header.scss ┗ Object ┣ Component ┃ ┣ background.scss ┃ ┣ btn.scss ┃ ┣ module.scss ┃ ┗ section.scss ┣ Project ┃ ┣ article.scss ┃ ┣ grid.scss ┃ ┣ icon.scss ┃ ┗ media.scss ┗ Utility ┣ display.scss ┗ text.scss （参考：https://tech.playground.style/workstyle/css-design/） BEMとFLOCSSの組み合わせ クラス名に接頭辞（layoutなら「l」、objectなら「c(component)」「p(project)」「u(utility) 」）をつける。 例） class="l-header__title" class="c-botton"

レスポンシブな HTML + CSS を書いている時、デスクトップでだけマウスカーソルのホバー時にツールチップを出したいとかあると思うんです。 こんな感じで。 <a class="link">ちょっと見て！<span class="tooltip">やっぱ見ちゃダメ</span></a> .tooltip { display: none; } .link:hover .tooltip { display: block; /* 位置合わせする */ } で、モバイルデバイスには :hover ステートが無いのでツールチップは表示されません。…と思うじゃないですか。ところが、モバイルデバイスには :hover ステートは無いものの、タップ時に擬似的に :hover が発生して、他の場所をタップするまで発生したままになるんですね。なので、このままだとタップした時にツールチップが表示されそのままになっちゃうんです。ちょっと嫌ですね。 これ、簡単に抑制できます。 .tooltip { display: none; } @media (hover: hover) { .link:hover .tooltip { display: block; /* 位置合わせする */ } } メディアクエリの hover 特性を使って、実際に :hover ステートをサポートするデバイスでのみ CSS が有効なようにすればいいんですね。 分かってしまえば簡単な話なんですが、すぐに忘れそうなので自分用の備忘録に残しておきます。