[B! BEM][css] machupicchubetaのブックマーク

一番詳しいCSS設計規則BEMのマニュアル - Qiita

一番詳しい(当社比) この記事は大体1年くらいBEMを実践した中で溜まった知見的なものをルール･規則･注意点をまとめたマニュアルというかたちにしたもの. BEM初心者でもすぐ実践してもらえそうな感じに詳しくしたつもり. ちなみにBEMの実践というのはRails製Webアプリでの実践. ※注多分に我流な部分も含まれている. この記事の全てを真似しようとせずに一部のエッセンスのみ取り入れるのもいいかもしれない. BEMとは Block Element Modifierの略で, Block => でかい括り Element => でかい括りの中にいる要素 Modifier => 上記2つの変化球の3つに分けて考えていくことでCSSを設計･命名していく手法. 基本的な考えとか前提とか BEMの中でも特にMindB EMdingと呼ばれている命名法をベースとしている SCSSを使用する基本的に

machupicchubeta 2019/12/23

BEM
css

リンク

BEMに基づいたCSS命名規則について考えてみた - nomal note

皆さんこんにちはnomalです。最近ブログをはじめたから余計にMacBook Airほしいなーなんて考えてます。MacBook Proを購入して五年目だけど、あと三年くらいは頑張ってくれそう。Mac 貯金はじめようかな。さて、今日はサイトをコーディングするにあたって必要なマークアップについてです。マークアップエンジニアという役職があるくらい、マークアップって重要！と一本新規で１ページコーディングを経験した私は、心の底から作ってる最中に感じました。マークアップ構成をグダるとCSSがどんどん長くなってしまって、一ヶ月後に修正が入った時に「あれ？ここなんでこんなプロパティ入ってるんだっけ？」とか「そもそもどこを修正したら良いのか分からない！」なんて事態に作った本人が陥りがちです。故に、他の人が代理修正するときに激しく時間をロスする可能性だってあるわけです。自分だけじゃなく、他人の時間を奪

machupicchubeta 2018/04/23

BEM
css

リンク

BEM記法におけるElement/Modifierの付け方メモ - Qiita

ElementとModifierの付け方・順序で迷った事例があったので書き起こしておく。 BEMおさらい Block 構成要素。ページ内で何度でもどこでも置くことが出来る独立して動作するもの。

machupicchubeta 2018/04/21

BEM
css

リンク

BEM — Block Element Modifier

BEM — is a methodology that helps you to create reusa ble components and code sharing in front‑end development Learn why it's better #opinions_box h1 { margin: 0 0 8px 0; text-align: center; } #opinions_box { p.more_pp { a { text-decoration: underline; } } input[type="text"] { border: 1px solid #ccc!important; } } .opinions-box { margin: 0 0 8px 0; text-align: center; &__view-more { text-decoration

machupicchubeta 2018/04/03

リンク

ECSSの概要と考え方のまとめ - Qiita

ECSSというOOCSSとはほとんど反対のアプローチをするCSSの構成案があります。製品によってデザインが大きく異なるWebサイトに向いているのかなと個人的には考えています。あるいは、うまく共通化をすることができれば大規模なWebサイトにも適応可能ではないかなと期待しています。 Enduring CSS 案件で使いたいなと思ったのですが、あまり広く知られているものでもないですし、検索しても該当する記事はまだまだ少なかったりします。公式サイトを読むのが一番いいのですが、ボリュームがあり、さらに英語であることを考えるとそれも難しい。というわけで、ECSSの概要と考え方を日本語で比較的短い文章でまとめることにしました。このドキュメントの目的はECSSを詳しく調べたくなったり、実際に使い始めるためのきっかけになることです。以下の文章の最新版はGitHubにアップしています。 ECSS End

machupicchubeta 2017/04/04

リンク

MindBEMding – getting your head ’round BEM syntax – CSS Wizardry

25 January, 2013 MindB EMding – getting your head ’round BEM syntax Written by Harry Roberts on CSS Wizardry. Table of Contents Featured case study: NHS One of the questions I get asked most frequently is what do -- and __ mean in your classes? The answer is thanks to BEM and Nicolas Gallagher… BEM – meaning block, element, modifier – is a front-end naming methodology thought up by the guys at Yand