忘掉基本的css, 使用全新的庫替代

開發了這麼久的項目，天天重複的 margin , padding , background 重複了一遍又一遍， 自從使用了基礎樣式庫 assembly-css後(下面統一稱爲基礎庫)，幾乎能夠徹底的避免了一遍一遍的基礎樣式。

說下好處✨

1. 每次寫頁面, 你要有樣式， 總要用class類來鏈接dom節點上的class的(若是你非要說:我用標籤直接連樣式。那我也沒辦法反駁你) 傳統都是在dom上的class寫一個類， 而後 咔咔咔在類裏面寫一大堆css組成一個樣式，好比這樣:

<div class="content"></div>

<style>
.content {
    width: 100px;
    font-size: 16px;
    display: flex;
    justify-content: space-around;
}
</style>
複製代碼

使用了基礎庫後，只須要這樣

<div class="w-100 fs-16 flex j-around"></div>
複製代碼

好了，一行搞定

2. 若是說dom嵌套的很深，像這樣

<div class="main">
    <div class="content">
        <div classs="title">...</div>
    </div>
</div>
複製代碼

若是你的產品經理給你個改樣式的需求，這一層一層套的厲害，維護很不方便

使用了基礎庫後，每個樣式都是提早聲明好的，只須要組合就能夠了，像上面同樣，直接在dom的class上組合，避免了dom嵌套的麻煩事

3. 更多的好處嘛，我想你用下這個庫作一兩個項目後就會體會到了，到時候就會發現想戒也戒不掉了。不信回來打我

assembly-css這個庫適用在什麼項目上合適？ 🤔️

---

通過我開發的項目來說，若是html部分的代碼超過1000行或者頁面多於10個的話，要寫的樣式不是很變態的佈局，我都建議使用。

固然，若是你的需求不考慮這庫只有60k的文件大小，碰巧你用上癮了，那也能夠用。

由於在項目達到這個程度以及之上的話，像之前開發方式來說，css的文件估計也要好幾十k了，更甚者幾百k，這之中確定會包含着大量重複的css，因此使用基礎庫代替後，一次聲明，write everywhere。

它的原理就是提早聲明好可能用到的基本css，聲明成類，而後dom經過class直接引用就行了。

像margin-left: 10px這樣的代碼，直接在dom class上寫 <div class="m-l-10"></div>就完事。

大體看了一下文檔，若是有複雜的需求怎麼辦呢？ 🤔️

---

從一開始就聲明瞭assembly-css是應用在基礎的樣式中去的，若是有複雜的需求，好比說透明背景，漸變背景和複雜的box-shadow， 我是建議都是經過.bg-black-rgba-0_5這樣來聲明，這樣直觀一看就知道這個是想表示一個黑色半透明背景的class類

固然，assebly-css總體的設計思想就是這樣實現的: 組合樣式

說了這麼多，來實現一個經典的案例體會一下它的強大吧！ 🐂🍺

這是一個三欄佈局，直接使用基礎庫寫出來就是這樣的，你能夠直接把代碼複製到一個demo文件裏試一下

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/assembly-css/dist/assembly-css.css">
<section class="flex j-between">
  <div class="w-200 bg-green">left</div>
  <div class="flex-1 bg-blue">content</div>
  <div class="w-200 bg-green">right</div>
</section>
複製代碼

看了這麼多內容，產生了一些建議和想法？ 😄

這裏我總結一下，國外其實有一個assembly.css庫，這個庫是也是經過組合class類形式來寫css的，不過是能夠組合現成的ui樣式的，設計複雜（不如直接用ui框架）。

而這個庫是聲明瞭最基礎的class類讓咱們本身去組合想要的樣式。

整體來講，設計的方案我以爲是存在一些問題的。好比說如何定義本身的class類，想要重寫這個基礎庫的類，還必須拷貝到本身的項目中去。還有顏色什麼的也是在庫中聲明好的，怎麼能夠本身配顏色...

寫在最後 🤩

安利了這麼多，若是你有好的想法，我很是歡迎你能來提issues，或者直接pr。

若是認爲這是一個好的有前景想法，我也很是歡迎你能和我一塊兒規劃這個項目的將來👋！