Scoped CSS規範草案

問:什麼是scoped css規範？

scoped css規範是web元件產生不汙染其他元件，也不被其他元件汙染的css規範。

面對元件化的普及，元件的復用很普遍的需求，然而css相互汙染是經常遇見的問題，建立規範讓開發者放心使用各種元件，甚至跨生態的元件是很有必要的一件事情。

一段hash + 元件名，這個可能兼顧了辨識度 + 命名汙染的問題。

方案二：

用webpack和scss,less寫成模組化css就可以一定程度避免css汙染，不能完全避免

方案三：樣式規範上，使用與元件同名的巢狀命名空間

如果只用自己的生態可以這麼搞,但是有的時候會引入第三方生態,第三方和自己的命名空間一樣還是很有可能，比如scroller外掛程式，社群裡也有很多scroller外掛程式loading uplader外掛程式等等。

這裡還是會有汙染的情況，因為：

所以得出：

用意念或者規範約定不然注入程式自動化避免衝突

好處：

如果把這個過程放在構建過程就是工程問題。但是元件單獨抽離出來給第三方用，其實就是元件本身的問題。總之要保證：

;(function () ]+)(,(?=[^}]*
if (g1.match(/:scope/))  else 
});}
g1 = g1.replace(/^(\s*)/, "$1" + prefix + " ");
return g1 + g2;
});addstyle(css,id+"-style");
return id;
}function generateid() else 
}var isie = (function () ());
function addstyle(csstext, id)  else 
}window.scoper = scoper;
})();

var id = scoper("h1 \
\/*  h2 */");

scoper返回的id，在元件的js裡面賦給包裹的dom便可以。這裡詳細說下生成id的過程：

function generateid() else 
}

通過math.random得到隨機數並經過處理，然後通過document.getelementbyid去查詢頁面上有沒有同名id，有的話則繼續重新生成，沒有的話就使用當前id。這裡需要特別注意的是，比如一些彈出層外掛程式，display hide的時候有的元件是直接從body裡面移除，所以這就帶來了css碰撞的可能性，所以這裡scoped css 規範強行約定：後插入的html，一定要經過scoper過程重新生成唯一id。

最後，scoped css規範已經在alloytouch外掛程式裡開始實施，並打算推廣開來。

你有什麼好的想法可以讓跨生態跨專案跨技術棧的元件復用更加愜意，可以交流交流。

Scoped CSS規範草案

Loop作業系統設計草案

FSF再次公布GPL 3草案

《新空氣工作室章程草案》

Scoped CSS規範草案

Loop作業系統設計草案

FSF再次公布GPL 3草案

《新空氣工作室章程 草案》

相關推薦

《新空氣工作室章程草案》