悩まないコーディングをしよう！ OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計（Sass対応）
悩まないコーディングをしよう！ OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計（Sass対応）
悩まないコーディングをしよう！ OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計（Sass対応）
SMACSS 読んだ - CHROMA
Scalable and Modular Architecture for CSS (日本語) を読んだのでそのメモです。 CSSルールのカテゴライズ カテゴライズを行い、それに準じた命名をセレクタに付ける。 ベース レイアウト モジュール 状態（ステート） テーマ レイアウトには1つ以上のモジュールを保持する必要がある。 モジュールは最利用可能なパーツとする。 命名規則 レイアウト、状態（ステート）、モジュールにはプリフィックスを使用する。 レイアウトのスタイルにはlayout-を付ける。または、ドキュメントなどでコーディング規約をまとめてあるなら省略してl-と付けても良い。 状態（ステート）にはis-を付ける。 モジュールは作成される数が多いので、モジュールごとにプリフィックスを付ける。 /* Example */ .comment { } .comment-user { } ベースル
【CSS設計手法】BEM、OOCSS、SMACSSの違いと特徴のまとめ | Web Design Trends
CSSの設計手法とは、CSSのメンテナンス性や作業効率を向上させるためのHTMLのクラス名の付け方と、CSSのコードの管理方法の考え方のことを言います。命名規則などとも呼ばれたりしますね。 ページ数が少なく、コード量もそこまで多くないような場合はあまり気にする必要はありませんが、大きなプロジェクトになるとCSSの設計手法を取り入れることで様々なメリットがあります。 今回は、CSSの設計手法に関する基本と、3つの人気のCSSの設計手法をご紹介したいと思います。 メンテナンス性が向上する CSSの設計手法を正しく取り入れることによって、全体的に管理の行き届いたコードを記述することができ、メンテナンス性が向上します。 逆に、煩雑になってしまったコードではスタイルの優先順位が複雑になってしまっていたり、!importantが随所で登場してしまっているようなコードのことで、一度コードが崩壊してしまう
はじめに SMACSSとは、Scalable and Modular Architecture for CSSの略語で、「スマックス」と読みます。 SMACSSはCSSの設計手法のひとつで、CSSのルールを5種類にカテゴライズした上で、それぞれの考え方や記述ルールが取り決められているのが特徴的な手法です。 SMACSSの考え方 CSSのカテゴライズ SMACSSでは、CSSのルールを次の5つのカテゴリに分類しています。 ベース：要素そのもののデフォルトスタイル レイアウト：ページをエリアごとに分割 モジュール：再利用可能なパーツ 状態（ステート）：レイアウトやモジュールの特定の状態を示す テーマ：サイトのルック＆フィールを定義 それぞれの具体的な解説は、以降で行います。 SMACSSで設計する目的 書籍『Scalable and Modular Architecture for CSS（日
Slide about Modern CSS Architecture. with OOCSS, SMACSS, BEM and Preprocessors. If you want to download PDF but don't want to login SlideShare, go to Speacker Deck on which is the same downloadable PDF : https://speakerdeck.com/katsunoritanaka/css-architecture-with-oocss-smacss-bemRead less
SMACSSによるCSS設計 - Qiita
前案件でBEMチックな書き方をして、あまりのクラス名の長さに キィェエエエ！！ってなった後で、 CodeGridさんでSMACSSについてのステキ記事を見つけたのでメモ。 ※以下、CodeGridさんの記事に書いてることを、自分が後で見るようにプチ要約したものです。 本記事をまだ読んだことが無い人はここよりも、本記事の方をじっくり読むのをお勧めします。 SMACSSによるCSSの設計 - ベースとレイアウト | CodeGrid CSSカテゴライズ 5つにカテゴライズして、それに準じた名前を付ける 1.ベース 2.レイアウト 3.モジュール 4.状態（ステート） 5.テーマ 1.ベースルール サイト全体で要素そのもののデフォルトスタイル
SMACSSによるCSS設計 - Qiita
前案件でBEMチックな書き方をして、あまりのクラス名の長さに キィェエエエ！！ってなった後で、 CodeGridさんでSMACSSについてのステキ記事を見つけたのでメモ。 ※以下、CodeGridさんの記事に書いてることを、自分が後で見るようにプチ要約したものです。 本記事をまだ読んだことが無い人はここよりも、本記事の方をじっくり読むのをお勧めします。 SMACSSによるCSSの設計 - ベースとレイアウト | CodeGrid CSSカテゴライズ 5つにカテゴライズして、それに準じた名前を付ける 1.ベース 2.レイアウト 3.モジュール 4.状態（ステート） 5.テーマ 1.ベースルール サイト全体で要素そのもののデフォルトスタイル
【CSS設計】SMACSSからCSSプリプロセッサとの付き合い方について学んだこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
まずSMACSSとは SMACSSとはCSS設計手法の一つです。『Scalable and Modular Architecture for CSS』の頭文字をとってSMACSSと呼ばれています。SMACSSの特徴は５つのカテゴリに分類をして、それぞれの考え方に合わせた設計を行うのが特徴です。 今回の記事では、SMACSSについての解説は割愛させていただきます。SMACSSの詳しい内容については、『Scalable and Modular Architecture for CSS』をぜひ読んでみてください。こちらは日本語に翻訳もされていて、かなり読みやすく参考になるところも多いのでオススメです。 またすぐに学びたいという方はCodeGridさんの記事が参考になるので読んでみてください。 SMACSSによるCSSの設計 – ベースとレイアウト | CodeGrid もちろん『最強のCSS設計
OOCSS、BEM、SMACSS、FLOCSS、RSCSSを比較して自分にあった設計思想をみつける
フロントエンドエンジニアというポジションに就いて1年半、普段はJavaScriptを中心に開発している。しかし、いつまで経ってもCSSを思いどおりに使いこなせない。理由は、どんな粒度でクラスを分割し、それぞれにどんなスタイルを適用すれば良いのかわからないからだ。 以下が、CSSの闇にのまれ、筋肉に解決に糸口を見出そうとした哀れなフロントエンドエンジニアの心の叫びだ。 — ダーシノ (@bc_rikko) 2017年3月1日 ということで、よく話題にされる5つのCSS設計を比較し、自分にあった設計思想を見つけようと思う。（CSSは苦手なので、おかしな点があったらご指摘ください） 今回比較するCSS設計思想は以下の5つ。 OOCSS BEM SMACSS FLOCSS RSCSS 古代のCSS設計 まずはCSSの設計思想に触れる前に、いにしえより伝わりしCSS遺産について触れておく。 多くの場
模写をする習慣がついてから、公開されているいろいろなスタイルシートを見るようになったのですが、その中で気になる表記を見つけました。 .mt5{ margin-top: 5px; } .mt10{ margin-top:10px; } .text-left { text-align: left; } .text-right { text-align: right; } ↑こういう表記です。「common.css」とか「base.css」と名付けられたファイルの中に記述されていることが多く、見かけるたびにこれって業界ではよく使われているのものなの？と思いました。 この表記の意味はわかります。あらかじめわかりやすいクラス名でスタイルシートを用意しておいて、HTMLにクラス名を記述しレイアウトを組んでいく…というものですよね。私も「.clearfix」と名付けたクラス用意して同じ手法を使っています
SMACSS (スマックスと発音する) は厳格なフレームワークというよりはスタイルガイドである。インストール、またはダウンロードするライブラリは本書にはない。SMACSSはデザインプロセスを分析するための手法であり、厳格なフレームワークを柔軟な思考過程とする手法だ。そしてCSSを使ったウェブサイトの開発に対する一貫したアプローチをドキュメント化する試みでもある。いったい誰が現在においてCSSを使わずにサイトを制作するだろうか!? このアプローチのすべてを活用するのも、部分的に活用するのも、どちらでも最適な方を選んでほしい。もちろん使わなくてもかまわない。このアプローチがすべての人の好みに合わないのは理解できる。ウェブ開発においてほぼすべての質問に対する回答は『時と場合による』だからだ。 Options $ 15.00 CAD - E-book
はじめに みなさまこんにちは！おはようございます！ マークアップエンジニアのうさこでございます！ またお前か・・・という声が聞こえてきそうですね・・・？花粉なんて爆発してしまえばいいと思っている今日この頃でございます。 さて・・・今回はコーディングをする際にきっと頭を抱える方も多いのでは・・・ クラス名の命名規則についてです！！ クラス名の命名・・・地味で単純な作業ですが、悩み始めると止まらず時間のロスに繋がっているのは紛れも無い事実なのです。。 目次 考え方 基本形 Prefix Block Element Modifier 注意点 さいごに 参考URL 考え方 目標はやはりこの4つとなります！ 予測しやすい 再利用しやすい 保守しやすい 拡張しやすい なぜ SMACSS と BEM なのか BEM の Block や Element の考え方は素敵すぎるのですが、クラス名がものすごく冗
OOCSSとかBEMとかSMACSSとか、深く考え過ぎずに、気楽にいいとこ取りして、プロジェクトに合った使い方をしましょうって話。 重要なのはルールを決めること。 命名ルールはBEMで（ただし厳密なBEMルールではなく、BEMっぽく） シングルクラスよりマルチクラスを採用 idセレクタはCSSでは使わない 命名ルールはBEMで BEMの命名ルールを取り入れる事で、CSSをBlock単位で考える事が出来るので、積極的にとりいれる ただ、実際に書いてみるとわかるのだが、厳密なBEMのルールはめんどくさいし見た目が気持ち悪いので、ゆるくしたルールを決める。 Elementは「__」（アンダースコア2つ）、Modifierは「––」（ハイフン2つ）でつなぐ これが命名ルールの基本。 Block、Element、Modifierを2つ以上の単語で表すときはキャメルケースをつかう その方がぱっと見わか
BEM Advent Calendar 2013 の 15日目の記事です。 明日は @kubosho_ さん。 なぜ SMACSS ？ なぜ BEM ？ SMACSS は CSS をより体系立て、構造化させることで開発者の制作とメンテナンスを容易にするテクニックとして、 Jonathan Snook によって提唱されました。 BEM ( MindBEMding ) は CSS のクラス名を明快にし、開発者本人だけでなく、誰が見てもクラス名から意味が読み取られるように、他のクラスとの識別をより容易にするためにロシアの Yandex という会社によって作られました。 SMACSS と BEM 、そして Nicole Sullivan が提唱している OOCSS というものがありますが、これらはどれも CSS に構造を持たせて（プログラムのオブジェクト指向のように）設計しなさいということが書かれ
こんにちは。マツコです。 突然ですが、CSS設計はとても重要なものです。 一定のルールがないと、コーダー各々が違う考え方でスタイルづけをして余計なCSSが増えてしまったり、本人でなければ分からないルールが発生してしまい、メンテナンスがしにくくなってしまいます。 そのため、以下のことを強く意識してCSS設計を行うことが大切だと言われています。 予測しやすい 再利用しやすい 保守しやすい 拡張しやすい 今回は上記の目的を達成するヒントとなる、著名なCSS設計手法である「OOCSS」「BEM」「SMACSS」についてお話したいと思います。 概要 Object Oriented CSS(オブジェクト指向CSS)の略。 オブジェクト指向に基づいて、考案された設計手法です。 Yahoo!のNicole Sulivan氏によって開発され、Twitter（とBootstrap）やGithub、Youtub
![CSS設計における3大メソッド[OOCSS][BEM][SMACSS]](https://cdn-ak-scissors.b.st-hatena.com/image/square/94577520dd0c042b59881ef47d3f516b991bd3b5/height=288;version=1;width=512/https%3A%2F%2Fdxo.co.jp%2Fblog%2Fwp-content%2Fuploads%2F2016%2F03%2Feyecatch.png)
+ ここで紹介している方法は、一部Sassの使用を前提としています。 + ここでいうBEMは命名規則や概念としてのBEMであり、Yandex社が開発しているBEMツールについては言及しません。 BEMは素晴らしいアイデアであり、SMACSSもまた素晴らしいガイドラインです。 これらの特徴を組み合わせて最高のCSS設計を構築したい、と思った私はさまざまな方法でこの2つの融合を試みましたが、失敗の連続でした。 しかしながら、ようやくいくつかの結論を導けるようになってきました。 今回はそんないくつかの方法論の内、 BEMの命名ルールをそのまま生かしつつ、最もシンプルにSMACSSと融合させる方法 を紹介したいと思います。 実は、SMACSSとBEMをそのまま組み合わせることはできません。 お互いのルール同士が衝突するからです。 とくに注意したい部分は、CSSのカテゴライズだといえるでしょう。 S
SMACSS and Rails – A Styleguide for the Asset Pipeline • 55 Minutes Blog
Welcome to the 55 Minutes blog. 55 Minutes is a web development consultancy in San Francisco building apps for design-led businesses and startups. On this blog we discuss the technology tools of our trade: Ruby on Rails, Django, Sass, OS X, and more. If you’re already familiar with SMACSS, skip ahead to the Rails styleguide. SMACSS principles SMACSS (Scalable and Modular Architecture for CSS) is a
SMACSSを試す - rono23
Railsで小さなwebアプリを作り始めたけど、その際に、SMACSS（スマックス）を試して見ることに。 SMACSSを選んだのは、単にBEMはちょっと見た感じ好きになれなかったり、メリット・デメリットとか調べるのがめんどくさかったからです。 あと、「この手のやつは、サービスを中長期的に運用してみて、初めてその真価がわかるよー」的なことをお世話になっている方々から伺ったのも1つです。 ぐだぐだ言ってないで、さっさ動くもの作って、公開しろ、ハゲチャビン！ 公開しねぇ奴に発言権ねぇから！おめーの席ねぇから！お゛め゛ぇ゛の゛席゛ね゛ぇ゛がら゛あ゛！ SMACSSは、CSSの書き方を5つにカテゴライズしたスタイルガイドみたいなもんです。 SMACSSの5つのカテゴリー base : body, h1, aとか layout : .l-grid、. l-constrainedとかレイアウト関連。クラ
いまちょうどチームでそれなりの大きさのHTMLを書いているので、SMACSSを参考にコーディング規約を作ったりしています。せっかくなので何かの参考にと思い公開してみました。 HTMLコーディング HTML5 HTMLのコーディングはHTML5のDOCTYPE準拠のタグを利用します。
An introduction to the changing world of CSS. Slides from Brisbane Web Designer Meetup 13 March 2013.Read less
BEM and SMACSS: Advice From Developers Who've Been There — SitePoint
CSS methodologies can be mind bogglingly confusing and tough to decide upon. Let’s consider two of the most well known options: BEM and SMACSS. Should you choose one of these for your next project? What are they best suited for? What might go wrong? If you’re already working with one – are you using it as intended? To the fullest potential? How do you know if you’re doing it right? I thought I’d b
CSSのコーディングにおいて、コーディングガイドラインが決められていなかったり、プロジェクト内のチームメンバー同士でコーディングスタイルを統一できていなかったりすると、それぞれが独自スタイルでコーディングし始めるので非常に混乱することになります。 さらにレイアウト部分と視覚的なデザインを混ぜてしまうと一貫性がなく複雑なコードになってしまいます。 これらを解消するための指針として、Drupal CSS コーディング スタンダードで規定されたガイドラインがあります。 CSSコーディングの課題 これらの課題を解消するための設計手法を紹介していきます。 複数メンバーでCSSコーディングしたら似たようなコードが散乱していた 適当にコードを書いていたら設計が複雑になりファイルが膨れあがった 1箇所修正しただけなのに他のページが表示崩れした ページ数が多い分、作業時間も多くかかった そもそもコーディング
CSS, Sass, SCSS, Compass, Less, BEM, SMACSS, OOCSS, ACSS, CCSS, WTFSS?
CSS, Sass, SCSS, Compass, Less, BEM, SMACSS, OOCSS, ACSS, CCSS, WTFSS? I’ve been thinking a lot about my CSS authoring, its current state and how it has changed over the years. Typically when I start a new project I’ll use my own framework Motherplate. It uses SCSS and Compass. Most of the class names were’t originally based on any other framework. Not deliberately anyway. Most developers I know n
CSS Architecture (OOCSS, SMACSS, BEM, FLOCSS) に関する日本語情報ソースまとめ | DriftwoodJP
以下も同じく、後述する3つの手法の概要。 CSS Nite LP32フォローアップ（8）高津戸 壮さん（ピクセルグリッド ） | CSS Nite公式サイトen.ja Article の記事はどれも興味深いですが、以下の3つが CSS 設計に関する記事かなと。 en.ja Articleen.ja Articleではハイクオリティな海外のフロントエンドにまつわる記事の翻訳を掲載しています。 CSS Architecture | en.ja ArticleAbout HTML semantics and front-end architecture | en.ja ArticleCode smells in CSS | en.ja Article下記は BEM に関する記事ですが、リンク先など設計全般に関する情報が網羅されていて必読な気がしています。 en.ja Article 1. 2.
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…
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
[OOCSS/BEM/SMACSS] HTML/CSSのclassの命名規則について、今ふたたび考える | MONSTER DIVE
[OOCSS/BEM/SMACSS] HTML/CSSのclassの命名規則について、今ふたたび考える 随分と気温が上ってきましたね。 夏が近づくにつれ、自宅のリビングのエアコンが壊れていることを思い出し暗い気持ちになります。 いい加減買い換えないと人命に関わるかもしれません。 さて、今回は命名のお話しです。 恐らくHTMLやJSを書く人ならあるある話だと思うのですが、コードを書くよりクラス名を考えるほうが面倒に感じること、ありませんか？ 業界的には色々と議論が尽くされているところでもありますが、結局明確な決まりはなく好みの問題もあるので、悩みも尽きないのです。 class命名の基本ルール まずは「そんなの常識だろう」と言われそうな、基本的に気をつけるべきこと達からです。 わかりやすい英語ベースの名前を付ける 当たり前すぎますが、パッと見てその要素の性質がまったく想像できない名前はNG。
![[OOCSS/BEM/SMACSS] HTML/CSSのclassの命名規則について、今ふたたび考える | MONSTER DIVE](https://cdn-ak-scissors.b.st-hatena.com/image/square/03306352b721cb8f93ae21d192a1cb1702869a6a/height=288;version=1;width=512/https%3A%2F%2Fwww.monster-dive.com%2Fshare%2Fimg%2Fog_img.png)
SMACSSが日本語に翻訳されました | 1000ch.net
2013/07/03 SMACSSが日本語に翻訳されました @cssradar氏翻訳によるSMACSSの日本語書籍が発売されました。 Scalable and Modular Architecture for CSS(日本語訳サイト) Scalable and Modular Architecture for CSS 書籍もしくは印刷本で購入することが可能です。 そもそもSMACSSとは Scalable and Modular Architecture for CSS Jonathan Snook氏が提唱するCSSのスタイルガイドです。 書籍内の内容の引用はできませんが、サイトに掲載されている文章を引用させて頂きました。 SMACSSはデザインプロセスを分析するための手法であり、厳格なフレームワークを柔軟な思考過程とする手法だ。 そしてCSSを使ったウェブサイトの開発に対する一貫
はじめに SMACSSとは、Scalable and Modular Architecture for CSSの略語で、「スマックス」と読みます。 SMACSSはCSSの設計手法のひとつで、CSSのルールを5種類にカテゴライズした上で、それぞれの考え方や記述ルールが取り決められているのが特徴的な手法です。 SMACSSの考え方 CSSのカテゴライズ SMACSSでは、CSSのルールを次の5つのカテゴリに分類しています。 ベース：要素そのもののデフォルトスタイル レイアウト：ページをエリアごとに分割 モジュール：再利用可能なパーツ 状態（ステート）：レイアウトやモジュールの特定の状態を示す テーマ：サイトのルック＆フィールを定義 それぞれの具体的な解説は、以降で行います。 SMACSSで設計する目的 書籍『Scalable and Modular Architecture for CSS（日
2014-05-27 StylusでBEMとかSMACSS CSS Stylus 最新のSass（まだ安定版ではない？）だと@at-rootを利用して以下のようにBEMができる。 .block { @at-root #{&}__element { } @at-root #{&}--modifier { } } 出力結果。 .block { } .block__element { } .block--modifier { } 安定版ではまだ使えないうえ、記述がちょっと面倒。でも、それ、Stylusでできるよ、と。 こんな感じでStylusの標準機能で使えます。 .block &__element color blue 出力結果。 .block { } .block__element{ color: #00f; } 記述もすっきりしていて気持ちいい。 といいつつも、やはり世間的にはSass全盛
参考 知っておきたいHTMLテンプレート設計法 - OOCSSの基本 ルール 場所に依存した指定方法をしない レゴのように考える スキン 装飾など。smacssでいうモジュールの部分。 構造 骨格。 参考 SMACSSによるCSSの設計 ベースとレイアウト つくってるプロジェクトでは、oocssだけで十分で、smacssはガチで取り入れなくてもいい気がした。理由↓ レイアウト>>使う機会が少ない。gridなどを使う機会があまりない。あるとしても、oocssでいう骨格を作るのと同等（な気がしている）。 テーマルール>>使わなそう モジュール>>oocssのスキン的な考えで十分 状態>>これは普段からやっている気がする。 ベース 要素そのもののデフォルトスタイル レイアウト ページをエリアごとに分割 モジュール 再利用可能なパーツ 状態（ステート） レイアウトやモジュールの特定の状態を示す テ
BLOG ブログ ホーム ブログ css設計・命名規則の歴史(BEM・OOCSS・SMACSS・FLOCSS・tailwindcss) 前置き css設計・命名規則の件ですが、マークアップする上で避けては通れない比較的面倒な悩み事です。 案件によってはクライアント様側からのルールが決められている場合もあり、その場合はそのルールに則って構築すれば済むことですが、一般的にはマークアップする方にお任せされることも多いですね。 その場合、個人の好みだったり、その時の流行りなどから、悪く言えば適当に設計されることも多いかと思います。 なんだったら「css設計ってナニ？」的な場合も多々見受けられます… 新規構築も、運用も1人で全て行うような案件であれば問題ないとも言えますが、チームでの構築や運用は別の方(もしくは別会社の方)が行うような場合は、その設計自体や命名規則などがハッキリとしたルールに則ってい
SMACSSとは、Scalable and Modular Architecture for CSSを略語して「スマックス」と読みます。 CSSには命名規則について悩んだりしますが、その対策のためOOCSSやBEMといったルール作りが定番でした。そのOOCSSやBEMをいいところを交えてできた新しいルールがSMACSSです。「ベース」・「レイアウト」・「モジュール」・「ステート」・「テーマ」の５つのカテゴリーに分けます。 ちなみに私はこの２つのサイトを読ませて頂きました。 SMACSSによるCSSの設計 – ベースとレイアウト | CodeGrid SMACSS 読んだ – CHROMA レイアウトルール 「ベース」 ようするにbody部分、Reset.cssやNomalize.cssで対応は十分です。 「レイアウト」 ヘッダー、フッター、サイド、ナビメニュー、コンテンツとして大きく分類さ
Scalable and Modular Architecture for CSS (or SMACSS for short) is more style guide than rigid framework. There is no library within here for you to download or install. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS. E-book available in
いまちょうどチームでそれなりの大きさのHTMLを書いているので、SMACSSを参考にコーディング規約を作ったりしています。せっかくなので何かの参考にと思い公開してみました。 HTMLコーディング HTML5 HTMLのコーディングはHTML5のDOCTYPE準拠のタグを利用します。
最終的なアウトプットではなくてその前段階のプロトタイプをコード書きながら作っていくというのが以前からの課題なのですが、どうやっていこうかなぁと考えながら、こもりさんのスライド1を見ていたら、スライドに出てきたSMACSSって何だっけと思って、日本語版2があったので買って読んでみました。@cssradarこと斉藤祐也さんの翻訳で、それだけでポチってしまいました。（そもそも斉藤のブログ3がスタート地点な気がするし。） SMACSS（スマックス）は、Yahoo!のウェブデベロッパ/デザイナのJonathan Snookさんのスタイルガイドで、拡張性のあるプロジェクトでも対応できる、特定のHTML構造に依存せずに、メンテナンスしやすいCSSの書き方をまとめたものです。CSSプリプロセッサで書く場合もOOCSSやSMACSS4の書き方が基本のようで、本書の中でも紹介してありましたが、深い入れ子はたし
I'm using SMACSS (Scalable and Module Architecture for CSS): http://smacss.com/ Specifically, I'm using Yahoo's Pure CSS (SMACSS) framework (just the Grids stylesheet): http://purecss.io/grids/ Is it correct to place a grid inside of a module? For example, here is a grid inside of a 'foo' module. The foo module should show a row of three items. <div class="foo"> <div class="pure-g"> <div class="pu
CSSルールまとめ SMACSS. OOCSS. BEM
今回、何気なくフレームワークを使うことでなんとなく使っていたCSSルールをしっかり学んでみたので大まかな部分をメモしておきます。 理解した上で使っていき気づきがあったら追記していく予定です。 今回はSMACSS・OOCSS・BEMの３つルールについてしらべました。 SMACSS ベース・レイアウト・モジュール・ステート・テーマの５つのカテゴリに分けたルールを元に設計する手法。 ベースルール セレクタを使いスタイル適用をする。 IDやClassを使わないルール。 reset.cssや、normalize.cssなどがこれに当たる。 レイアウトルール 大枠のレイアウトルールの指定。 ヘッダー・フッター・ナビゲーション・メインコンテンツ・サイドバーなど .layout-header { … } .layout-footer { … } .layout-nav { } .layout-main {
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SMACSSによるCSSの設計 | 前編 ベースとレイアウト
CSS Architecture with OOCSS, SMACSS, BEM
CSSのルールについて考える！ ー OOCSS、BEM、SMACSSって何？ | panmimi design
SMACSS - Scalable and Modular Architecture for CSS (日本語)
SMACSSにBEMを取り入れたクラス名の命名規則 | SONICMOOV LAB
いまどきのCSS – OOCSSとかBEMとかSMACSSとか | 5 LOG
SMACSS に BEM を取り入れよう - CHROMA
CSS設計における3大メソッド[OOCSS][BEM][SMACSS]
BEMとSMACSSを融合させる最も簡単な方法 - Qiita
SMACSSを参考にしたCSSコーディング規約 - Qiita
CSS - OOCSS, SMACSS and more
SMACSS+BEMによるテーマ設計（for Drupal8） - Qiita
SMACSS Your Sass Up
Modular CSS: Thoughts on SMACSS modules | Brett Jankord
「イマドキCSS設計」の解説 - 後編：BEMとSMACSSと実際の運用について - basara669.com
SMACSSによるCSSの設計 | 前編 ベースとレイアウト
StylusでBEMとかSMACSS - blog.strobe-scope.net
oocss&smacss&bemでのcss改善まとめ - Qiita
css設計・命名規則の歴史(BEM・OOCSS・SMACSS・FLOCSS・tailwindcss)
SMACSS（スマックス）について自分なりのまとめ
SMACSS - Scalable and Modular Architecture for CSS
SMACSSを参考にしたCSSコーディング規約 - Qiita
Organize CSS with a Modular Architecture: OOCSS, BEM, SMACSS - Snipcart
SMACSSを日本語版を読んでみました ノート dotgraphy
SMACSS: Is it correct to use a grid inside a module?