BEMとSMACSSを融合させる最も簡単な方法 - Qiita
+ ここで紹介している方法は、一部Sassの使用を前提としています。 + ここでいうBEMは命名規則や概念としてのBEMであり、Yandex社が開発しているBEMツールについては言及しません。 BEMは素晴らしいアイデアであり、SMACSSもまた素晴らしいガイドラインです。 これらの特徴を組み合わせて最高のCSS設計を構築したい、と思った私はさまざまな方法でこの2つの融合を試みましたが、失敗の連続でした。 しかしながら、ようやくいくつかの結論を導けるようになってきました。 今回はそんないくつかの方法論の内、 BEMの命名ルールをそのまま生かしつつ、最もシンプルにSMACSSと融合させる方法 を紹介したいと思います。 実は、SMACSSとBEMをそのまま組み合わせることはできません。 お互いのルール同士が衝突するからです。 とくに注意したい部分は、CSSのカテゴライズだといえるでしょう。 S
Sassy Starter
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
SMACSS Your Sass Up
I often ask myself these questions: Will this code be easy for the others to edit? Does it scale? Can I forget it and change it later without being lost? While Scalable and Modular Architecture for CSS (SMACSS) is just one methodology, the principals of modular CSS are applicable to sites large and small. Using a modular approach in tandem with Sass can greatly improve development efficiency and p
Modular CSS: Thoughts on SMACSS modules | Brett Jankord
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
Objects in Space
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
SMACSSによるCSS設計 - Qiita
前案件でBEMチックな書き方をして、あまりのクラス名の長さに キィェエエエ！！ってなった後で、 CodeGridさんでSMACSSについてのステキ記事を見つけたのでメモ。 ※以下、CodeGridさんの記事に書いてることを、自分が後で見るようにプチ要約したものです。 本記事をまだ読んだことが無い人はここよりも、本記事の方をじっくり読むのをお勧めします。 SMACSSによるCSSの設計 - ベースとレイアウト | CodeGrid CSSカテゴライズ 5つにカテゴライズして、それに準じた名前を付ける 1.ベース 2.レイアウト 3.モジュール 4.状態（ステート） 5.テーマ 1.ベースルール サイト全体で要素そのもののデフォルトスタイル
)
CSS アーキテクチャ、パート 4: MetaCoax アプローチによる CSS のリファクタリング (フェーズ 3 と 4)
このブラウザーはサポートされなくなりました。 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)
CSS アーキテクチャ、パート 3: MetaCoax アプローチによる CSS のリファクタリング (フェーズ 1 と 2) Denise R. Jacobs | 2013 年 4 月 10 日 CSS アーキテクチャ シリーズで前回(英語) 取り上げた、有名なスケーラブルなモジュール構造のアプローチには、CSS の考え方や CSS の構築方法を変えるのに役立つ特徴がすべて含まれています。これらのアプローチは多くの分野で重なり合っていて、CSS を強化するプロセスのどの側面が真に重要かを示唆しています。新しいサイトを構築するのであれば、いずれのアプローチに従っても問題ありませんが、ここで実行しようとしているのは、手に負えない状態になってしまった既存の CSS を整理することです。 つまり、既に説明したアプローチはどれをとっても優れた威力を発揮しますが、本当に必要なのは、たとえば "Jus
『モバイル時代におけるCSSの設計と実装』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、こんにちは。 ネット総合事業本部プラットフォームDivの斉藤です。 今回は私の所属している部署からは初の1pixelへの寄稿となるそうです。 CSS開発のアプローチほぼ同時期にモダンウェブ開発に欠かすことが出来ないと言われるようになったJavaScriptと比べると、CSSにおける設計、という話題はなかなか出てきません。 単純なウェブサイトを作る際にはあまり気にしてこなかった部分ですが、ウェブアプリを制作している我々の仕事には欠かすことが出来なくなってきています。 ほかのプログラミング言語に比べると圧倒的に非力な言語だからこそ、ほかのプ
SMACSS 読んだ - CHROMA
Scalable and Modular Architecture for CSS (日本語) を読んだのでそのメモです。 CSSルールのカテゴライズ カテゴライズを行い、それに準じた命名をセレクタに付ける。 ベース レイアウト モジュール 状態（ステート） テーマ レイアウトには1つ以上のモジュールを保持する必要がある。 モジュールは最利用可能なパーツとする。 命名規則 レイアウト、状態（ステート）、モジュールにはプリフィックスを使用する。 レイアウトのスタイルにはlayout-を付ける。または、ドキュメントなどでコーディング規約をまとめてあるなら省略してl-と付けても良い。 状態（ステート）にはis-を付ける。 モジュールは作成される数が多いので、モジュールごとにプリフィックスを付ける。 /* Example */ .comment { } .comment-user { } ベースル
ScaleOut | Supership
「ミライリアルの幸せを、デジタルの力で創る」ことを目指すSupershipグループの社内報です。日々の出来事、メンバーの働く様子や声、未来への想いなど、Supershipグループの”Be Super”なストーリーをみんなでシェアしていきます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
悩まないコーディングをしよう！ OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計（Sass対応）
GitHub - hiloki/flocss: CSS organization methodology.
イマドキCSS設計
今必要なCSSアーキテクチャ