【CSS設計手法】BEM、OOCSS、SMACSSの違いと特徴のまとめ | Web Design Trends

2019/03/21 96 users BEM SMACSS CSS設計手法 特徴 まとめ

CSSの設計手法とは、CSSのメンテナンス性や作業効率を向上させるためのHTMLのクラス名の付け方と、CSSのコードの管理方法の考え方のことを言います。命名規則などとも呼ばれたりしますね。 ページ数が少なく、コード量もそこまで多くないような場合はあまり気にする必要はありませんが、大きなプロジェクトになるとCSSの... 続きを読む

CSSのコードを整理し、効率的に管理する方法のまとめ | コリス

2017/08/07 67 users コリス CSS オブジェクト指向 コンテナ 一連

CSSのコードを書くことは簡単ですが、コードを整理し、効率的に管理する方法は難しいものです。大規模なプロジェクトだけでなく、小規模なプロジェクトにも、そして未来の自分のためにも必須と言えます。 CSSを効率的に管理する一連のソリューションについて紹介します。 OOCSS はオブジェクト指向のCSSの略です。OOCSSのアプローチには、2つのポイントがあります。 構造とデザインの分離 コンテナとコン... 続きを読む

Sassの複数のimportはglobを使って一つにまとめると幸せ - Qiita

2017/01/26 34 users glob CSS Sass Qiita import

CSSの拡張言語 Sass の強力な機能の一つは、ファイルを複数に分割できる「 Partials 」です。ファイルを機能ごとに分割することで、見通しのよいコードを記述できます。近年注目を浴びている「 OOCSS 」をSassで実現する上でもよく使われています。 しかし、分割するファイルが多くなればなるほど、大量の @import を記述したり、ファイル分割の度に @import を書き換える手間が... 続きを読む

自分のHTMLやCSSのコーディング環境がベストか見直してみよう！作業を効率化する技術やツールの導入・使い方がよく分かるオススメの本 | コリス

2015/04/28 93 users コリス less BEM Git Sass

SassやLESSなどのCSSプリプロセッサ、OOCSSやBEMを使ったCSSの設計、Gitでのバージョン管理、gulpを使ったタスクランナー、Bootstrapなどのフレームワークの導入など、ここ数年でコーディング業界にさまざまな新しい技術やツールが登場しました。 なんだか便利そうなのは分かるけど、どこから手をつければよいのか分からない。似たようなものがあるけど、どれが自分にあっているのか？ コ... 続きを読む

OOCSSとEDJO、もしくはHTMLとCSSにおける命名 - morishitter blog

2015/01/15 47 users CSS 命名 欠点 HTML morishitter blog

2015-01-16 OOCSSとEDJO、もしくはHTMLとCSSにおける命名 OOCSSの欠点とEvery Declaration Just Onceのもたらすもの hail2uさんのこの記事を読んで、EDJO (Every Declaration Just Once)というCSSの記述アプローチを知ったので、僕なりに考えたことをまとめてみる。 OOCSSとEDJO OOCSSとEDJOの違い... 続きを読む

OOCSSの欠点とEvery Declaration Just Onceのもたらすもの - Weblog - Hail2u.net

2015/01/15 56 users Weblog hail2u.net CSS 欠点 HTML

昨日も少し書いたEvery Declaration Just Onceアプローチ(以下EDJOと略す)について、皆が目を瞑っているOOCSSの欠点、CSSが持つ特徴、HTMLとの兼ね合いという点からもう少し書いてみたい。これについては未だ誰ともちゃんと議論していない。機会があったらこの記事をベースにでも誰かと話してみたい。 OOCSSとは まずはOOCSSについてざっと触れておく。OOCSSではい... 続きを読む

シンプルで使いやすい！レスポンシブ対応のさまざまなページを実装できる超軽量フレームワーク -TukTuk | コリス

2014/07/28 79 users コリス Bootstrap Foundation グリッド

