俺得 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!

Made with Slides.com