MCSS
MCSS(Multilayer CSS) OOCSSとBEM
- BEMでいうところのBlockとそのElementとModifierはまとめて同じ場所に記述されるべき。
- 可能な限りクラス名を略称にする
1.Foundation
SMACSSでいうところのBase
2.Base
SMACSSでいうところのModule
下層のレイヤーからの上書きを禁止することによって、レイヤーの混同とそれによる複雑化、破綻のリスクを抑える
3.Project
Baseレイヤーコンポーネントよりも具体的なページを構成する要素。登録フォーム、ログインエリアのブロック、コメントリストのような要素
4.Cosmetic
下層のレイヤーコンポーネントには含まれないような、ちょっとしたスタイルが含まれる。リンクカラー、少数のプロパティで構成されるCSSクラス(.font-sizeXL .margin-tL)、グローバルなModifier
- Cosmeticレイヤー自身も含め、例外のコンテキストレイヤー以外のレイヤーから上書きできない。
Context 特定のブラウザやデバイス向け、またはログイン中の時にメディアクエリによる特定条件化にある場合などに、例外的なスタイルを用意するためのレイヤー
Reference from
http://operatino.github.io/MCSS/
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ
- 作者: 谷拓樹
- 出版社/メーカー: インプレス
- 発売日: 2014/07/24
- メディア: Kindle版
- この商品を含むブログ (1件) を見る
Difference between mixins, extend and %placeholder
Mixins
A mixin lets you make groups of CSS declarations that you want to reuse throughout your site.
@mixin message($color) { border: 1px solid #ccc; padding: 10px; color: $color; } .success { @include message(#333); border-color: green; } .error { @include message(#333); border-color: red; }
.success { border: 1px solid #ccc; padding: 10px; color: #333; border-color: green; } .error { border: 1px solid #ccc; padding: 10px; color: #333; border-color: red; }
Extend/Inheritance
Using @extend lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY.
.message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; } .error { @extend .message; border-color: red; }
.message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; }
%placeholder
Placeholder selectors have the additional property that they will not show up in the generated CSS, only the selectors that extend them will be included in the output.
%message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend %message; border-color: green; } .error { @extend %message; border-color: red; }
.success, .error{ border: 1px solid #cccccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; }
Difference between mixins, extend and %placeholder
- difference between mixins and extend
# mixin +.success { + border: 1px solid #ccc; + padding: 10px; + color: #333; + border-color: green; +} +.error { + border: 1px solid #ccc; + padding: 10px; + color: #333; + border-color: red; +} # extend -.message, .success, .error{ - border: 1px solid #cccccc; - padding: 10px; - color: #333; -} -.success { - border-color: green; -}
- difference between A and B
# extend .message + .message, .success, .error, .warning { # extend %message - .success, .error{
Limitations
Since @extend works by adding a selector to another selector without duplicating any of the properties it's actually impossible to join selectors in different @media blocks.
%icon { transition: background-color ease .2s; margin: 0 .5em; } @media screen { .error-icon { @extend %icon; } .info-icon { @extend %icon; } }
You may not @extend an outer selector from within @media. You may only @extend selectors within the same directive. From "@extend %icon" on line 8 of icons.scss
@media screen { %icon { transition: background-color ease .2s; margin: 0 .5em; } } .error-icon { @extend %icon; } .info-icon { @extend %icon; }
@media screen { .error-icon, .info-icon { transition: background-color ease .2s; margin: 0 .5em; } }
@extend doesn't work between rules in different @media blocks.
Conclusion
- コンパイル後のcssでより簡潔(冗長ではない)になるのが、mixinより、extend
- CSSには書き出されない別のセレクタから継承(@extend)されるためだけの専用セレクタが%placeholdar
Reference from
http://sass-lang.com/guide https://sass-guidelin.es/#extend https://sass-guidelin.es/#mixins https://www.sitepoint.com/sass-mixin-placeholder/ http://thesassway.com/intermediate/understanding-placeholder-selectors
!important
6.4.2 !important rules CSS attempts to create a balance of power between author and user style sheets. By default, rules in an author's style sheet override those in a user's style sheet (see cascade rule 3).
cssはauthorとuserでバランスを取ろうとする。 デフォだとauthor > user になる。
However, for balance, an "!important" declaration (the delimiter token "!" and keyword "important" follow the declaration) takes precedence over a normal declaration. Both author and user style sheets may contain "!important" declarations, and user "!important" rules override author "!important" rules. This CSS feature improves accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation.
user, author 両方 !importantだった場合 author < user
Declaring a shorthand property (e.g., 'background') to be "!important" is equivalent to declaring all of its sub-properties to be "!important".
backgroundとかにimportantとか使うとその子の要素にも影響する
The first rule in the user's style sheet in the following example contains an "!important" declaration, which overrides the corresponding declaration in the author's style sheet. The second declaration will also win due to being marked "!important". However, the third rule in the user's style sheet is not "!important" and will therefore lose to the second rule in the author's style sheet (which happens to set style on a shorthand property). Also, the third author rule will lose to the second author rule since the second rule is "!important". This shows that "!important" declarations have a function also within author style sheets.
/* From the user's style sheet */ p { text-indent: 1em ! important } p { font-style: italic ! important } p { font-size: 18pt } /* From the author's style sheet */ p { text-indent: 1.5em !important } p { font: normal 12pt sans-serif !important } p { font-size: 24pt }
参照したドキュメントは、CSS 2.1のものだった。 https://www.w3.org/TR/CSS2/cascade.html
こっちはCSS3の最新のドキュメント https://www.w3.org/TR/css3-roadmap/
だから!importantは非推奨
sass, scss
- Sass, also known as the indented syntax
- SCSS, a CSS-like syntax
Initially, Sass was part of another preprocessor called Haml, designed and written by Ruby developers.
// Variable !primary-color= hotpink // Mixin =border-radius(!radius) -webkit-border-radius= !radius -moz-border-radius= !radius border-radius= !radius .my-element color= !primary-color width= 100% overflow= hidden .my-other-element +border-radius(5px)
// Variable $primary-color: hotpink; // Mixin @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } .my-element { color: $primary-color; width: 100%; overflow: hidden; } .my-other-element { @include border-radius(5px); }
Pros for Sass Indented Syntax
- No need for @mixin or @include, when a single character is enough: = and +.
- the Sass syntax enforces clean coding standards by relying on indentation.
Pros for SCSS Syntax
- you can rename a CSS file in .scss and it will just work, but sass can’t.
- easier to read
- ittle to no learning curve.
Reference from
OOCSS(Object Oriented CSS)概要とその具体的な書き方
枠とモジュールという考え方
- 枠 モジュールをはめ込んでいくための枠組み
- モジュール レゴや積み木などの1ピース(部品)
- モジュール名さえかぶらなければスタイルの競合が起きない
- モジュールの一覧を作る
モジュールの命名、抽象的(汎用的)⇄具体的(汎用性は低い)
.mod-moduleA なにかのモジュール それが何のモジュールか情報がない .mod-itemblock 商品を表示するブロック .mod-relateditems 関連する商品 関連するもの以外が入るかもしれない .mod-relatedbooks 関連する書籍 書籍以外の商品が入るかもしれない .mod-relatedbooknav 関連する書籍のナビゲーション ナビゲーションのリンクはないかもしれない .mod-amazonnav アマゾンのナビゲーション アマゾンへのリンクはないかもしれない
汎用性と具体性のバランスをどうとるのか
求められるのは、場合にもよりますが、多くのケースで具体的すぎず、抽象的すぎない名前 最低限、そのモジュールがどんな役割を持っているのか伝わる程度
微調整のための便利なクラス
.ex-align-r { text-align:right; } .ex-align-l { text-align:left; } .ex-align-t { vertical-align:top; } .ex-align-b { vertical-align:bottom; }
モジュールとスキンという考え方
<span class="buttonbase twitterbutton"> Twitter </span> <span class="buttonbase facebookbutton"> Facebook </span>
/* モジュール */ .buttonbase { border:5px solid white; border-radius:10px; padding:.2em .5em; color:white; display:inline-block; margin:0 10px; } /* スキン */ .twitterbutton { background:red; } .facebookbutton { background:blue; }
共通部分を「モジュール」としてまとめ、差異は「スキン」としてまとめると、クラス名をみたときにコンテンツの内容もある程度なら推測ができるし、しかもCSSも効率的に書くことができる
[Separate container and content] (https://github.com/stubbornella/oocss/wiki#separate-container-and-content) (コンテナとコンテントを分離)
メインエリアにある見出しは、#mainのh2 問い合わせブロックにある見出しは、.contactの中にある、.header以下にあるh2 サイドバーにあるMenu1やMenu2などの見出しは、#sidebar以下のh2
#main h2 { } #main .contact .header h2 { } #sidebar h2 { } .somewhere .title h2 { }
場所に依存した指定方法だからダメ、以下のような問題が発生する
Essentially, this means “rarely use location-dependent styles”.
- 上書き合戦(h2をいろいろなところで使うとすれば、このh2に当てたスタイルを、部分的に上書きする必要が出てくる)
- コピー(見栄えが同じ見出しがいろいろなところに登場した場合、それぞれのh2を含むセレクタについて、同じスタイルの指定をコピーして使わなければならなくなってしまうかもしれない)
→ 当てたいスタイルの詳細度が、競合しているどこかのスタイルよりも低ければ、自分の書いたスタイルは反映されない
Webページを、レゴの集まりで考える
<h2 class="heading">Title</h2> <h2 class="heading2">Contact</h2> <h2 class="heading3"><span>Menu1</span></h2> <h2 class="heading3"><span>Menu2</span></h2>
/* heading module */ .heading { prop: val; } /* heading2 module */ .heading2 { prop: val; } /* heading3 module */ .heading3 { prop: val; } .heading3 > span { prop: val; }
OOCSSでは、このひとつひとつのレゴのパーツをCSSオブジェクト(= モジュール)とする。
Basically, a CSS “object” is a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript. That object can then be reused throughout a site.
https://github.com/stubbornella/oocss/wiki#whats-a-css-object
同じパーツを二度コーディングする必要がなくなる。
[Separate structure and skin] (https://github.com/stubbornella/oocss/wiki#separate-structure-and-skin) (ストラクチャとスキンの分離)
<span class="button">Button!!</span>
.button { font-size:1.5em; padding:.5em 2em .4em; border:3px solid #000; border-radius:10px; }
<span class="button caution">Caution!!</span>
.caution { font-weight:bold; color:#fff; background:#FD3636; border-color:#BC2828; }
BAD pattern
<span class="cautionButton">Caution!!</span>
.cautionButton { font-size:1.5em; /* 共通 */ padding:.5em 2em .4em; /* 共通 */ border:3px solid #000; /* 共通 */ border-radius:10px; /* 共通 */ font-weight:bold; color:#fff; background:#FD3636; border-color:#BC2828; }
基本となるストラクチャに、スキンを適用して具体的な見栄えを作る 重要なのは、モジュールの関係を「ストラクチャ」と「スキン」で整理すること
まとめ
CSSオブジェクトをストラクチャとスキンに分けて整理する。
Reference from
https://app.codegrid.net/entry/frames-and-modules https://github.com/stubbornella/oocss/wiki https://app.codegrid.net/entry/oocss-1 https://www.slideshare.net/stubbornella/object-oriented-css