Using Object-Oriented CSS with Sass – TheSassWay.com
Nicole Sullivan first introduced the world to Object-Oriented CSS (OOCSS) at Web Directions North in 2008. Since then it has emerged as one of the leading modular systems for organizing your CSS. OOCSS is not that different from other CSS methodologies like SMACSS or BEM. All of them aim to separate content from structure by placing CSS styles in reusable modular blocks of code. In fact, I usually
新しいCSSの設計規約、AMCSSに関する個人的なまとめ - id:anatooのブログ
CSSの設計規約というと、BEMが有名ですが、最近またAMCSSという新しいCSSの設計規約が出てきました。この記事では、このAMCSSについて簡単に紹介したいと思います。 個人的なBEMの好きでない所 仕事でBEMをよく使っていて、優れた設計規約だとは思いつつも、使っていて気になる点がいくつかあります。BlockとElementとModifilerという3つの概念をクラス属性だけで表現しようとするため、非常に記法が見難いのと冗長なところです。 例えば、fooブロックのbarエレメントのhogeモディファイヤーを表現すると、以下のようになります。 <div class="foo foo--hoge"> <div class="foo__bar foo--hoge__bar"> ... </div> </div> "__"や"--"という文字を区切りに使っているため、非常に冗長に見えます。ま
About HTML semantics and front-end architecture – Nicolas Gallagher
A collection of thoughts, experiences, ideas that I like, and ideas that I have been experimenting with over the last year. It covers HTML semantics, components and approaches to front-end architecture, class naming patterns, and HTTP compression. About semanticsSemantics is the study of the relationships between signs and symbols and what they represent. In linguistics, this is primarily the stud
Lonely Planet & GitHub: CSSの構成と方針 - ワザノバ | wazanova
http://ianfeather.co.uk/css-at-lonely-planet/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約5時間前 CSS STATSが話題になったからでしょうか、自社のCSSの構成を分析して、記述方針について紹介するポストが続いています。 1) Lonely Planet Lonely Planetは旅行サイトらしく、写真/動画満載の構成です。 Quick Facts Sass Indented Syntax 150+ソースファイル キャッシュを考慮してコンパイルしたCSSは二つのスタイルシートに CSSはページ当たり35kb (gzip) 基本的には、remとpixelでサイズ指定。一部 em あり。 Preprocessor Railsを使っているが、Sprocketsは
SOLID CSS | en.ja Article
CreditThis article is translated with permission of Miller H. Borges Medeiros. You can find original article at SOLID CSS.本記事はMiller H. Borges Medeiros氏の了承を得て翻訳された記事です。 原文はSOLID CSSにて掲載されています。 CSSはそもそもアカデミック文書やシンプル、カスケードや子孫セレクタの存在が納得いくようなサイト(例: wikiやブログ)をスタイルするために作られた。しかし我々が今現在作るサイトはより複雑で、シンプルなサイトでうまくいっていた実装が通用しなくなっている。CSSを実装するにあたってよくある問題を解決するよりよい実装方法を見つけ出す必要があるし、これまでの実装とは異なるアプローチを生み出す必要がある。ほかの分
How to Handle Deferred Objects in DoCSSa
Introduction DoCSSa is a Sass based architecture and methodology. You can read about it at docssa.info and get the source code of that documentation on the GitHub page. The source code makes use of the concepts, so it's a good starting point. In this article, we are going to focus on the Deferred Objects DoCSSa takes its name from: what do we mean by that and how to use them ? What is a CSS Object
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
MindBEMding – getting your head ’round BEM syntax – CSS Wizardry
25 January, 2013 MindBEMding – getting your head ’round BEM syntax Written by Harry Roberts on CSS Wizardry. Table of Contents Featured case study: NHS One of the questions I get asked most frequently is what do -- and __ mean in your classes? The answer is thanks to BEM and Nicolas Gallagher… BEM – meaning block, element, modifier – is a front-end naming methodology thought up by the guys at Yand
DOCSSA - The Ultimate Driving Machine
Are you looking to invest in the stock market but don’t know where to start? Trading apps are an excellent way for beginners and experienced investors alike to trade stocks, ETFs, and more from the comfort of their own smartphones. With the rise of mobile technology, trading apps have become increasingly popular for those looking to take control of their financial future. Whether you’re a seasoned
カーゴ・カルトCSS
CSSを書いたり管理したりするにはなんらかの方法論があった方が良い、と広く考えられている。しかし実際に取り入れられている手法の中には、セマンティクス上の品質や、長期にわたるメンテナンス性に悪影響を与えるものもある。ここでは、CSSの「フレームワーク方法論」として提唱されているテクニックの問題点や、その問題を僕たちウェブ・ディベロッパーがどうすれば解決できるかについて論じてみようと思う。 現在、CSS開発におけるフレームワーク方法論として、BEMなど類似のテクニックがいくつかあるが、もっとも有名なのはOOCSSだろう。これらの方法論はCSSにオブジェクト指向プログラミングの原則を適用しようと試みる。しかしながら、両者の間にはそもそも宣言型スタイル言語とオブジェクト指向ソフトウェア設計原則というコンセプト上の不一致がある。その結果、経験の浅いディベロッパーが気づきにくいような複雑な問題を持ち込
)
CSS アーキテクチャ、パート 4: MetaCoax アプローチによる CSS のリファクタリング (フェーズ 3 と 4)
このブラウザーはサポートされなくなりました。 Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。 CSS アーキテクチャ、パート 4: MetaCoax アプローチによる CSS のリファクタリング (フェーズ 3 と 4) Denise R. Jacobs | 2013 年 5 月 9 日 野放し状態の CSS を管理するのは容易ではありません。有名な スケーラブルなモジュール構造の CSS のアーキテクチャ (英語) を学んだ方は、CSS についてのチームの苦悩の原因を突き止めることができたことに大喜びすると同時に、そこで提案された変更をドキュメントやワークフローに追加する方法を見積もってみて愕然としたに違いありません。 MetaCoax による CSS のリファクタリング プロセス (英語) では、
)
CSS アーキテクチャ、パート 3: MetaCoax アプローチによる CSS のリファクタリング (フェーズ 1 と 2)
CSS アーキテクチャ、パート 3: MetaCoax アプローチによる CSS のリファクタリング (フェーズ 1 と 2) Denise R. Jacobs | 2013 年 4 月 10 日 CSS アーキテクチャ シリーズで前回(英語) 取り上げた、有名なスケーラブルなモジュール構造のアプローチには、CSS の考え方や CSS の構築方法を変えるのに役立つ特徴がすべて含まれています。これらのアプローチは多くの分野で重なり合っていて、CSS を強化するプロセスのどの側面が真に重要かを示唆しています。新しいサイトを構築するのであれば、いずれのアプローチに従っても問題ありませんが、ここで実行しようとしているのは、手に負えない状態になってしまった既存の CSS を整理することです。 つまり、既に説明したアプローチはどれをとっても優れた威力を発揮しますが、本当に必要なのは、たとえば "Jus
CSS Subclassing
上野 学（@manabuueno）- 2014年1月17日 CSS Subclassing は、主にアプリケーションよりのウェブの実装に役立つ CSS の書き方である。 アプリケーションよりのウェブとは、企業広報サイトのように各画面でデザインの個別性が高いものではなく、コンポーネント化されたUI要素の組み合わせのみで各画面が構成されるようなもののことである。 CSS Subclassing の目的は、HTML 要素をユーザーインターフェースオブジェクトのインスタンスとして捉え、そのスタイルをクラスとして定義することにある。そしてあるクラスの性質（スタイル）を継承した、サブクラスの定義もできるようにする。 HTML 要素にスタイルをあてる場合、class 属性にクラス名をセットしてそれを CSS のセレクターに用いることは普通に行われる。しかし HTML 要素の class 属性は、いわゆる
CSSの汎用クラスのつかいどころ | inkdesign
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - davidtheclark/scalable-css-reading-list: Collected dispatches from The Quest for Scalable CSS
悩まないコーディングをしよう！ OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計（Sass対応）
Used and Abused – CSS Inheritance and Our Misuse of the Cascade
GitHub - hiloki/flocss: CSS organization methodology.