元件設計有多種模式，目前實驗的其一項目，此款必須依附框架格線才能使用，可以用自己喜歡的框架系統，或者使用Raina JS 的格線系統，它只是運作於肌肉和彈性纖維的肌膚，讓這網站有基本的外表。
項目中我只做常見樣式，還會親自各種實測，在持續修正。
筋肉專案模式會執行多套，這套適合無規則的配色和文字尺寸、臨時的系統開發、對於色彩定位不清明的專案。同時這套適合全端工程師的使用，假設你必須在短時間後端資料生成、前端介面、視覺設計要一起完成的狀態，那麼它能幫你快速完成專案。也非常適合wordpress補足視覺布景的資料穿插。
生成資料也非常重視架構，架構連結著資料，所以在直接成形的快速過程，要把色彩定義、文字尺寸控制也一併寫入架構中，未來設計師可能就是工程師，所以沒有那麼多時間同時開啟多文件分離式修正，後端也是前端，能快速掌握架構並且對應特效展示結果。
一個人完成整個專案將被挑戰，從後端到前端再到視覺的全面掌握。這套模式並非所有的CSS都開發進入，而是選取最重要的、常用的，可以搭配輕組件並用，類似w3css的組件概念，自己開發一套補足。
元件設計模式
- 動態元件：即時使用js生成動態css，最後可變成編譯定案css，開發完畢才生成，降低瀏覽器的負荷。
- 靜態元件：已經編寫好的輕組件，可直接套用，如同w3.css
AI讓我們面臨危機
不管是設計師、工程師現在都有AI可以取代，當然也有一體成形的，不管哪個角度，注定工作被取代，唯有駕馭AI並且全端整合，是一條全新出路的方式。全端設計師、全端工程師看以哪個地位為主，我個人是設計師轉向資料介面生成與處理，所以從視覺向後整合。當然也有人是後端向前整合。
Raina JS 元件系統
與主流原子化 CSS (Tailwind CSS / UnoCSS) 之深度對照分析。目前還在測試實驗中，並不對外開放，僅有概念分享。
| 比較維度 | Raina JS | 主流原子化 CSS (Tailwind / UnoCSS) |
|---|---|---|
| 核心運作機制 | Runtime Analysis 瀏覽器端即時解析 無需編譯步驟。JS 腳本直接在瀏覽器上掃描 DOM 結構，即時將 Class 翻譯為 CSS 規則並注入。優勢：零環境配置，隨寫隨用。特性：支援 MutationObserver，動態插入的 HTML 也能自動生效。 | Build-time Compilation 編譯時靜態生成 透過 Node.js 工具掃描原始碼，只打包「有用到的」樣式成靜態 CSS 檔。優勢：執行效能極致（瀏覽器不需運算）。限制：需要建置流程 (Webpack/Vite)。 |
| 語法結構與 RWD | 後綴整合 (Suffix Integration) 單一 Class 同時控制多裝置 採用 l (Large/PC), m (Medium/Tablet), s (Small/Mobile) 後綴。範例： .ft12lms(電腦、平板、手機皆為 12px) .ma20l .ma10ms(電腦 Margin 20px，平板手機 Margin 10px) | 前綴分離 (Prefix Separation) 不同斷點需寫不同 Class 採用 sm:, md:, lg: 前綴。範例： text-xs(需依賴預設值或寫 text-[12px])m-5 md:m-5 sm:m-2.5(需寫多個 Class 來覆蓋不同斷點) |
| 數值與顏色定義 | 完全任意值 (Arbitrary Values) 直寫數值與 HEX 色碼 不依賴預設主題檔，設計師給什麼數值直接寫。 顏色： .bg#FFC001 (支援透明度/漸層需擴充)互動：.bg#FFF-#000 (Hover 變色整合在同一字串)尺寸：.pa13lms (直接寫 13px) | 預設約束值 (Design Tokens) 鼓勵使用預設級距 ( p-4 = 1rem)。顏色： bg-yellow-500 (需對照色票)互動：hover:bg-black (獨立 Class)任意值：p-[13px] (JIT 模式支援，但語法較長) |
| 繼承與重用機制 | HTML 屬性級繼承 (Attribute Inheritance) 獨創的 = 與 by: 語法直接在 HTML 標籤上指定繼承來源。 =#moon.happy：繼承 ID 下的 Class 設定。by:misw：指定由哪個 Class 承接樣式。id="moon" h2:ft20：父層直接控制子元素 (Scoped)。 | 元件化或 CSS 層級繼承 不鼓勵在 HTML 做繼承。 @apply：在 CSS 檔中組合樣式。JS Component：透過 React/Vue 封裝來重用。Group：group-hover 控制子元素互動。 |
| 權重控制 (Specificity) | 後綴驚嘆號 (!).pa10lms! → padding: 10px !important;直覺且位於語法末端，易於閱讀。 | 前綴驚嘆號 (!)!p-2.5位於語法前端。 |
| 適用場景分析 | 適合：快速原型開發：無需架設環境，直接寫 HTML。高度客製化視覺：不被框架預設值綁架。非工程導向團隊：設計師/切版人員可直接上手。動態內容網站：CMS 或後台生成的 HTML 也能即時渲染。 | 適合：大型系統開發：需嚴格規範設計系統 (Design System)。團隊協作：強制一致性 (避免每個人寫不一樣的 px)。效能敏感專案：需最小化 CSS 檔案體積。 |
