俺得 RSCSS for Vue.js
卍 自己紹介 卍
†漆黒の黒龍†
@すわくん
Suwa Shigeki
2019新卒
DX - DSG - 城本T - FEエンジニア
https://ztrehagem.dev
RSCSS
何？
Reasonable System for CSS Stylesheet Structure
略してRSCSS
Sanity（責任能力・冷静さ・健全さ・SAN値のSAN）を
損なわないための
CSS構造アイデア集
SAN値チェックをどうぞ。
It says about ...
Components
Elements
Variants
Helpers
and some ideas.
BEMとかSMACSSみたいだね？
Vue.js & Scoped CSS
おさらい。
HTML
CSS
JS
Component
コンポーネントに閉じ込める。
HTML
CSS
JS
外に影響しない。
Really?
NOT Really.
A Trick
of Scoped CSS on Vue.js
落とし穴。
<main>
<h1 class="foo">Hello World</h1>
<List />
Page
List
<ul class="bar">
<li class="baz"></li>
<li class="baz"></li>コンポーネント毎にスタイリング
<main v-abcd>
<h1 class="foo" v-abcd>Hello World</h1>
<ul class="bar" v-abcd v-wxyz>
<li class="baz" v-wxyz></li>
<li class="baz" v-wxyz></li>
Page
List
Rendered!
Scope毎に一意なattr。なぜ？
Vuetiful.
<head>
<style>
.foo[v-abcd] { ... }
.bar[v-wxyz] { ... }
.baz[v-wxyz] { ... }
</style>
</head><style lang="scss">
.foo { ... }
</style><style lang="scss">
.bar { ... }
.baz { ... }
</style><main>
<h1 class="foo">Hello World</h1>
<h2 class="bar">Heading</h2>
<List />
Page
List
<ul class="bar">
<li class="baz"></li>
<li class="baz"></li>Scopedなのでやりたい放題だぜ！
<main v-abcd>
<h1 class="foo" v-abcd>Hello World</h1>
<h2 class="bar" v-abcd>Heading</h2>
<ul class="bar" v-abcd v-wxyz>
<li class="baz" v-wxyz></li>
<li class="baz" v-wxyz></li>
Page
List
Rendered!
お分かりいただけただろうか
<main v-abcd>
<h1 class="foo" v-abcd>Hello World</h1>
<h2 class="bar" v-abcd>Heading</h2>
<ul class="bar" v-abcd v-wxyz>
<li class="baz" v-wxyz></li>
<li class="baz" v-wxyz></li>
Page
List
.foo[v-abcd]
.bar[v-abcd].bar[v-wxyz]
.baz[v-wxyz]!!! CONFLICT !!!
Re: RSCSS
そのためのRSCSS
Components
It will be named with
at least two words,
with a dash between each word.
Elements
Each component may have elements.
They should have classes that are only one word.
.like-button { ... }
.search-form { ... }
.article-card { ... }.search-form {
.field { ... }
.firstname { ... }
}ありがちな
<main class="main-box" v-abcd>
<h1 class="foo" v-abcd>Hello World</h1>
<h2 class="bar" v-abcd>Heading</h2>
<ul class="baz-list" v-abcd v-wxyz>
<li class="baz" v-wxyz></li>
<li class="baz" v-wxyz></li>
Page
List
.foo[v-abcd]
.bar[v-abcd].baz-list[v-wxyz]
.baz[v-wxyz]Smart!
本当のScoped
Why RSCSS?
BEMでいいじゃん
ul.item_list
li.item_list__item
li.item_list__item.item_list__item--highlightedじゃあBEM
.item_list {
&__item {
...
&--highlighted {
:thinking_face:
ul.item-list
li.item
li.item.-highlightedシンプル・イズ・ベスト
.item-list {
.item { ... }
.item.-highlighted { ... }
}
ドチャクソ良い
RSCSS +
Scoped CSS
on Vue.js
これが宇宙の真理
あなたの悩み
Scoped CSSで
解決しませんか
RSCSS美容外科クリニック
RSCSSは
あなたに最適な
パートナーです
RSCSS美容外科クリニック (2)
Pros of RSCSS with Vue.js
まじめな宣伝文句
シンプルを極めた命名規則
とにかくコードの見通しが良い
Positioning Properties のヒント
marginどうする問題を解決に導きます
Scoped CSS 相乗効果
">" 要らずで変更に強い
俺得 RSCSS Overriding
for Vue.js
これさえあれば迷わない。続きはGistで。
俺得 RSCSS for Vue.js
It's over!
俺得 RSCSS for Vue.js
By Shigeki Suwa
