細かすぎるけど伝わってほしい私的BEMプラクティス30（ぐらい）
BEMのいいところは、それが何者なのかが明白ということに尽きる。とある要素を見たときに、そのスタイルがどこに書かれているのか、何を表しているのかがクラス名を見ればわかる。手を入れる際も、どこに追記すればよいのか、どれくらいの影響を及ぼすのかの大部分が推測できる。 レスポンシブ・デザインと相性がいいとか、流行りのコンポーネント指向と相性がいいなど、BEMの良さは他にもいくつか挙げられるけど、決定的なのは明瞭さであると思う。 BEMを使いはじめてかれこれ３，４年くらい経った。その間に色々な命名規則や設計思想が登場してきたけれども、今のところは浮気する程の魅力を他に感じることもなくBEM一筋でやってきている。ただし実践するにつけて、より明瞭で破綻しづらい設計を実現するために、様々な制約やガイドを設けてやってきたので、「もともとのBEM」からは多少なり離れているかもしれない。 ただし、それはBEM
2013年9月13日発売予定の「Web制作者のためのSassの教科書」を執筆しました
インプレスジャパンから、9月13日に「Web制作者のためのSassの教科書」が発売します。 キッカケは、2012年の1月頃に書いていた、Sassを覚えよう！で、それをインプレスジャパンの編集の方が読んで気に入って頂いたらしく「Sassの執筆をしませんか？」というお話を頂きました。 お話を頂いた当時は、「Sassの書籍って売れないんじゃ？本にするほどでは...」って感じであまりノリ気では無かったり、執筆を始めると主業務もこなしつつになるので、忙しくなるなーと思ってお断りしようとかも考えてました。 そう思っては居たけれど、一度打ち合わせをしたら書くこと前提になってた風味で、気付けば執筆をすることに＞＜ 今回、執筆のお話を頂いて書くことが決まってから、1人でやり切れる自信も無かったので、Sou-Lablogとか書いてる、SOUさんを誘って、共著でSassの本を書くことになりました。 書き始めたら
CSSのルールセットの可搬性
シンプルなセレクターが多くの利点を持つことはよくわかるんだけど、可搬性が上がるというのはどうもしっくりこない。ルールセット単位での可搬性というのはかなり無理があるんじゃないか。数種のプロパティーの組み合わせを再利用するのは良いけど、それにセレクターは含めると可搬性落ちると思う。 Twitter Bootstrapのような完全にそれに依存してそれだけで完結するような仕組みならばシンプルなセレクターのルールセットの可搬性はかなり高いと思う。ただその可搬性はデザインの断片の可搬性ではなくデザイン全体の可搬性ということになる。レイアウトのリズムや細かいディテールも含めた完全な移植で、○○の△△を流用したいとしてもそれを含むルールセットを持ってくれば済むという事にはならない。そのルールセットに余計なプロパティーが含まれていて要編集だったり、他のルールセットに依存していて単体ではうまく機能しないことが
NAVERでのSassの使い方 « NAVER Engineers' Blog
NAVER UITのSass Mixins職人（他称）の上村です。 今日はLess & Sass Advent calendar 2011の21日目です。 3日目に書かれている通り、NAVERでは半年ほど前から実務でSassを使っています。 今回は弊社で使用しているSassのディレクトリ/ファイル構成やMixinsについて解説します。 基本ディレクトリ/ファイル構成 今のところcss/sassディレクトリは下記のような構成を基本としています。 project |~css/ | |-category-A_TRUNK.css | `-category-B_TRUNK.css |~sass/ |~core/ | |-_setting.scss | |-_style-mixin-base.scss | |-_style-mixin-layout.scss | |-_style-mixin-mod
(S)CSSの書き方メモ
HTML5時代に向いていそうな(S)CSSの書き方を模索しています。SCSSで書くのでモジュール式に色々分割した方が良さそうだな……とか色々試してますが、なかなかこれ！ というものに辿りつけません……。ということで、ここ最近の書き方をメモがてら晒してみる試みです。 実際にこのサイトで使っているSCSSファイルを抜粋しつつ列記していきます。 style.scss style.cssになるSCSSファイルではCSSは書かないようにします。ただし例外としてCSS文法での@importルールはその必要性からここに書きます。Webフォントなんかで使いますね。それ以外はSCSSの@importでモジュール化した各種SCSSファイルを読み込んでいきます。 @import url("http://fonts.googleapis.com/css?family=Pacifico"); @import "va
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ちゃんとCSSを書くために - CSS/Sass設計の話
