BEM

en.bem.info/ 和SMACSS非常类似，主要用来如何给项目命名。如选项卡导航是一个块Block，块里的元素是Element，而当前选项卡是一个修饰状态Modifier

block
block__element
.block--modifier 修饰符使用_, 子模块使用__符号

ACSS

patternlab.io/ 考虑如何设计一个系统的接口。原子Atoms是创建一个区块的最基本的特质，如表单按钮。分子Molecules是很多原子Atoms的组合。生物Organisms是众多分子Molecules组合物。而模板Templates又是众多生物Organisms的结合体。

OO CSS

oocss.org

不要直接定义子节点，应把共性声明放到分类
结构和皮肤相分离
容器和内容相分离
抽象出可重用的元素，建好组件库，在组件库内寻找可用的元素组装页面
往想要扩展的对象本身增加class而不是它的父节点
对象应保持独立性
避免使用ID选择器，权重太高，无法重用
避免位置相关的样式
保证选择器相同的权重
类名简短清晰语义化

reset.css 重置css normalize.css 统一各流量器基准样式 neat.css 统一reset normalize, 考虑了响应式及移动设备

CSS Workflow

postcss.org

:root{  /*全局变量*/ 
    --fontSize: 1rem;
    --mainColor: @fff;
}
:root{
    --centered: {
        display: flex;
        align-items: center;
    };
}

body:{
    color: var( --mainColor)
    padding: calc((var(--fontSize) / 2) + 1px);
}
.centered{
    @apply --centered;
}

/* custom media queries */
@custom-media --viewport-medium (width <= 50rem);
@media( --viewport-medium){
    /*  ... */
}

/* custom selectors */
@custom-selector :--heading h1,h2,h3,h4,h5,h6;
:--heading {margin-top:0}

/* image-set function */
.foo{
    background-image:
        image-set(
            url(img/test.png) 1x,
            url(img/test-2x.png) 2x
        )
}

@supports(display:flex){
    /* ... */
}

postcss.config.js

module.exports = {
    plugins: {
        "postcss-preset-env": {
            stage: 0
        }
    }
}

JS结合CSS

var root = document.documentElement;
document.addEventListener('mousemove', evt=>{
    let x = evt.clientX / innerWidth;
    let y = evt.clientY / innerHeight;
    
    root.style.setProperty('--mouse-x', x)
    root.style.setProperty('--mouse-y', y)
})

PostCSS值得收藏的插件

PPSTCSS-CUSTOM-PROPERTIES －－运行时变量
POSTCSS-SIMPLE-VARS －－与SCSS一致的变量实现
POSTCSS-MIXINS －－实现类似SASS的@MINXIN的功能
POSTCSS-EXTEND －－实现类似SASS的继承功能
POSTCSS-IMPORT －－实现类似SASS的IMPORT
CSSNext －－面向未来 CSS Grace 修复过去

cssdb.org 新CSS兼容

css-doodle.com

web components

CSS现代理论

BEM