サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
basara669.com
こんにちは!basara669です。 勉強会で使った「イマドキCSS設計」の資料の解説の第2回目で、BEMについて書きました。 他の記事はこちら 「イマドキCSS設計」の解説 – 前編:css設計の必要性 BEMとは BEMとはロシアのYandexという会社が作った設計のための指針というか、方法論です。 Main / BEM フロントエンド全般の内容になっていて、CSS以外のこともかいてありますが、今回はCSSだけにフォーカスします。 BEMの基本概念 BEMとは、Block、Element、Modifierの頭文字をとったもの BEMの基本概念としては下記のような基本概念のもと作られています。 メンテナンス性の向上 共同作業 コードの再利用性 先ほど説明したとおり、ただ、CSSを書いていってしまうと非常にメンテナンス性が悪いです。結局追記を繰り返し破綻をします。 また、コーディング規約な
イマドキCSS設計 NTTレゾナント 森本恭平 ※矢印キーで動かせます About Me 森本恭平 ディレクター フロントエンドエンジニア Twitter:basara669 今日のスライド http://basara669.com/slides/140122/index.html ※今日のatndやconnpassにも載っています 今日のハッシュタグ #gooOTT Agenda なぜCSS設計が必要なのか BEMとSMACSSの紹介 実際の運用上どうするべきか 本題に入る前に・・・ 様々なCSS設計がありますが、どれも複数クラスを前提としているので、IE6以下では使えないです。。
HOMEServerSidewordpresswordpressの初期テーマの2014年バージョンTwenty Fourteen がすごいことになっているので歴史を辿ってみた!
今回はGrunt.jsのインストールを解説してみたいと思います。 Grunt.jsについての概要が知りたければ、前回の投稿の Grunt.jsの始め方 -Grunt.jsの概要編- を見てみて下さい。 Grunt.jsインストールまでの手順 Grunt.jsなのですが、インストールまでの手順がちょっと複雑だったりします。 Gruntのver3.0までは、gruntをインストールするだけで、sassのコンパイルが出来たのですが、ver4.0からは変更され、タスクを動かすもの+各種プラグインという形式になりました。 grunt-cliのインストール(grunt command line interface) package.json作成 プラグインのインストール gruntfile.jsの作成(タスク) 結構手順多いんですよね。。 1つ1つ見て行きましょう。 Grunt.jsのインストールに必
このページを最初にブックマークしてみませんか?
『basara669.com - Webやガジェットのことをつらつらと…』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く