都 2015 年了，CSS 怎么还是这么糟糕 [转 Huxpro]ZJ Gao6 MinutesDecember 28, 2015

这个 Web Slides 开源在我的 Github 上，欢迎你帮助我完善这个展示文稿，你可以给我提 issue，可以 fork & pull request。如果它能帮助到你了，希望你还能不吝啬 star 一下这个项目

Catalog

• Document Times
  • Frameworks
  • Style Guide
    • OOCSS
    • SMACSS
  • Pre-processer
  • PostCSS
• Application Times
  • Shadow DOM
  • CSS “4”
  • Naming Convention
    • BEM
    • SUIT
  • Atomic CSS
  • CSS in JS
  • CSS Modules
    • Interoperable CSS
  • PostCSS, again
• My Opinionated Proposal
  • POCss

POCss: Page Override Components CSS

1. Scoping Components
CSS Blocks should only be used inside a component of the same name.

// Component/index.scss
.ComponentName {
    &--mofierName {}
    &__decendentName {
        &--modifierName {}
    }
    .isStateOfComponent {}
}

// Component/index.js
require('./index.scss');

CSS is always bundled with components
(from loading, mount to unmount)

2. Components can be Overrode by Pages
There is always requirements to rewrite styles of components in pages

// Pages/PageA.scss
#PageA {
    .pagelet-name {
        .pagelet-descendent-name {}
    }
    .ComponentName{ /* override */ }
}

// Pages/index.js
require('./PageA.scss');

• #Page for absolutely scoping between pages
• .pagelet-name should be lowercase to prevent conflicting with components

Why POC?

• It’s technology-agnostic
  
  One css framework can be played with whatever technology stacks
  
  You can combined Scss, PostCSS and whatever you want
  

• Solving problems, and easy
  
  Makes reading and teamwork much easier
  
  Get all benefit from BEM, SUITCSS and others
  

• Leverage the power of cascading properly
  
  Scoping components but allow reasonable overriding
  
  It’s pragmatic, flexible and hitting the sweet spot
  

Thanks

Reveal.js