[CSS] Object Oriented CSSを学んで綺麗なコードを書く - YoheiM .NET
こんにちは、@yoheiMuneです。 12月はたくさんのアドイベントカレンダーに寄稿しようと思っていますが、今回第１弾はCSS Architecture Advent Calendar 2014です。まだ空きがあるみたいなので、書きたいという方はぜひ！ 今日はOOCSSというCSS設計についてブログを書きたいと思います。 Special Thanks to https://flic.kr/p/cAM8iL 目次 OOCSSとは何か OOCSSは、Nicole Sullivanによって2009年に発表されたCSS設計手法の1つで、Object Oriented CSSの略称です。 CSSの世界にオブジェクト指向という考え方を導入することで、CSS設計の1つの道筋を示しています。 なぜ設計を学ぶべきのか ところでなぜ設計思想を学ぶ必要があるのでしょうか。 設計やフレームワークやアーキテクチャ
![[CSS] Object Oriented CSSを学んで綺麗なコードを書く - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/f240faba3b3a8d30aff7d4ba1a5fa75cf5661fbb/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F346.jpg)
Writing modular CSS (BEM/OOCSS) selectors with Sass 3.3
3835 days since last revision. Details are possibly out of date. Not long ago I wrote about my current modular CSS (BEM/OOCSS) naming conundrum. This is a shorter but related post about how those kinds of selectors can be produced with new features of Sass 3.3. Update 16th March 2014: The final release of Sass of 3.3 changed the way that suffix selectors could be written. This post (now much short
Yandex BEM/OOCSS
If you’re writing your HTML and CSS code in OOCSS-style, Yandex’s BEM style specifically, you will like this filter. It provides some aliases and automatic insertions of common block and element names in classes. In short, BEM introduces three concept types for CSS classes: Block, Element and Modifier. Block is a some sort of a namespace for a semantic sections of HTML page, for example, search-fo
MCSS
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
4 ways to create CSS that's modular and scalable
Modular code is reusable code. It can be combined in a variety of ways, making it flexible and scalable, allowing you to iterate code blocks independently and leading to better performance and more maintainable sites. Object Oriented CSS (OOCSS), Scalable and Modular Architecture for CSS (SMACSS), Don’t Repeat Yourself CSS (DRY CSS), and Block, Element, Modifier (BEM) are four popular methods for
Writing DRYer vanilla CSS – CSS Wizardry
5 July, 2013 Writing DRYer vanilla CSS Written by Harry Roberts on CSS Wizardry. Table of Contents Featured case study: NHS When dealing with code, we often strive to make things DRY. DRY code usually means two things: Less actual code, meaning smaller file sizes, less for the user to have to download, more efficient code, etc. Less to have to maintain; not repeating yourself means that you can ma
CSS の書き方についてのメモ | Unformed Building
どんな感じで書けば楽できるかとか、後から修正しやすいかとか、そんなことです。 ボタンのスタイリングを例に、自分の通った道を追ってみます。 今回使う HTML は次のようになっています。 <div class="buttons"> <button class="edit">Edit</button><button class="publish">Publish</button><button class="delete">Delete</button> </div> これを CSS でスタイリングしていきます。 1. とりあえず個別指定 こんな極端な書き方する人はあまりいないでしょうけど、例として。 .edit { margin: 0 5px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; widt
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今必要なCSSアーキテクチャ
Architecting Scalable CSS