Scoped CSS + RSCSS

のすすめ

Shigeki Suwa ＠すわくん​

Vue.js Nuxt.js TypeScript

 

meguro.css#2

 

株式会社オロ

新進気鋭の若手エンジニア(24)

自己しょう介

tl; dr

Scoped CSSは良いので、みんな使おう！

（+RSCSSじゃなくてもいいですが、+RSCSSがいい感じです）

という話

これは何

Scoped CSS

#とは

Vue.js, Angular, ...

コンポーネント指向とマッチ

等で使えます

HTML

CSS

JS

影響範囲・カプセル化

書きやすい、読みやすい、捨てやすい。

Scoped

<template>
    <h1>Hello World</h1>
</template>



<style scoped>
h1 {
    color: red;
}
</style>

完全ではないけども。

foobar.vue

RSCSS

Vue.jsで実践中

Reasonable System

for CSS Stylesheet Structure

SAN値を保つために

https://rscss.io

シンプルな規則

Components

Elements

Variants

簡単なBEM

保守性のためのアイデア

Layouts

CSS structure

書きやすい、読みやすい、捨てやすい。

Scoped CSS + RSCSS

例、そして利点

例えばこのコンポーネント

https://rscss.io/components.html

.search-form {
    & {
        display: flex;
    }
    .field {
        border: 1px solid gray;
    }
    .action {
        background-color: darkorange;
    }
}

Componentの各要素を1段ネストで。

より安全な Scoped CSS

命名規則とネストによる確実なカプセル化。

より単純な RSCSS

子セレクタ ">" をはじめ、一部のルールは不要に。

Scoped CSS + RSCSS シナジー

todo

  • ComponentsのVariantsバッティングする問題
    　→　使ううちに気付くはず。致命的ではない。
     
  • Scoped CSS 用 RSCSS の明確化
    　→　気が向いたらちゃんと書きます。

todoと書いて"時間が欲しい"と読む

Scoped CSS + RSCSS

のすすめ

でした。

Made with Slides.com