{"data":{"site":{"siteMetadata":{"title":"bauhausify","siteUrl":"https://www.bauhausify.com","subtitle":"美大出身のWEBエンジニアリング奮闘記","descriptionMyself":"\n多摩美術大学
プロダクトデザイン専攻卒業 ->
GUIデザイン会社勤務 ->
\n現在フロントエンジニア
\n
\nMy site ->
\nwww.mwrote.com\n"}},"markdownRemark":{"id":"b1d3973a-65b6-5631-ae87-d3334f795deb","html":"

以前は、SMACCSやBEMを仕事で使っていました。しかし、今はRSCSSというCSS記法に落ち着いています。

\n

\n \n \n \n \n \n \n \nルーズだけど破綻しない

\n

RSCSSの特徴は一言で言うなら、ミニマムです。

\n\n

\n \n \n \n \n \n \n \nこれだけは守らないといけないこと

\n

RSCSSのルールの中から、これだけは守らないと破綻します。

\n

\n \n \n \n \n \n \n \nコンポーネントベースでUIを捉える

\n

コンポーネントでデザインを捉えることが前提です。
\n2箇所以上同じコードの塊があり、見た目が同じか派生している場合、私はコンポーネントと捉えます。
\nあっこれどっかで似たようなの書いてるとあれば、コンポーネント化を考えましょう。

\n

\n \n \n \n \n \n \n \nコンポーネントは2単語以上ハイフンつなぎ、子要素は1単語

\n

以下のように2単語以上でコンポーネントを命名し、\n子要素(Element)は1単語で命名します。

\n
.primary-button {\n  > .icon {\n\n  }\n\n  > .text {\n\n  }\n}
\n
\n以下のようなコードを書くと、
\n簡単にGlobal汚染してしまいます。\n

\"emoji-x\" 1単語のコンポーネントはだめです。

\n
.button {\n\n}
\n

\"emoji-x\" コンポーネントの中にコンポーネントではない2単語以上もだめです。それが他で定義済みのコンポーネントなら問題ないです。

\n
.primary-button {\n  > .button-icon {\n    /* コンポーネントじゃないここでしか登場しないスタイル */\n  }\n\n  > .text {\n\n  }\n}
\n

\n \n \n \n \n \n \n \nコンポーネントの中の要素の指定はすべてセレクタを使用する

\n

子セレクタを使用して、
\n必ずそのコンポーネント直下の1単語のクラス にのみスタイルが適用されるようにします。

\n
.description-panel {\n  > .title {\n\n  }\n}
\n

\"emoji-x\" 以下のようにしてしまうと、.description-panelのDOM要素以下のコンポーネント.titleを使ったすべてコンポーネントに影響がでてしまいます。

\n
.description-panel {\n  .title {\n\n  }\n}
\n

\n \n \n \n \n \n \n \nコンポーネント自身に自信のサイズ定義をかかない

\n

コンポーネント自身のサイズは親に書きます、
\nこれをしないと他の場所でそのコンポーネントを使い回せません。

\n
.button-group {\n  > .primary-button {\n    width: 100px;\n  }\n}\n\n.primary-button {\n  /* 自身のサイズ定義はかかない */\n}
\n

\"emoji-x\" 例えば幅100%で使いたいといったときに、わざわざ打ち消さないといけません。

\n
.primary-button {\n  width: 100px;\n}
\n

\n \n \n \n \n \n \n \nコンポーネント単位でファイルを区切る

\n

クラス名の重複 を防ぐことができます。
\n2単語以上ハイフンつなぎの命名規則は、チーム人数多いとかぶりやすいです。

\n

\n \n \n \n \n \n \n \n追加したほうが良さそうなルール

\n

\n \n \n \n \n \n \n \n命名するときの共通の言葉集が必要

\n

見た目や機能に対してどんな英語を使うのか共通化すると、
\nチームで運営した際に、もっとリーディングしやすくなります。

\n

codicなどの辞書サイトで、検索した言葉を使うようにしましょう。
\n一人でしか触らない場合はあまり必要はないです。

\n

\n \n \n \n \n \n \n \nMedia Queryの中に原則クラス定義をかかない

\n

あとからコードを移植しやすいように、クラス定義の中にスタイルを書きます。

\n
.primary-button {\n  font-size: 20px;\n\n  @media (min-width: 480px) {\n    font-size: 14px;\n  }\n}
\n

\"emoji-x\" 以下のように書いてしまうと、.primary-buttonを移植する場合、場所が離れてしまい移動しづらいです。

\n
.primary-button {\n  font-size: 20px;\n}\n\n/* ここに他のコンポーネントの定義も書かれている */\n\n@media (min-width: 480px) {\n\n  /* ここに他のコンポーネントの定義も書かれている */\n\n  .primary-button {\n    font-size: 14px;\n  }\n}
\n

\n \n \n \n \n \n \n \n破ったルール

\n

\n \n \n \n \n \n \n \nネストはDOMの階層構造とリンクしていればOK

\n

SCSSであることが前提ですが、HTMLの構造を維持して、CSSを書いていきます。

\n
.description-panel {\n\n  > .main {\n\n    > .title {\n\n    }\n\n  }\n\n}
\n

RSCSSでは、ネストは直接の子までです。
\nしかし、深いネストを避けるにはコンポーネントをさらに分けなければなりません。
\nそうすると、時間がかかり、コンポーネントの場所が離れてしまい編集しづらくなります。\nただ、チーム共通のライブラリの用途等の場合は、しっかりコンポーネントを分けて作りましょう。

\n
\n以上になります。
\n

どうでしょうか、長々しく書いてしまいましたが、
\nまずは公式のドキュメントをみるのをおすすめします。
\n非常にわかりやすいです。

\n

そして実際に書いてみてください。
\n今までBEMなどで厳格に書いていた人は非常に書きやすいと感じるかと思います。

\n

他にも、CSSの種別と読み込み順の設計方法であるitcssと組み合わせるとよりいいのですが、
\nそれは後日書きます。

\n

Happy Coding CSS!

","fields":{"slug":"/2019-08-30_BEMSMACCSを受け継いだ書きやすいCSS記法RSCSS/"},"tableOfContents":"","frontmatter":{"date":"2019.08.30","title":"BEM, SMACCSを受け継いだ書きやすいCSS記法RSCSS","cover":"","category":"Coding","excerpt":"気軽にCSS書きたいけどGlobal汚染して破綻するのは避けたい。RSCSSというCSS記法(設計)はそんなケースにぴったりです。私は2年ほど前から今もずっと使い続けているので、その特徴などをコードベースでご紹介します。"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"b1d3973a-65b6-5631-ae87-d3334f795deb","next":{"path":"/2019-08-27_フォーミュラによる美しいパターンをjavascriptで描く/","title":"フォーミュラによる美しいパターンをJavaScriptで描く","category":"Design"},"prev":{"path":"/2019-09-02_p5jsのコードをsketchファイル上で実行する方法/","title":"p5jsのコードをsketchファイル上で実行する方法","category":"Coding"},"relatedPosts":[{"id":"5732c3b3-4830-56a4-a897-9ad20e605e6f","fields":{"slug":"/2019-07-23_かわいいファミコン風CSSライブラリNEScss/"},"frontmatter":{"title":"かわいいファミコン風CSSライブラリNES.css","date":"2019-07-23T00:00:00.000Z","excerpt":"簡単にファミコン風の見た目にするCSSライブラリ NES.css について、その内容や導入方法、使用感などをレポートします。","templateKey":"post","category":"Coding","propertags":null,"commontags":["css","component"]}}]}}