キャメルケースやスネークケースの種類 - ✘╹◡╹✘
何かの命名規則の文脈で会話するとき等に知っていると便利に使えるでしょう。 camelCase, lowerCamelCase, PascalCaseと比較した場合のcamelCase CamelCase, UpperCamelCase, PascalCase chain-case, Chain-Case snake_case 追記1 SCREAMING_SNAKE_CASEというものもあるみたいです。 追記2 余談ですが、QiitaではCSSセレクタの命名規則としてBEMを採用しており、端的に言うと .bloCk_elemeNt-modifiEr というパターンを取っています。Qiitaでは各要素の命名規則としてlowerCamelCaseを採用しており、BlockとElementとを接続するために「_」を、BlockとModifierとを接続するために「-」を採用しています。よって、この
BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
BEMによるフロントエンドの設計 | 第1回 基本概念とルール
BEMによるフロントエンドの設計 第1回 基本概念とルール この記事ではフロントエンドの設計方法「BEM」を紹介します。第1回目はBEMのもっとも基本となるBlock、Element、Modifierの概念と、class名の命名ルールを解説しています。 はじめに 最近フロントエンド界隈で、『BEM』という言葉を見かけることが増えてきました。BEMとは、Block、Element、Modifierの略語です。Webサイトのコンポーネント化のためのフロントエンド設計方法のひとつで、厳格なclass名の命名ルールが特徴的な手法です。 第1回は、BEMをまったく知らない方向けの入門編です。 なぜBEMが必要なのか 私たちはHTMLとCSSを使うことでしか、Webサイトを作ることができませんが、HTMLとCSSにはプログラム的な機能が備わっていません。そのために、フロントエンドエンジニアは次のような
Sassでの色管理
Sassでは色を変数として定義でき、また様々な関数でそれを操作することが可能になっている。そのため色を論理的に管理することが可能になっているが、これといった手法が確立されているわけではない。このウェブサイトでは少しややこしい形で管理するようにしている。どういう目的でこういう複雑な構造になっているのかを簡単に書いておきたい。 基本色の定義 基本色、つまりテーマカラーであったり、本文の背景色や文字色といった見た目のイメージを決定する色は、色コードを直接指定して定義する必要がある。これはほぼ間違いなくみんな同じように書いているだろう。 $color-dark: rgb(60, 51, 48); $color-light: rgb(252, 249, 240); $color-accent: rgb(17, 136, 187); これらは背景色であったり文字色、そしてリンクの文字色として使っている
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
micss/README.md at master · ryonakae/micss
BEM
