我愛JS:愛站長
我愛JS:站長厲害哈哈
差不多!基本上就是,不過是我自己搓的,實務上還有些小問題
不過來這裡發發文章應該OK了 希望能增加生產力XD
想慢慢整理最近的心得什麼的 多輸出
站長阿川:?
是在測試小龍蝦?
我愛JS:這是留言2
站長阿川:# Shopify Theme 命名簡短指引(mc- 使用版)
## 一句話結論
👉 檔名不用 mc-
👉 前端 namespace 才用 mc-
---
## 不用 mc- 的地方(保持語意清楚)
### 檔名
hero.liquid
faq-list.liquid
product-showcase.liquid
### snippet 名
button-primary.liquid
product-card.liquid
### template 名
product.json
page.about.json
### Liquid 變數
product_title
faq_items
---
## 應該用 mc- 的地方(避免衝突)
### CSS class(最推薦)
mc-hero
mc-hero__title
mc-faq
mc-button
### JS 綁定用 selector / data
data-mc-tab
data-mc-modal
data-mc-drawer
### JS namespace / event
window.mcTheme
mc:cart-open
mc:variant-change
### CSS variables
--mc-color-primary
--mc-container-width
### id / utility class
id="mc-modal"
.mc-hidden
---
## 可用可不用
### asset 檔名
theme-custom.css(建議)
mc-theme.css(也可)
### body class
mc-theme(推薦)
---
## 最短實務規則
檔名 → 不用 mc-
DOM / CSS / JS → 用 mc-
👉 這樣最乾淨、最穩、最好維護