妖怪CSSのBEM?【TECH::EXPERT】

BEM JavaScript TECH::EXPERT プログラミング 応用カリキュラム編

【本日のメニュー】
・function文
・returnメソッド
・無名関数
・BEM(読むだけ系)

【function文】

function sayikinari() {
console.log("いきなり");
}

function saysteak(name) {
console.log(name);
}

let myName = "ステーキ";
sayikinari();
saysteak(myName);
//結果は「いきなりステーキ」

 

・Rubyでいうところのdef~endみたいな感じ
・当然のごとく引数とかと絡む

【JSのreturnメソッド】
Rubyだと関数内でreturnを使わなくても、最後の結果を戻り値にできるが、
JSでは必ずreturnを入れなければいけない。
正直、returnをちゃんと理解してないですが、
JS勉強してたら、Rubyでもreturn入れるのが癖になりそう。
松本氏はreturnがややこしいから最後の結果が戻り値でよければなくてもいいんじゃない?っていう風にしたのかしら。

【BEM】
命名規則が厳格に決められているCSS設計。命名規則がもっとも難しいといわれているためその悩みを解決するためのもの。要素が依存せず再利用しやすい。

Block > 大本のブロック要素につける

Element > blockの中に入っている要素のひとつ。ブロックはこれがいくつも入っているものという考え方っぽい

Modifier > blockやelementに修飾する要素。命名に形容詞を使用するらしい。
Modifierを和訳したら「修飾子」と出てきた。

おさむ かざりこ?

なんだこのおばさん!

▼命名規則について
・BlockとElementをつなぐ場合は、アンダースコア2つでつなぐ
・Modifierにつなぐ場合は、ハイフン2つでつなぐ

<nav class='header-nav'>
<ul class='menu'>
<li class='menu__list'>おにく</li>
<li class='menu__list menu__list--back-black'>店舗一覧</li>
</ul>
</nav>

 

こんな感じになるらしいっすよ。ヴぉーなげー。
まぁ、でも「__」だからelementについての記述だから除外、「-」で修飾してるからここら辺怪しいよね?っていうのが慣れてくると考えるより先にその目印を探してるのかも知れませんよね。
シンプルなclass名にするとコードはすっきりしてるけど、classからは説明不足感が漂うからこういうBEMって文化が生まれたのかもしれない。

【無名関数】

// 関数宣言 さだまさしっぽい。さだまさしっぽくない?
function yakiniku() {
console.log("焼肉");
}
//「yakiniku」という名の関数を作った
yakiniku();
//結果は「焼肉」

// 関数式(無名関数)
let steak = function () {
console.log("ステーキ");
}
//「steak」という変数に「ステーキ」と表示するfunctionを代入する
steak();
//結果は「ステーキ」

 

・関数宣言が優先して読み込まれる。
・無名関数は上から順に処理される。
・関数宣言の上の行に関数を書いたら動作する
・無名関数の上の行に関数を書いたらエラーになる

と言うことはちゃんと関数宣言すれば問題ないんじゃないかな。
今の所、無名関数で書くメリットがわかりませんでした。

【その他】

アニメ シスタープリンセス感想、第4話更新しました!