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設計入門（OOCSS） - Qiita
CSSを書いていて、設計方針がわからない、破綻して!importantをつけざるを得なくなってしまうことがあったため、CSS設計の1つの考え方であるOOCSSについてまとめてみました。 この記事では オブジェクト指向 CSSの詳細度 については説明しません。 OOCSSとは オブジェクト指向CSSのことです。 同じコードを2度書かない どこに書いても同じ振る舞いをする 辺りを目的とした、CSSの設計概念です。2つの原則を用いて、変更に強い設計を目指します。 OOCSSの2つの原則 構造とスキンの分離 同じコードを2度書かないようにするためです。 赤い箱を「赤い」と「箱」に分けます。 そうすることで、青い箱が必要になったときに、「箱」の部分を共通化することができます。 Before .box-red { width: 700px; height: 700px; margin: 0 auto;
CSSでもオブジェクト指向を実現する書き方 - Qiita
英語版はこちら。 OOCSSとは異なり、CSSでちゃんとオブジェクト指向を実現するための方法について解説します。 0. まず「オブジェクト指向」とは 「オブジェクト指向」はIT業界を支えている重要なパラダイムのひとつで、JavaScriptを含む様々なプログラミング言語でサポートされています。特徴としては「型」や「クラス」といった雛形を持ち、雛形から生成された「インスタンス」とクラスとを区別します。 クラスとインスタンスとを区別することで、長期的にメンテナンスしやすいプログラムにすることができます。クラスを修正したり、インスタンスに変更を加えたり、それぞれ自由に拡張できます。 こういったオブジェクト指向プログラム言語（OOPL）に共通の特徴は、CSSでは見られることがありませんでした。2008年にOOCSSという手法が登場した後もです。 それも今日でお終いです。さっそく見ていきましょう。
非フロントエンドエンジニアのためのCSS設計入門（OOCSS） - Qiita
CSSを書いていて、設計方針がわからない、破綻して!importantをつけざるを得なくなってしまうことがあったため、CSS設計の1つの考え方であるOOCSSについてまとめてみました。 この記事では オブジェクト指向 CSSの詳細度 については説明しません。 OOCSSとは オブジェクト指向CSSのことです。 同じコードを2度書かない どこに書いても同じ振る舞いをする 辺りを目的とした、CSSの設計概念です。2つの原則を用いて、変更に強い設計を目指します。 OOCSSの2つの原則 構造とスキンの分離 同じコードを2度書かないようにするためです。 赤い箱を「赤い」と「箱」に分けます。 そうすることで、青い箱が必要になったときに、「箱」の部分を共通化することができます。 Before .box-red { width: 700px; height: 700px; margin: 0 auto;
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 （掲載許可いただいております） Nicole Sullivan 氏は、2008年の Web Directions North で、最初にOOCSSを世界に紹介した。それ以降、CSSを系統立てるための最も重要なモジュラーシステムのひとつとして知られるようになった。 OOCSS は、SMACSS や BEM のような他のCSSメソッドと違うわけではない。それらはすべて、再利用できるモジュラーブロックの中にCSSスタイルを置くことによって、構造からコンテンツを分
OOCSS サンプルコード - Qiita
別の記事で OOCSS についての記事を翻訳しました が、ここでは実際にサンプルコードを載せたいと思います。 CSSの実装をするときは、普段から基本的に OOCSS の原則である 『構造と見た目の分離』 『コンテナーとコンテンツの分離』 に従って書くようにしています。 特にフォームまわりでは、同じ要素でも、選択状態にあるかどうかで色が変わったり、削除ボタンなどのアイコンを併置していたりなど、パターン化できるものが多く、OOCSS の考え方が役に立ちました。 前述の記事のようにすべてを extend で組み立てることを徹底したりはしていませんが、できるだけモジュールとして切り分けられるところは切り分けて、コードを書いています。 以下に、実際に使っているサンプルコードを載せます。 実例１：プレイスホルダーで『構造と見た目の分離』 これは、プレイスホルダーのみで『構造と見た目の分離』を実践した例
Object Oriented CSS · stubbornella/oocss Wiki
Object Oriented CSS Slides: https://www.slideshare.net/stubbornella/object-oriented-css 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 participate in writing beautiful websites. Nicole Sullivan first presented it at We
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 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 about to talk about in this post is not an alternative or different nam
サルでも分かる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
Object-oriented CSS
Hosted Play with these in Firebug to learn the basics. Template Grids Module Content (very alpha) Downloads on Github Velocity download Alternate download Stuck? If you don't keep up with any of the exercises you can view (and download) the finished examples here. Starting Template Exercise 1: Template Exercise 2: Grids Exercise 3: Module Manipulation Exercise 4 Module Creation Welcome, Velocity C
CSS Mixins
Include allows the property value pairs in an @mixin to be copied into the current declaration block. An include consists of the include keyword, followed by a colon (:), followed by a value. Around each of these there may be white space. The value may be a simple selector or a comma separated list of simple selectors. Values have the following meanings: <selector> A simple selector which must be
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ページを開く
【HTML CSS】見た目と構造は分離すべし【初心者向け】 - Qiita
OOCSS + Sass