昨日も少し書いたEvery Declaration Just Onceアプローチ(以下EDJOと略す)について、皆が目を瞑っているOOCSSの欠点、CSSが持つ特徴、HTMLとの兼ね合いという点からもう少し書いてみたい。これについては未だ誰ともちゃんと議論していない。機会があったらこの記事をベースにでも誰かと話してみたい。 上記Googleの文書は、主にパフォーマンスの観点で書かれている。どうしても長くなりがちな定義を分散して書くよりも、能動的に短くすることができるセレクターを分散して書いた方が、プロダクションにおいてリリースされるCSSファイルのサイズを小さくすることが可能だろうというものだ。同時にこの文書の筆者は自身のブログで、より自然にCSSを書くための手法(原文: 「The Natural Way of Writing CSS」)としてこのEDJOという手法について述べている。 僕
3676 days since last revision. Details are possibly out of date. For many months now, in response to many failed attempts to find a suitable approach to scaling the CSS on the projects I work on, I have been using ‘ECSS’, my own Frankenstein approach to large-scale CSS architecture. It’s detailed more fully in the post, Enduring CSS: writing style sheets for rapidly changing, long-lived projects.
Introduction Multilayer CSS organization methodology is a guideline to structure your CSS. Core methodology principles are based on BEM and OOCSS ideas. MCSS was invented in Odnoklassniki.ru (Top 10 world social network) developers team and is recommended for other developers as core for own documentation and team based methodologies. Despite the fact that this methodology originated in a large pr
※OOCSSについては過去記事を参照のこと OOCSS（オブジェクト指向CSS）のススメ 難しいOOCSS（オブジェクト指向CSS）の設計 再利用性の範囲を2つに分けて考える OOCSSはとにかくクラスを細分化すればいいってもんではない。 クラス=プロパティ レベルまで細分化されたCSSは、煩雑になるばかりかコストも高くなる。 だが、細分化すること自体が悪いわけではない。 失敗に陥るのは、再利用性の範囲を明確にしていないため。 再利用可能な範囲とは？ いま製作しているサイト内？ それともあらゆるサイト？ まずはこの線引きをしっかりすることが重要だと思う。 プロセッサー型CSSフレームワークmaple.cssのヘルパーには以下のようなクラスが定義されている。（抜粋 .ref { position: relative; } .abs { position: absolute; } .fl {
上野 学（@manabuueno）- 2014年1月17日 CSS Subclassing は、主にアプリケーションよりのウェブの実装に役立つ CSS の書き方である。 アプリケーションよりのウェブとは、企業広報サイトのように各画面でデザインの個別性が高いものではなく、コンポーネント化されたUI要素の組み合わせのみで各画面が構成されるようなもののことである。 CSS Subclassing の目的は、HTML 要素をユーザーインターフェースオブジェクトのインスタンスとして捉え、そのスタイルをクラスとして定義することにある。そしてあるクラスの性質（スタイル）を継承した、サブクラスの定義もできるようにする。 HTML 要素にスタイルをあてる場合、class 属性にクラス名をセットしてそれを CSS のセレクターに用いることは普通に行われる。しかし HTML 要素の class 属性は、いわゆる
OOCSSをはじめとするCSS設計におけるモジュール指向のアプローチの話になると、下記のような単一プロパティで定義されたルールを組み合わせたものを指す、というような説明がされる場合がある。 .size1of4 { width: 25%; } .mrs { margin-right: 10px; } .font-small { font-size: 10px; } .text-left { text-align: left; } これらはUtilityとか、Helperとか、汎用クラスというように呼ばれ、あれば何かと便利なルールだ。 どういうときに便利かというのは、唐突なデザイン変更要求などに、都度そのためのルールを定義するよりも、これらの汎用クラスの組み合わせで対応できるということが挙げられるだろう。 <div class="mts text-center"> <img src="ban
This document discusses modern CSS architecture patterns. It introduces concepts like OOCSS, SMACSS, and BEM for organizing CSS in a modular, scalable and maintainable way. It provides examples of how to build reusable CSS modules and maintain them through techniques like naming conventions, categorization and decoupling CSS from HTML. The presentation emphasizes goals of building predictable, reu
CSS Preprocessor Advent Calendar 2012の10日目、@Takazudoです。 僕はSassが好きです。なぜならSassにはextendがあるからです。その理由を、社内勉強会で発表した、以下のスライドで話したことを補足しつつ、書きます。 OOCSS + Sass OOCSSってなんぞ まず、Sassのextendが素敵な点を紹介する前に、OOCSSについて簡単に紹介します。 OOCSSというのは、Nicole Sullivanという人が言い出した考え方です。そのプレゼン資料やビデオなどは、本人が発表したものが、slideshare等にアップされています。 Object-oriented CSS Object Oriented CSS by Nicole Sullivan · Fronteers The Cascade, Grids, Headings, an
コーディングで時間のかかる要素の1つとして、id,class名や画像名などの命名規則が挙げられます。 特に中規模、大規模のサイトで、適当な名前を付けると名前が被る確率が上がり、 その結果、画像の上書きや不要なプロパティがかかってしまうなど、よくない結果になることも考えられます。 一つの例として、私の命名規則について紹介してます。参考程度に読んで頂けると幸いです。 カテゴリに分類して、つなげる。 ページのどの位置に属すか分類し、つなげる方法を取っています。 基本的に、CSSや画像名は同じにします。同名にすることで、名前を考える手間も省け、変更箇所の特定がしやすくなります。 例： CSS #top-side-nav 画像 top-side-nav-home.png top-side-nav-company.png 上記のように命名することで、 デザインを見なくても、どのような箇所に使われている
What is the internet made of? At least the UI layer is mainly composed of media blocks. I talked about the Facebook stream story before, and all the tiny objects of which it is composed. For the most part, the stream story is made up of the media object repeated over and over. The media object is an image to the left, with descriptive content to the right, like this Facebook story: The media objec
Styling headings is either a deceptively complex problem, or maybe the design of CSS made it appear complex when it need not have done. When styling headings (or really anything) we want three big goals to be met: DRY – Do not repeat yourself. We want to set headings once and never (ok, rarely!) repeat those font styles or selectors. This will make our site easier to maintain. Predictable – The he
How do you scale CSS for millions of visitors or thousands of pages? The slides from Nicole's presentation at Web Directions North in Denver will show you how to use Object Oriented CSS to write fast, maintainable, standards-based front end code. Adds much needed predictability to CSS so that even beginners can participate in writing beautiful, standards-compliant, fast websites.Read less
【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がどのような考え方のもとに設計されたのかを見ていきまし
ツイッターで話しているうちにOOCSSが良く分からなくなってしまいました／(^o^)＼ 再確認の意味でエントリーに起こしてみます。 OOCSSって何？ 「Object Oriented CSS」の略で意味は「オブジェクト指向CSS」です。 オブジェクト指向について詳しく説明するのは難しいのですが、要は「バラバラに作っておいて使いたいときに組合せればよくね？」という考え方（だと思う）です。 jQuery等のライブラリを利用するシーンをご想像いただけると分かりやすいと思います。 OOCSSは分かりにくい？ 今回調べてみたところ「OOCSSは分かりにくい」という意見が見受けられました。 お客様（運用者）から別段そのような話を伺ったこともなかったので、 私なりに考えみて以下の2点がその要因では？と推測しました。 classの名前が分かりづらく、何をするものか分からない。 classが複数付くためた
「CSSや画像の命名規則について : Web Design KOJIKA17」という記事を読んで、「OOCSS（Object Oriented CSS：オブジェクト指向CSS）」のいうのがあることを初めて知りました。 いや、そういう方法があることは知ってたんですが、ちゃんとした名前まで付いた方法論として確立してるとは。 というか逆に、僕の認識では「やるべきじゃない」方に分類される方法だったんですがね。 知らない間に流れが変わってたんでしょうか。 「OOCSS」とは？ 簡単に言うと、これまでは「一つの id や class に複数のスタイルを設定する」のが主流でした。 でも、この OOCSS では「一つの class には一つのスタイルを設定する」という方法を採ります。 加えて、class 名もなるべく分かりやすく（「.green」とか「.left」とか）命名します。 これにより、class
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く