BEMとSMACSSを融合させる最も簡単な方法 - Qiita
+ ここで紹介している方法は、一部Sassの使用を前提としています。 + ここでいうBEMは命名規則や概念としてのBEMであり、Yandex社が開発しているBEMツールについては言及しません。 BEMは素晴らしいアイデアであり、SMACSSもまた素晴らしいガイドラインです。 これらの特徴を組み合わせて最高のCSS設計を構築したい、と思った私はさまざまな方法でこの2つの融合を試みましたが、失敗の連続でした。 しかしながら、ようやくいくつかの結論を導けるようになってきました。 今回はそんないくつかの方法論の内、 BEMの命名ルールをそのまま生かしつつ、最もシンプルにSMACSSと融合させる方法 を紹介したいと思います。 実は、SMACSSとBEMをそのまま組み合わせることはできません。 お互いのルール同士が衝突するからです。 とくに注意したい部分は、CSSのカテゴライズだといえるでしょう。 S
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
学ぶ、考える、書き出す。
2023年1月1日 2022年の振り返り 今年は良くも悪くも某国際球技イベントに振り回された年だった。 2022年12月19日 サウナで整ったけど危険性も感じた サウナで整う状態を初体験したけど、体験してみてこれは身体にとって危ないやつだと思った。 2022年11月23日 eslint-plugin-importによってVitestの設定ファイル上でエラーが発生する場合がある vitest と eslint-plugin-import に依存している環境では、vitest.config.ts内で vitest/config をインポートすると Unable to resolve path to module 'vitest/config'. eslint(import/no-unresolved) というエラーが出る場合があります。 2022年8月24日 Next.js + Vercel
Glen Maddern: Internet Pro
A few months ago, I read an article by Harry Roberts where he introduced an interesting concept for working with related classes in CSS. In his article, he describes the use of the [] characters in class attributes to help understand their purpose at a quick glance. He presents this example, arguing that it makes the class declaration more scannable - that is, more understandable at a glance: <div
Adventures in BEM and Responsive with SASS by wesruv on CodePen
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View. Objective I've been trying to wrap my head around how to apply BEM and the pros and cons of using it (or something like it). For those of you that
Lonely Planet & GitHub: CSSの構成と方針 - ワザノバ | wazanova
http://ianfeather.co.uk/css-at-lonely-planet/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約5時間前 CSS STATSが話題になったからでしょうか、自社のCSSの構成を分析して、記述方針について紹介するポストが続いています。 1) Lonely Planet Lonely Planetは旅行サイトらしく、写真/動画満載の構成です。 Quick Facts Sass Indented Syntax 150+ソースファイル キャッシュを考慮してコンパイルしたCSSは二つのスタイルシートに CSSはページ当たり35kb (gzip) 基本的には、remとpixelでサイズ指定。一部 em あり。 Preprocessor Railsを使っているが、Sprocketsは
CSS pattern libraries
This document discusses best practices for creating CSS pattern libraries. It recommends starting with the smallest reusable components and building up to larger page-level templates. Key aspects covered include using a naming convention based on modules, modifiers and descendants; avoiding overly specific class names; and including utility classes to add single styles without new classes. The doc
カーゴ・カルトCSS
CSSを書いたり管理したりするにはなんらかの方法論があった方が良い、と広く考えられている。しかし実際に取り入れられている手法の中には、セマンティクス上の品質や、長期にわたるメンテナンス性に悪影響を与えるものもある。ここでは、CSSの「フレームワーク方法論」として提唱されているテクニックの問題点や、その問題を僕たちウェブ・ディベロッパーがどうすれば解決できるかについて論じてみようと思う。 現在、CSS開発におけるフレームワーク方法論として、BEMなど類似のテクニックがいくつかあるが、もっとも有名なのはOOCSSだろう。これらの方法論はCSSにオブジェクト指向プログラミングの原則を適用しようと試みる。しかしながら、両者の間にはそもそも宣言型スタイル言語とオブジェクト指向ソフトウェア設計原則というコンセプト上の不一致がある。その結果、経験の浅いディベロッパーが気づきにくいような複雑な問題を持ち込
ScaleOut | Supership
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
BEMおじさんは考えた vol.1
BEM modifiers: multiple classes vs @extend
GitHub - hiloki/flocss: CSS organization methodology.
イマドキCSS設計