[B! ecss] sh19eのブックマーク

sh19e id:sh19e

ecssに関するsh19eのブックマーク (5)

抽象化を避けるCSS設計方法論「Enduring CSS」第4回
前回までで、Enduring CSS（以降ECSS）の考え方を紹介してきました。ECSSというのは端的に言うと「分けて考えよ」という設計思想です。当たり前ですけれども、どう「分けて」考えるかは、設計者自身に判断が任されています。 ECSSには、Webアプリケーション向けに考えられた設計方法であると書かれていますが、筆者Takazudoとしては、より広い範囲で応用できる考えだと感じました。今回は、どのようにECSSの考え方を活かすべきかという点について考えてみます。コンポーネント指向のフレームワーク 2017年時点において、ReactやAngularのようなコンポーネントベースでWebアプリケーションを構築できるフレームワークが台頭しています。このようなフレームワークでは、コンポーネントの中にだけCSSを適用するアプローチを取ることができます。 Reactを使ったモジュラーCSS : CS
sh19e 2017/11/10
ecss

CSS

Architecture
リンク
抽象化を避けるCSS設計方法論「Enduring CSS」第3回
前回までで、Enduring CSS（以降ECSS）の基本的な設計指針や、命名規則などのルールを紹介しました。ECSSの後半は、著者Ben Frain氏の考える、設計が破綻しないためのCSSの書き方が、Tipsの集合のような形でまとめられています。 ECSSは「分けて」考えることで、サイトが破綻しないようにすることに重きを置いた考え方です。なので、あらゆるサイトにとって最適な解となるわけではなく、自身の目的に合った設計を選ぶべきであると著にはあります。100%この内容にならう必要はありませんので、参考になりそうなノウハウをピックアップし、自身のプロジェクトに活かすとよいのではないでしょうか。とはいっても、サイト全体で共通のModuleというのはあるでしょう？前回までの内容からすると、ECSSでは「ヘッダ」「フッタ」のようなサイト全体の共通のUIを除いては、すべて名前空間でカッチリ分け、
sh19e 2017/04/26
ecss
リンク
Enduring CSS
40. /* topPage modules */ .tp-MainVisual { ... } .tp-Carousel { ... } .tp-NewsList { ... } /* 商品詳細 productDetail modules */ .pd-It emDescription { ... } .pd-It emMainPhoto { ... } .pd-Carousel { ... } /* shoppingCart modules */ .sc-It emList { ... } .sc-UserInfo { ... }
sh19e 2017/03/26
ecss

Slide
リンク
抽象化を避けるCSS設計方法論「Enduring CSS」第2回
本連載では、Enduring CSS（ECSS）というCSS設計方法論を紹介しています。 Architect CSS and scale CSS with the ECSS CSS methodology 前回は、ECSSの考え方の特徴と、Module、及びその内容について見てきました。今回は、Namespace（名前空間）とアセットの分離について解説します。 Namespace（名前空間） ECSSの大きな特徴の一つに、Module群をNamespace（名前空間）でまとめるという点があります。前回解説したクラスの命名規則だったり、実際のWebサイト上で使われているクラス名には、名前空間を示す接頭辞がついていました。以下に、前回登場したクラス名の一部を列挙します。括弧内の文字列が、Namespaceです。（各モジュールがどういうものかは、第一回目の終わりに紹介したECSSサイトのトップ
sh19e 2017/01/27
CSS

Architecture

ecss
リンク
抽象化を避けるCSS設計方法論「Enduring CSS」第1回
本連載では、Enduring CSSというCSS設計方法論を紹介します。Enduring CSSは、Ben Frain氏の著書で、末永く破綻させずにサイトのCSSを設計するにはどうすればよいか。その方法論をまとめたものです。電子書籍でも販売していますが、Webサイトで全ての内容が公開されていますので、無料で全内容を確認可能です。 Enduring CSS by Ben Frain [Leanpub PDF/iPad/Kindle] Architect CSS and scale CSS with the ECSS CSS methodology CSS設計方法論（CSS methodology）と言うと、OOCSS、BEM、SMACSSの3つが著名なものと言えるのではないでしょうか。 An Introduction To Object Oriented CSS (OOCSS) – Smas
sh19e 2017/01/13
CSS

Architecture

ecss
リンク
1