BootstrapやFoundationは高性能だけど機能が豊富すぎる、またグリッドだけのフレームワークでは物足りない、そんな人にぴったりのレスポンシブ対応のOOCSS（オブジェクト指向CSS）で設計された超軽量（9KB）のフレームワークを紹介します。 TukTuk TukTuk -GitHub TukTukは、レスポンシブ対応の実用的なさまざまなページを軽量のスタイルシートで実装することを目的と... 続きを読む

CSS Architecture with OOCSS, SMACSS, BEM

2014/03/09 67 users BEM SMACSS

CSS Architecture with OOCSS, SMACSS, BEM Presentation Transcript CSS Architecture with OOCSS,SMACSS,BEM jsCafe 2014-03-09 Katsunori Tanaka OUTLINE 1. CSS Architecture 2. CSS Methodology 3. CSS Preproc... 続きを読む

ID使っても別に問題ない - Weblog - hail2u.net

2013/09/13 199 users Weblog hail2u.net 一端 CSS 風潮

CSSでID使うの良くない……どころか、ID使うのはゴミクズカスみたいな風潮で辛い。その根拠はいくつかあり、それらはCSSだけをただそのまま書く場合には納得出来ないこともないかなーと思うので余計に辛い。特にOOCSSのようなアプローチではIDは混ぜるな危険。だからといってIDを使わないのがベスト・プラクティスなわけじゃない。 CSS Lintの利用が広まり、これがID使うなって怒るのも原因の一端な... 続きを読む

2013年上半期、チェックしておきたいCSSのフレームワークのまとめ | コリス

2013/07/25 214 users コリス フレームワーク CSS オブジェクト指向CSS ベース

最近リリースされたものを中心に、これは！というCSSのフレームワークを紹介します。 フラットなスタイルはもちろんですが、オブジェクト指向CSS（OOCSS）ベースで設計されたものが目立ちますね。 一番最後のフォームに特化した「MOSTO」オススメです！ Cascade Framework Cascade Framework -GitHub オブジェクト指向CSS（OOCSS）ベースで設計され、IE... 続きを読む

普段使ってるCSSのパフォーマンスとメンテナンス性をアップさせるOOCSSベースの超軽量フレームワーク -Kraken | コリス

2013/06/05 90 users Kraken コリス CSS オブジェクト指向CSS 普段

オブジェクト指向CSS（OOCSS）のコンセプトは普段使ってるCSSのパフォーマンスとメンテナンス性を向上させること。 そんなOOCSSをベースに設計された、モバイルファーストの拡張性も備えた超軽量フレームワークを紹介します。 Kraken Kraken -GitHub オブジェクト指向CSS（OOCSS）とは Krakenの特徴 Krakenのデモ オブジェクト指向CSS（OOCSS）とは Kr... 続きを読む

Takazudolog - OOCSSとSass

2012/12/09 216 users Sass extend Takazudo スライド 以下

CSS Preprocessor Advent Calendar 2012の10日目、@Takazudoです。 僕はSassが好きです。なぜならSassにはextendがあるからです。その理由を、社内勉強会で発表した、以下のスライドで話したことを補足しつつ、書きます。 OOCSS + Sass OOCSSってなんぞ まず、Sassのextendが素敵な点を紹介する前に、OOCSSについて簡単に紹介... 続きを読む

OOCSSが良く分からなくなってしまったので、ちょっと再確認してみた | そぷログ

2012/02/16 15 users ブログ オブジェクト指向 オブジェクト指向CSS エントリー

ツイッターで話しているうちにOOCSSが良く分からなくなってしまいました／(^o^)＼ 再確認の意味でエントリーに起こしてみます。 OOCSSって何？ 「Object Oriented CSS」の略で意味は「オブジェクト指向CSS」です。 オブジェクト指向について詳しく説明するのは難しいのですが、要は「バラバラに作っておいて使いたいときに組合せればよくね？」という考え方（だと思う）です。 jQue... 続きを読む