CSS 的七大問題

• 全域命名空間：例如 bootstrap 就有超過 600 個 class
• 依賴關係：CSS 本身無法模組化，並宣告依賴關係
• 不必要的程式碼：已經用不到的 CSS style 常常殘留在程式碼中
• class 最小化：把很長的 class 壓縮成比較短的 class 才能節省檔案大小
• 共享常數：JavaScript 與 CSS 之間常會需要用到同一個常數
• 無決定性的解析方式：CSS 規則抵觸時的優先權判斷很容易造成 bug
• 破壞隔離性：可以藉由 selector 直接調整內部元素的 style

Variety CSS

• Pure
• Inline Style
• Sass
• Less
• Stylus
• PostCSS
• CSS Modules
• Styled-components

Common CSS Problems

• 垂直置中的七種方式

Flexbox

• A Complete Guide to Flexbox
• FLEXBOX FROGGY

Reference

• CSS-Tricks
• Can I Use
• CSS Evolution: From CSS, SASS, BEM, CSS Modules to Styled Components
• Methods to Organize CSS
• CSS in JS
• styled-components
• react 项目中的css处理
• 深入解析 CSS Flexbox
• CSS 偽元素 ( before 與 after )
• 30 天 CSS 隨手筆記
• 善用 CSS 中的 table-layout 屬性加快 Table 的顯示速度
• CSS Modules 用法教程
• 20 essential CSS tricks every designer should know
• A Unified Styling Language
• Padding Bottom Overflow Not Working
• 详解CSS float属性

Note

• box-model
  • box-sizing
• float, clear, clearfix
  • float: 讓元素向左或向右浮動
  • clear: 清除 float 效果，但本身無意義又會佔空間
  • clearfix
    • 同 clear，但本身不會佔空間 (透過 before, after 實作)
    • 解決 float 會造成父元素塌陷的問題
• position
  • static
  • relative
  • absolute
  • fixed