Slides: CSS Still Sucks 2015 & POCss
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
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