タグ

BEMに関するo_tiのブックマーク (6)

  • 細かすぎるけど伝わってほしい私的BEMプラクティス30(ぐらい)

    BEMのいいところは、それが何者なのかが明白ということに尽きる。とある要素を見たときに、そのスタイルがどこに書かれているのか、何を表しているのかがクラス名を見ればわかる。手を入れる際も、どこに追記すればよいのか、どれくらいの影響を及ぼすのかの大部分が推測できる。 レスポンシブ・デザインと相性がいいとか、流行りのコンポーネント指向と相性がいいなど、BEMの良さは他にもいくつか挙げられるけど、決定的なのは明瞭さであると思う。 BEMを使いはじめてかれこれ3,4年くらい経った。その間に色々な命名規則や設計思想が登場してきたけれども、今のところは浮気する程の魅力を他に感じることもなくBEM一筋でやってきている。ただし実践するにつけて、より明瞭で破綻しづらい設計を実現するために、様々な制約やガイドを設けてやってきたので、「もともとのBEM」からは多少なり離れているかもしれない。 ただし、それはBEM

    細かすぎるけど伝わってほしい私的BEMプラクティス30(ぐらい)
    o_ti
    o_ti 2017/10/25
    最高だぜ〜〜
  • Nesting Your BEM? – CSS Wizardry

    28 November, 2016 Nesting Your BEM? Written by Harry Roberts on CSS Wizardry. Table of Contents Nesting in CSS Specificity Chain the First Class Simplifying with Sass Practical Upshot Downsides Use Cases To Use or Not to Use? Let me please start this post by saying that this is not a recommendation or new ‘best practice’. This is me thinking out loud. I’m a huge fan and proponent of BEM, and have

    Nesting Your BEM? – CSS Wizardry
    o_ti
    o_ti 2016/12/09
  • BEM & Atomic Design: A CSS Architecture Worth Loving | Lullabot

    Using Pattern Lab and BEM on a project I stumbled upon a great way of structuring CSS, better naming, and better a developer experience. Atomic Design is all the rage; I’ve recently had the pleasure of using BEM (or CEM in Drupal 8 parlance) and Pattern Lab on Carnegie Mellon’s HCII’s site. Working through that site I landed on a front-end architecture I’m very happy with, so much so, I thought it

    BEM & Atomic Design: A CSS Architecture Worth Loving | Lullabot
    o_ti
    o_ti 2016/07/13
    BEMにatomic designの分類方式をとりこむ
  • BEMIT: Taking the BEM Naming Convention a Step Further – CSS Wizardry

    5 August, 2015 BEMIT: Taking the BEM Naming Convention a Step Further Written by Harry Roberts on CSS Wizardry. Table of Contents Namespaces Responsive Suffixes Healthchecks Final Word Anybody who’s followed me or my work for any length of time will no doubt know that I’m a huge proponent of the BEM naming convention. What I’m about to talk about in this post is not an alternative or different nam

    BEMIT: Taking the BEM Naming Convention a Step Further – CSS Wizardry
    o_ti
    o_ti 2015/08/06
  • Learning to Love BEM – Mono

    I have to admit: when I first heard about BEM, I thought it was a bad idea. Why make your CSS naming so complicated? Surely you can get by with simple class names like .form-group or .accordion. Why do you have to get all crazy with classes like .accordion__child and .accordion__child--highlighted? In a project in January, I worked with Jelle who was using BEM-style syntax in his code. At first I

    Learning to Love BEM – Mono
  • OOCSSの欠点とEvery Declaration Just Onceのもたらすもの

    昨日も少し書いたEvery Declaration Just Onceアプローチ(以下EDJOと略す)について、皆が目を瞑っているOOCSSの欠点、CSSが持つ特徴、HTMLとの兼ね合いという点からもう少し書いてみたい。これについては未だ誰ともちゃんと議論していない。機会があったらこの記事をベースにでも誰かと話してみたい。 上記Googleの文書は、主にパフォーマンスの観点で書かれている。どうしても長くなりがちな定義を分散して書くよりも、能動的に短くすることができるセレクターを分散して書いた方が、プロダクションにおいてリリースされるCSSファイルのサイズを小さくすることが可能だろうというものだ。同時にこの文書の筆者は自身のブログで、より自然にCSSを書くための手法(原文: 「The Natural Way of Writing CSS」)としてこのEDJOという手法について述べている。 僕

    OOCSSの欠点とEvery Declaration Just Onceのもたらすもの
  • 1