Huxpro / Css Sucks 2015
Licence: other
Slides: CSS Still Sucks 2015 & POCss
Stars: ✭ 77
Programming Languages
javascript
184084 projects - #8 most used programming language
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
CSS Blocks should only be used inside a component of the same name.
1. Scoping Components // 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)
There is always requirements to rewrite styles of components in pages
2. Components can be Overrode by 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
*You can combined Scss, PostCSS and whatever you want*
-
Solving problems, and easy
*Get all benefit from BEM, SUITCSS and others*
-
Leverage the power of cascading properly
*It's pragmatic, flexible and hitting the sweet spot*
Thanks
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].