今年のネーミングルール #CSS設計
CSS Architecture Advent Calendar 2014 1日目の記事です。 CSSの設計をしていく上で大事なネーミングルール。 今年僕が関わったプロジェクトでのネーミングルールをゆるく紹介したいと思います。 こうやって名前をつけてました。基本となる設計思想はBEMです。 BEMについては、 CodeGrid を御覧ください。 ネーミングルールを決めるとき、区切り文字をハイフンかアンダースコアか、それとも混在か悩みましたが、とりあえず以下の様なルールでやっていくことにしました。 /*css*/ [Prefix] - [Block] - [Element] -- [[Modifier-Key] - [Modifiler-Value]] { /* Rule Set */ } 一つ一つ解説していきます。 Prefixまずは接頭辞です。 接頭辞としてプロジェクト名や世代などを付与
BEMに迷う
BEM Advent Calendar 2013の7日目です。 昨夜会社で同僚たちと飲んでいたときにBEM Advent Calendar 2013を見てみたらたまたま今日が空いているのを見つけてしまいました。 お酒の力もかりてノープランで登録してしまったことを反省しております。 BEM Advent Calendar 2013を見ているようなマニアックな皆さまであれば、この記事を読むことで得るものは何もないと思われます。 ウダウダと書いておりましたら、結論はステマですみたいなエントリーが完成いたしました。 読んでから時間を無駄にしたなと思う前にそっとブラウザバックすることを強くオススメいたします。 ブロック内は全部エレメントにするの？ BEM Advent Calendar 2013初日、CSSの命名規則にBEMを取り入れてみる | dskdで越智さんは以下のようにおっしゃっています。
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説 上村 光星 10月12日にSass 3.3.0.rc.1が出ました。まだリリース候補ですが、どのような機能が追加されるのかはChangelogにあります。今回は「&」と@at-rootについて解説します。 HTML+CSSの命名規則にBEM方法論、もしくはHTML+CSS向けに派生したMindBEMdingを取り入れる方が増えてきているようです（筆者は使っていませんが…）。「&」の新機能と@at-rootは、このBEMのためといっても過言ではありません。 Sass 3.2の「&」 「&」は親セレクタを参照する特別なキーワードとして、Sass 3.3よりも前からありましたが、擬似クラスや擬似要素、セレクタの連結など、用途が限られていました。 // Sass 3.3よりも前の「&」の用途の例 .foo { &:hover
メンテナブルCSS | 株式会社サイバーエージェント
1. 序論 CSSは記述ルールが簡素であり、少しの学習コストですぐに記述ができる手軽なツールです。 しかし、大規模なアプリケーションで複数人で開発するケース等では、見栄えだけしか考えずに身勝手にコーディングしてしまうと、 非常にメンテナンスコストがかかる負の遺産が作られてしまいます。 そのためCSSの品質を保つために様々なプロジェクトで、CSSの定義ルールが決められています。 本稿では一般的なCSSの定義ルールと、そのルールがなぜ作られたのかを合せて報告致します。 また、CSSのルールを適用するにあたって、手動・目視でルールの適用をチェックするのは非常にコストが高い作業です。 これらルールの適用を補助するツール群を、合せて報告致します。
中世ヨーロッパの学生たちも教科書に落書きしていた…当時の本に描かれたユニークな絵 : らばQ
中世ヨーロッパの学生たちも教科書に落書きしていた…当時の本に描かれたユニークな絵 授業に退屈して教科書に落書きをした経験は、ほとんどの人が持っているかと思います。 歴史研究者のErik Kwakkel氏は、中世ヨーロッパの教科書にも、そうした落書きが残されていることを発見しています。 活版印刷が普及する前の、いたずら心と創造性に富んだ落書きをご覧ください。 1. 子供向けの道徳の本（古代ローマの詩人ユウェナリス著）に描かれた、15世紀の落書き。 骸骨の落書き。 今と落書きのセンスはそれほど変わらないかも。 2. 中世ヨーロッパ版スマイリーフェイス。14〜15世紀ごろの落書き。本が記されたのは13世紀。 3. 13世紀の法律の本に描かれた、足が4本の落書き。 （フランス・アミアン） 4. 先のとがった鼻を持つ顔、5段重ね。 （オランダ・ライデン大学） 5. 14世紀に描かれた落書き。 6.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
