GitXplorerGitXplorer
H

css-sucks-2015

public
76 stars
5 forks
2 issues

Commits

List of commits on branch master.
Unverified
481d7f61c8907cb4c3431630b594b990c6e63f38

Merge branch 'master' of github.com:Huxpro/css-sucks-2015

HHuxpro committed 8 years ago
Unverified
08ef428b185224babadb025afd5e42edd11fb8b0

add license

HHuxpro committed 8 years ago
Unverified
78e9edb75f7bc674bcc67d274f33fab7f1090b9e

Update index.html

HHuxpro committed 8 years ago
Unverified
f0e955ba66405a9037db51bace08b90e8797eaa9

Standardize signatures at all slides

HHuxpro committed 8 years ago
Unverified
6a65a36b33f8ce409d89aa5bdff160ac7aec9762

Deprecated wrong using of '@' sign

HHuxpro committed 8 years ago
Unverified
797c4da2f28da3589647bed23265c80f22c60db6

upgrade css as well. With deps like hljs upgraded, code highligting and accessbility are improved a lot.

HHuxpro committed 8 years ago

README

The README file for this repository.

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