都2015年了,CSS怎么还是这么糟糕 | 蛋烘糕
蛋烘糕.

不写博客的工程师不是好的搬砖工🧱

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

Cover Image for 都2015年了,CSS怎么还是这么糟糕
Hux
Hux

下滑这里查看更多内容

Watching Fullscreen →

你也可以通过扫描二维码在手机上观看

这个 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

iOS 9,为前端世界都带来了些什么?「译」
React vs Angular 2:冰与火之歌「译」
博客日历
2022年10月
26
27
28
29
30
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
01
02
03
04
05
06
更多