BEMは素晴らしいアイデアであり、SMACSSもまた素晴らしいガイドラインです。 これらの特徴を組み合わせて最高のCSS設計を構築したい、と思った私はさまざまな方法でこの2つの融合を試みましたが、失敗の連続でした。 しかしながら、ようやくいくつかの結論を導けるようになってきました。 今回はそんないくつかの方法論の内、 BEMの命名ルールをそのまま生かしつつ、最もシンプルにSMACSSと融合させる方法 を紹介したいと思います。 実は、SMACSSとBEMをそのまま組み合わせることはできません。 お互いのルール同士が衝突するからです。 とくに注意したい部分は、CSSのカテゴライズだといえるでしょう。 SMACSSではCSSを主要な6つのカテゴリに分類します。 ベース、レイアウト、モジュール、サブモジュール、ステート、テーマです。（※サブモジュールに関しては他のカテゴリと比べるとあまり言及されて
A starter toolkit based on Scalable and Modular Architecture for CSS SMACSS and Atomic Design for Sass (SCSS) projects. Do what you'd like with it :) Styles are broken down into the following groups: Base, Layout, Atoms, Molecules, Organisms, States, Themes, Utilities and Overrides Quick start Fork & clone the repo, or download zip file directly. Install dependencies – npm install. Watch for chang
Brett Jankord I design and develop websites for the ever changing landscape of the Web. Menu Skip to content HOME ABOUT BLOG CONTACT My understanding of CSS modules continues to grow from day to day. To me, modules are one of the best ways to create scalable and reusable styles. I wanted to jot down a few things I’ve learned about modules. Source: Wikipedia What are modules? If you’ve read through
An OO mind-melding of SMACSS and BEM using Sass. (wut?)Second — you must read: “How to Scale and Maintain Legacy CSS with Sass and SMACSS” by Ben Smithett. A lot of what I am about to write is directly inspired by his work to integrate OO ideas with SMACSS and BEM using Sass. And it’s not like I whipped all of this together myself (psssha — as if). I have a great team of front-end folks who have h
前案件でBEMチックな書き方をして、あまりのクラス名の長さに キィェエエエ！！ってなった後で、 CodeGridさんでSMACSSについてのステキ記事を見つけたのでメモ。 ※以下、CodeGridさんの記事に書いてることを、自分が後で見るようにプチ要約したものです。 本記事をまだ読んだことが無い人はここよりも、本記事の方をじっくり読むのをお勧めします。 SMACSSによるCSSの設計 - ベースとレイアウト | CodeGrid CSSカテゴライズ 5つにカテゴライズして、それに準じた名前を付ける 1.ベース 2.レイアウト 3.モジュール 4.状態（ステート） 5.テーマ 1.ベースルール サイト全体で要素そのもののデフォルトスタイル
このブラウザーはサポートされなくなりました。 Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。 CSS アーキテクチャ、パート 4: MetaCoax アプローチによる CSS のリファクタリング (フェーズ 3 と 4) Denise R. Jacobs | 2013 年 5 月 9 日 野放し状態の CSS を管理するのは容易ではありません。有名な スケーラブルなモジュール構造の CSS のアーキテクチャ (英語) を学んだ方は、CSS についてのチームの苦悩の原因を突き止めることができたことに大喜びすると同時に、そこで提案された変更をドキュメントやワークフローに追加する方法を見積もってみて愕然としたに違いありません。 MetaCoax による CSS のリファクタリング プロセス (英語) では、
CSS アーキテクチャ、パート 3: MetaCoax アプローチによる CSS のリファクタリング (フェーズ 1 と 2) Denise R. Jacobs | 2013 年 4 月 10 日 CSS アーキテクチャ シリーズで前回(英語) 取り上げた、有名なスケーラブルなモジュール構造のアプローチには、CSS の考え方や CSS の構築方法を変えるのに役立つ特徴がすべて含まれています。これらのアプローチは多くの分野で重なり合っていて、CSS を強化するプロセスのどの側面が真に重要かを示唆しています。新しいサイトを構築するのであれば、いずれのアプローチに従っても問題ありませんが、ここで実行しようとしているのは、手に負えない状態になってしまった既存の CSS を整理することです。 つまり、既に説明したアプローチはどれをとっても優れた威力を発揮しますが、本当に必要なのは、たとえば "Jus
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、こんにちは。 ネット総合事業本部プラットフォームDivの斉藤です。 今回は私の所属している部署からは初の1pixelへの寄稿となるそうです。 CSS開発のアプローチほぼ同時期にモダンウェブ開発に欠かすことが出来ないと言われるようになったJavaScriptと比べると、CSSにおける設計、という話題はなかなか出てきません。 単純なウェブサイトを作る際にはあまり気にしてこなかった部分ですが、ウェブアプリを制作している我々の仕事には欠かすことが出来なくなってきています。 ほかのプログラミング言語に比べると圧倒的に非力な言語だからこそ、ほかのプ
Scalable and Modular Architecture for CSS (日本語) を読んだのでそのメモです。 CSSルールのカテゴライズ カテゴライズを行い、それに準じた命名をセレクタに付ける。 ベース レイアウト モジュール 状態（ステート） テーマ レイアウトには1つ以上のモジュールを保持する必要がある。 モジュールは最利用可能なパーツとする。 命名規則 レイアウト、状態（ステート）、モジュールにはプリフィックスを使用する。 レイアウトのスタイルにはlayout-を付ける。または、ドキュメントなどでコーディング規約をまとめてあるなら省略してl-と付けても良い。 状態（ステート）にはis-を付ける。 モジュールは作成される数が多いので、モジュールごとにプリフィックスを付ける。 /* Example */ .comment { } .comment-user { } ベースル
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
