Slides: CSS Still Sucks 2015 & POCss
JavaScript CSS HTML
Permalink
Failed to load latest commit information.
attach
css
js
lib
plugin
test
.gitignore
.travis.yml
Gruntfile.js
LICENSE
README.md
index.html
package.json
push.sh

README.md

CSS Still Sucks 2015

(都 2015 年了,CSS 怎么还是这么糟糕)

Watch Slides →

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