OOCSSについて調べた - Qiita
OOCSSとは object oriented CSSの略。 BEMの実例を調べようとしたらairbnbのGitHubに名前を見かけたので調べた。 何やら原則があるらしい。 原則1 再利用できるようにする 転載元 https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/ before # button { width: 200px; height: 50px; padding: 10px; border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px; } # widget { width: 500px; min-height
CSSでもオブジェクト指向を実現する書き方 - Qiita
英語版はこちら。 OOCSSとは異なり、CSSでちゃんとオブジェクト指向を実現するための方法について解説します。 0. まず「オブジェクト指向」とは 「オブジェクト指向」はIT業界を支えている重要なパラダイムのひとつで、JavaScriptを含む様々なプログラミング言語でサポートされています。特徴としては「型」や「クラス」といった雛形を持ち、雛形から生成された「インスタンス」とクラスとを区別します。 クラスとインスタンスとを区別することで、長期的にメンテナンスしやすいプログラムにすることができます。クラスを修正したり、インスタンスに変更を加えたり、それぞれ自由に拡張できます。 こういったオブジェクト指向プログラム言語（OOPL）に共通の特徴は、CSSでは見られることがありませんでした。2008年にOOCSSという手法が登場した後もです。 それも今日でお終いです。さっそく見ていきましょう。
CSSを長生きさせるための設計手法まとめ（*ECSSあり） - Qiita
はじめに CSSの設計手法については、数年前からたくさんのブログや書籍で詳細に取り上げられています。 今回はバックエンドからフロントエンドに来られたエンジニアさんや、コーディングに知識のあるディレクター・企画職の方にナレッジを共有したいと思い、まとめてみました。 定番のOOCSS,SMACS,BEMに加え、2016年に普及し始めたECSSについても取り上げます。 なぜCSS設計が必要なのか CSSは単純で多くの人が簡単に操作することができるという素晴らしい特性を持っています。 しかしその特性のために、複数人の関わる大規模なサービスや、長期的なメンテナンスが必要なサービスではすぐに破綻してしまう(なんでCSSすぐ死んでしまうん？)という弱点も抱えています。 大規模なサービスの初期デザインをコーディングに起こす際は、自分以外の人でも容易に理解できてメンテナンスしやすい設計を行う能力が必須です。
CSS設計を勉強するならまずこれを見たら良いかも - Qiita
HTMLを覚えて3周年経ちました、@sueshinです。 3周年とか枕詞に使っている時点でお分かりかと思いますがチキン野郎です。はい。 お手柔らかにお願いしますmm 私が担当するジョブセンスリンクは9年程たった歴史のあるWEBサイトです。 トップページで使用されているCSSセレクタの数は約3000で、行数でいうと軽く10000行は超えていると思います。 そんな、あふれんばかりのレガシーコードに愛憎の念が入り混じっている今日この頃です。 現在私は師走ということで、来年に向けてCSSの整理をしないとと思い、CSS設計を勉強しています。 ただ、情報の多くはWEBに上がっている一方で、何から手をつけたら良いか初めはわからなかったので、 見渡してCSS設計を学習できるようにざっくりまとめて見ました。 CSS設計のゴール 何事もゴールを決めないことには走れないですよね。 「CSS Architectu
Sass を利用したオブジェクト指向 CSS を使おう（翻訳） - Qiita
少し前の記事ですが、2014年10月26日に The Sass Way に掲載されていた OOCSS（オブジェクト指向CSS） の記事が実践的でとても役に立ったので紹介したいと思います。 以下、こちらの記事の翻訳となります。 "Using Object-Oriented CSS with Sass" by Jaime Caballero （掲載許可いただいております） Sass を利用したオブジェクト指向 CSS を使おう（翻訳） Nicole Sullivan 氏は、2008年の Web Directions North で、最初にOOCSSを世界に紹介した。それ以降、CSSを系統立てるための最も重要なモジュラーシステムのひとつとして知られるようになった。 OOCSS は、SMACSS や BEM のような他のCSSメソッドと違うわけではない。それらはすべて、再利用できるモジュラーブロッ
OOCSS サンプルコード - Qiita
別の記事で OOCSS についての記事を翻訳しました が、ここでは実際にサンプルコードを載せたいと思います。 CSSの実装をするときは、普段から基本的に OOCSS の原則である 『構造と見た目の分離』 『コンテナーとコンテンツの分離』 に従って書くようにしています。 特にフォームまわりでは、同じ要素でも、選択状態にあるかどうかで色が変わったり、削除ボタンなどのアイコンを併置していたりなど、パターン化できるものが多く、OOCSS の考え方が役に立ちました。 前述の記事のようにすべてを extend で組み立てることを徹底したりはしていませんが、できるだけモジュールとして切り分けられるところは切り分けて、コードを書いています。 以下に、実際に使っているサンプルコードを載せます。 実例１：プレイスホルダーで『構造と見た目の分離』 これは、プレイスホルダーのみで『構造と見た目の分離』を実践した例
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 Independent writing is brought to you via my wonderful Supporters. 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 abou
サルでも分かるOOCSS（オブジェクト指向CSS）。未だにidを使っている愚かなフロントエンジニアへ
サルでも分かるOOCSS（オブジェクト指向CSS）。未だにidを使っている愚かなフロントエンジニアへ 2015.08.02 タイトル煽りすみません。idもidで使い方によっては大事です。。。 ただし実際のところ、CSSの設計でid（#）がかなり減ってるのをご存知でしょうか。近年のフロントエンドの流行ではidをちょいちょい使うよりも「めんどいから全部class（.）にしてしまおうぜ」っつー流れがあります。 ……とはいっても、「めんどいから」というのが唯一の理由なのではなく、まぁ色々理由はあるのですが、その中のひとつに「OOCSS（Object-Oriented CSS）の思想が普及してきたから」があって、今回はそのOOCSSについて どんなバカでも分かるように サワリをご紹介したいと思います。 よかったですね、OOCSSを知らなかった愚かなフロントエンジニアの皆さん！ ご紹介したいと思います
Standard Module Format
Modules Block Structures There are three basic block structures that you can build from. Examine how the structures work in Firebug, Dragonfly, or by applying the stylesheet mod_debug.css Mod is the basic container, all other containers inherit from this one. This is the high performance container that should be used unless you specifically need another type of container. One tiny image Expands to
OOCSS.ORG - Learn Code By Playing Games
Learn CodeBy PlayingGamesBuilt for coders, loved by gamers.
Home · stubbornella/oocss Wiki · GitHub
Dismiss Join GitHub today GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together. Sign up How do you scale CSS for thousands of pages? Object Oriented CSS is an answer. It’s an approach for writing CSS that’s fast, maintainable, and standards-based. It adds much needed predictability to CSS so that even beginners can part
OOCSS(Object-Oriented CSS)の考え方 - in0in0の日記
CSSでサイトを作るとき、ページをidで区切り、その中のclassに対してスタイルを指定するというやり方が一般的じゃないかなと思います。 #page-foo .box {margin:10px } #page-baa .box {margin:20px }しかし、いざあのページのこの部分をこのページに持ってきたい…となるとCSSファイルごと持ってこなければならない、移転先のclass名とバッティングしてしまうなど再利用が難しいという反面もあります。 今回仕事でサイトを構築するにあたり、再利用可能なモジュールで構成すればコーディングにかかる工数は減るのではと考えていたので（特にIEのバグ関連…検証済みのモジュールで構成すれば確実！）再利用性とパフォーマンスを重視したフレームワークOOCSSについて調べてみました。 OOCSSの基本的な考え方 目的別にclassを複数指定する。 idに依存する
An Introduction To Object Oriented CSS (OOCSS) — Smashing Magazine
Have you ever heard the phrase “Content is King”? Being a Web developer, and therefore having a job that’s often linked to content creation, it’s likely you have. It’s a fairly overused but true statement about what draws visitors to a site. From a Web developer’s perspective, however, some may argue that speed is king. More and more, I’m starting to favour that stance. In recent years many experi
OOCSS（オブジェクト指向CSS）のススメ | hijiriworld Web
【OOCSS】 <div class="box box-red"></div> <div class="box box-blue"></div> .box { width: 50px; height: 50px; } .box-red { border: 1px solid red; background-color: #FFCCCC; } .box-blue { border: 1px solid blue; background-color: #66CCFF; } といった感じです。 いままで「OOCSS」という言葉を知らなくても、マークアップエンジニアや、ある程度経験のあるWebデザインナーであれば、効率化を図るために自然にやっていることではないでしょうか？ この考え方を体系化してまとめたものがOOCSSです。 では次にOOCSSがどのような考え方のもとに設計されたのかを見ていきまし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
非フロントエンドエンジニアのためのCSS設計入門（OOCSS） - Qiita
非フロントエンドエンジニアのためのCSS設計入門（OOCSS） - Qiita
【HTML CSS】見た目と構造は分離すべし【初心者向け】 - Qiita
Object Oriented CSS · stubbornella/oocss Wiki
Home One
OOCSS + Sass