为何JSX与SCSS类选择器写法有差异时样式仍可正常生效？

核心是两个常见的认知偏差，和语法本身的规则有关：

• HTML元素的class属性是空格分隔的类名集合，类名排列顺序没有任何语义，不会影响CSS匹配。不管渲染出来的label标签class是shrink formInput-label还是formInput-label shrink，浏览器都只会识别到「这个元素同时挂了两个类名」。
• 不要混淆HTML属性语法和CSS选择器语法：class属性里的空格仅用来分隔同元素的多个类名，完全不代表CSS里的后代层级关系。只有CSS选择器里出现的空格，才是代表「匹配内部后代元素」的后代组合符。

你写的SCSS嵌套规则.formInput-label { &.shrink {} }，编译后得到的是.formInput-label.shrink选择器，语义就是「选中同时带有formInput-label和shrink两个类名的同一个元素」，和DOM里label元素的类名状态完全对应，自然能正常命中样式。
顺带提一句：CSS多类选择器里的类名顺序也不影响匹配效果，.formInput-label.shrink和.shrink.formInput-label的匹配规则完全一致，不存在顺序颠倒就匹配不上的情况。

相关代码参考 #

FormInput.jsx实现：

import './FormInput.scss';

const FormInput = ({ label, ...otherProps} ) => {
    const { value } = otherProps;
    return (
        <div className="group">
            <input className="formInput" {...otherProps} />
            {label && (
                <label 
                    className={`${value.length ? 'shrink' : ''} formInput-label`}
                >{label}</label>
            )}
        </div>
    )
};

export default FormInput;

FormInput.scss源码：

.formInput-label {
    transition: 300ms ease all;
    position: absolute;
    font-size: 18px;
    left: 5px;
    top: 10px;

    &.shrink {
        top: -14px;
    }
}

编译后生成的核心CSS规则：

.formInput-label.shrink {
    top: -14px;
}

内容的提问来源于stack exchange，提问作者Heymanyoulookkindacool