Web Styling & SCSS Modules FAQs

Question 1

Why does it use CSS Cascade Layers?

Accepted Answer

Cascade Layers (@layer) allow developers to explicitly define which styles take precedence, preventing 'specificity wars' where component styles and app overrides clash based on loading order.

Question 2

How is dark mode handled?

Accepted Answer

Dark mode is implemented by applying a .dark class to the root element, which then overrides the values of semantic tokens while core tokens and component styles remain unchanged.

Question 3

Does this skill work with Tailwind CSS?

Accepted Answer

This skill is specifically designed for custom SCSS Module architectures. While it shares some philosophy with Tailwind (like tokens), it is intended for projects that prefer a self-contained CSS-in-Modules approach.

Question 4

What is a two-tier token system in this skill?

Accepted Answer

It separates raw values like hex codes (Core tokens) from their functional purpose like 'primary-button-bg' (Semantic tokens). This allows you to change the entire look of an app by updating token mappings rather than component code.

Question 5

Can I use Sass functions like darken() or lighten()?

Accepted Answer

No, this skill enforces native CSS color functions and HSL formats. This ensures compatibility with modern browser features and allows for more dynamic runtime color manipulation.

Web Styling & SCSS Modules

主な機能

ユースケース

Web Styling & SCSS Modules

主な機能

ユースケース