はてなブックマーク

こんにちは、CSSが好きなフロントエンドエンジニアのナユです。 絵文字 / Emoji Advent Calendar 2016 11日目の記事です。 （仮タイトルから内容が変わっちゃいました。すみません＞＜） 10日目の湊川あいさんとわかばちゃんコンビに続いて、絵文字でわかるシリーズです。 はじめに コーディングをするにあたり、近年よく「コンポーネント指向のCSS設計」という言葉を耳にします。 しかし、参考になるコード量も少なく、あったとしてもよくあるUIをコーディングしてみよう、といったものが大半です。 本稿は、「CSS設計を勉強したいけれど参考資料が少ない…」とお悩みの人に少しでもお手伝いができればと思って書かれています。 少々難しい点があるかもしれませんが、ご質問などはコメントもしくはtwitter(@nayucolony)までリプライをくださいませ！ 内容 本稿は、Emojiを用

自分なりの静的サイト構築をまとめます。 シチュエーション的には　**「カンプが上がってきたものをコーディングする」**みたいな感じです。 今回は、**「RSCSS」**という設計思想に基づいて作成していきます。 いくつかの簡単なルールがありますが、作りながら出てきたルールを書いていきます。 最後にまとめと、すべてのルールを書いたリンクをご紹介しますので、これを読む前にRSCSSを覚えてくる必要はありません。 注意：あくまでCSS設計について考えるという点で、セマンティクスやアクセシビリティに関する完璧なことは書かれていません。もしよければ、言及いただければと思います！また、スクリーンショットを完全に再現しておらず、余白などは大きく差異の発生しない範囲で簡略化しているものもあります。 必要な人のためにコードをすべて記述していますが、適宜読み飛ばして頂いてかまいません。 また、Sassでの利用