Summer。桑莫。夏天

❤️ 🍰 🌹 🎬 🚴‍♀️ 🏋️‍♀️ 💻 🚀 💜

這裡記錄了我的學習和開發筆記，歡迎交流 (*´∀`)~♥

© 2025. All rights reserved.

CSS 的模組化方法：OOCSS、SMACSS、BEM、CSS Modules、CSS in JS

05 Jun 2018

OOCSS、SMACSS、BEM、CSS Modules、CSS in JS … 這些規範（或稱心法、解法）存在的目的都是為了讓程式碼易懂、可重用，進而有效率地開發和維護。

CSS Modules CSS in JS BEM styled-components css

Git: Rebase Squash vs Fixup

04 Jun 2018

打指令 git rebase -i 後可進入互動介面，為提交紀錄換順序、編輯訊息或做合併。其中 Squash 和 Fixup 的差異是什麼呢？

git rebase git

Git: Cherry-pick - 選擇某個分支的某些提交記錄

30 May 2018

在開發階段的尾聲，準備合併回主線時，老闆說「B、C 功能會在這次上線，A 功能再等等吧」這時候就不是每個 Commit 都需要合併至主線了，而是挑出需要的就好，又為了維護主線的乾淨整齊，合併後只能有一個提交記錄。這要怎麼做呢？

git cherry-pick git Sourcetree

Git: 比較 Merge Squash 與 Rebase Squash

29 May 2018

比較 Merge Squash 與 Rebase Squash。

git rebase git Sourcetree

Git: 更新分支+解衝突

27 May 2018

更新分支+解衝突。

git rebase git merge git Sourcetree

BEM

22 May 2018

BEM 是一種 CSS class 命名的設計模式，將介面切割成許多獨立的區塊，以區塊（Block）、元素（Element）和修飾子（Modifier）來命名，優點是以元件觀念進行開發，具有重用性。 它擁有 OOCSS 的架構清楚的美好，也沒有 SMACSS 複雜或令人混淆的部份，因此 BEM 是一個很優秀的 CSS 架構指南。

BEM css

React.js: Higher-Order Components (HOC)

20 May 2018

Higher-Order Components（HOC）是一個函數，可代入元件（Component）作為參數，並回傳一個新的元件。使用 HOC 的目的是將通用的邏輯放在 HOC 中，變動的部分就由代入 Component 的 props 和 state 傳入即可。

react.js 吃什麼