CSS 的组件化开发到底如何去做 组件的粒度该如何去掌握~

Question

我现在的做法是项目一律使用 BEM 规范 且 BEM 所提倡的各各 Block 之间实现零耦合 每个 Block 按照公用组件的写法暂时先写到页面样式表内 如果以后出现重用 确保从页面样式表提取到公共样式表内稍作改动就可以成为公共组件

这样一个 input 我把它拆分成了两块 loginInput 这个类代表的就是不带小图标正常的（考虑到以后可能会用到这样的形式） 然而和 loginInputIconWrap 这个类组合起来就是完整的了

    .loginInput {
        width: 260px;
        height: @inputBtnHig;
        background: rgba(0, 0, 0, 0);
        color: #fff;
        border: 1px solid #fff;
        border-radius: @main_radius;
        padding: 0 20px;

        &::-webkit-input-placeholder {
            color: #fff;
        }

        &.loginInput--block {
            display: block;

            & + & {
                margin-top: 20px;
            }
        }
    }

    .loginInputIconWrap {
        position: relative;

        .loginInput {
            padding-left: 70px;
        }

        .liiw__icon {
            width: 20px;
            position: absolute;
            top: 50%; left: 30px;
        }

        &.liiw--username .liiw__icon {
            height: 20px;
            margin-top: -10px;

            .bps(S; -24px -317px);
        }

        &.liiw--password .liiw__icon {
            height: 23px;
            margin-top: -11.5px;

            .bps(S; -85px -315px);
        }
    }

这样做对吗？BEM 所倡导的思想是否就是如此？这样做会不会很累......

Answer 1

网上已经有很多讨论了, 就我而言, 我并没有采用 BEM 的那种写法, 毕竟是在太丑了. 但 BEM 的思想是很好的: 通过类名更好地组织组件和模块, 并实现复用. 基于 BEM, 我实践的 CSS 书写原则如下:

1. 选择器扁平化

2. 通过 SCSS 实现抽象和继承

也就是避免这样的书写方式:

.header .logo {
    /*...*/
}

.footer .logo {
    /*...*/
}

而是应当:

%-logo {
    /*...*/
}

.header-logo {
    @extend %-logo;
    /*...*/
}

.footer-logo {
    @extend %-logo;
    /*...*/
}

这样, 几乎每一个选择器都拥有模块的命名空间, 都是顶级的、独一无二的. 当你需要复用的时候, 就不会出现命名冲突了.

组件粒度考虑下(协作)维护是否能够快速上手以及组件更新频率. 如果维护成本过高或者经常变动, 就没必要大费周章写成组件式的代码.

谢邀.

Answer 2

以一个input为例：
.form-control input,
.form-control textarea{
。。。
}
这种是reboot的代码。也是常规input的样式。常规input直接可以用，样子就是最终样式。

你说的登录输入框你可以用input.username来定义。密码的话是input.password。

你觉得呢？