BEMとは

BEMとは
– フロントエンドの設計方法
– Block、Element、Modifier
– 厳格なclass名の命名ルール
https://en.bem.info/methodology/

背景
– スタイルの優先順位の指定が難しい
– !importantの多用
– パーツを別の場所に流用すると表示が崩れる
– 制作者本人しかわからないclass名

制作ボリュームが膨大になった時、全体像を誰も理解できないってのはよくありますね。
特に、長いサービスだと、前任者が全員退職して、知っている人がいないとか。

BEMではパーツをBlockと呼ぶ
Blockはid属性ではなく、classを使う
※idは1ページ1回、classは重複利用可能
Blockは入れ子にしない

ElementはBlockの構成要素
Elementのclass名はblockの構成要素名を入れる

.search
.search__input
.search__button
[css]

Modiferは既存のBlockやElementと似た物を作りたいとき
[css]
<ul class="list  list_type_disc">
  <li class="list__item"></li>
  <li class="list__item"></li>
  ...
</ul>
 
<ul class="list  list_type_check">
  <li class="list__item"></li>
  <li class="list__item"></li>
  ...
</ul>

BEMでは、block, element, modiferで一貫したセパレーター(_)を使う

modife: Block_key_value
単語はハイフン(-)もしくはキャメルケースなど

で、BEMはどれ位使われているかというと、50%くらい
50%といえば、かなりの割合ですなー

フロントエンドのアーキテクチャを考える

フロントエンドをどうするか?というと抽象的なので、言い方を変えると、どの技術を採用するか?
時代の潮流に合わせるのは鉄板か?

フレームワーク
– 第一候補 Vue.js
– 第二候補 React, Typescript
– 補欠 Angular, coffee

CSS周り
– Sass + Gulp

ライブラリー
– jQuery

命名規則
– BEM

コードフォーマッタ
– Prettier

構文チェック
– ESLint

グラフィック
– Fabric.js, three.js

その他
– Babel, Webpack
– コーディングガイドライン作成、コンポーネント一覧作成

こんなところか。
最低限、GAFAは見ておこう。

Google

- Experience with and passion for user-interface design.
- Knowledge of web libraries and frameworks such as AngularJS, Polymer, Closure or Backbone.
- Demonstrated sense of web design and attuned to the fundamentals of user experience, including accessibility.

Apple

-Experience with MongoDB and Node.JS
-Data visualization with D3.js or other framework
-Proficient understanding of client-side scripting and Javascript frameworks, including React, Typescript, Bootstrap, NPM

Facebook

- 3+ years of JavaScript experience, including concepts like asynchronous programming, closures, types, and ES6. Experience with React is a bonus
- Aware of but not reliant on object oriented frameworks (Prototype JS, MooTools, Dojo, etc.)

Amazon

- Strong knowledge of web technologies including: HTML5/CSS3/JavaScript, XML, JSON, React/Angular, web and server programming
- Passion to design and develop intuitive user interfaces

うーん、どこもUIへのpassionって書いてるなーww
node.js, react/angular、ES6は入れておいた方が良さそう。

ヤフー

React + Redux
TypeScript
Redux-thunk
Redux-first-router
Storybook
Jest
styled-jsx(Sassを書けるようにプラグイン入れてる)
Node.js

メルカリ

TypeScript, React.js, Next.js, Redux etc
Circle CI, GitHub, Slack, JIRA, Crowi, Spinnaker

Reduxも必須だな。
頭蒸発しそうだ。。