はてなブックマーク

今回、何気なくフレームワークを使うことでなんとなく使っていたCSSルールをしっかり学んでみたので大まかな部分をメモしておきます。 理解した上で使っていき気づきがあったら追記していく予定です。 今回はSMACSS・OOCSS・BEMの３つルールについてしらべました。 SMACSS ベース・レイアウト・モジュール・ステート・テーマの５つのカテゴリに分けたルールを元に設計する手法。 ベースルール セレクタを使いスタイル適用をする。 IDやClassを使わないルール。 reset.cssや、normalize.cssなどがこれに当たる。 レイアウトルール 大枠のレイアウトルールの指定。 ヘッダー・フッター・ナビゲーション・メインコンテンツ・サイドバーなど .layout-header { … } .layout-footer { … } .layout-nav { } .layout-main {

なんだかんだatomが良くてatomを使ってます。html css はemmetで作業効率をUPしてます。 そこで、日本語設定や、スニペットの追加をカスタマイズするときのメモとして書きました。 [1]カスタマイズするフォルダを開く Setting > Packages > Emmet > ViewCode 設定タブを開く(mac: ⌘+,)Packeges > emmetの設定を開くそこからViewCodeをクリック新規ウィンドウでEmmetの設定フォルダが開きます。 書き換えるファイルを開く emmet/node_modules/emmet/lib/snippets.json のファイルを開く 日本語にする 2行〜4行めあたりにあるen "variables": { "lang": "en", "locale": "en-US", を以下のようにjpに変更する "variables":