Scoped CSS規范草案

awokezhou 發布于2019-08-30 13:17 / 2133人閱讀

摘要：目前業界的一些方案方案一如果用的話，可以參考的這個功能一段組件名，這個可能兼顧了辨識度命名污染的問題。最后，規范已經在插件里開始實施，并打算推廣開來。

原文鏈接：https://github.com/AlloyTeam/AlloyTouch/wiki/Scoped-CSS

寫在前面

問:什么是Scoped CSS規范？

Scoped CSS規范是Web組件產生不污染其他組件，也不被其他組件污染的CSS規范。

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

目前業界的一些方案

方案一：
如果用webpack的話，可以參考css-loader的這個功能：

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

方案二：

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

方案三：樣式規范上，使用與組件同名的嵌套命名空間

如果只用自己的生態可以這么搞,但是有的時候會引入第三方生態,第三方和自己的命名空間一樣還是很有可能，比如scroller插件，社區里也有很多scroller插件loading uplader插件等等。

現有方案的局限性

這里還是會有污染的情況，因為：

模塊化的粒度是大于等于組件化粒度，意思就是一個模塊可能有多個組件

非less和sass項目下的組件怎么保證

難以保證不污染第三方組件

難以保證不被第三方組件污染

同名組件的問題

組件在第三方項目使用的問題

組件自身生態閉環的問題

所以得出：

用意念或者規范約定不然注入程序自動化避免沖突

好處：

能保證不污染別的組件并且不被被的組件污染可以更放心的復用

Scoped CSS規范是運行時產生唯一id~~ 永遠不會css碰撞

返回的這個id那個指定給組件的頂層div就行，實施簡單

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

不污染第三方的項目或組件

不被第三組件或項目污染（由于是層疊樣式，這個無法完全保證）

Scoped CSS代碼

;(function () {

    function scoper(css) {
        var id = generateID();
        var prefix = "#" + id;
        css = css.replace(//*[sS]*?*//g, "");
        var re = new RegExp("([^
,{}]+)(,(?=[^}]*{)|s*{)", "g");
        css = css.replace(re, function(g0, g1, g2) {

            if (g1.match(/^s*(@media|@keyframes|to|from|@font-face)/)) {
                return g1 + g2;
            }

            if (g1.match(/:scope/)) {
                g1 = g1.replace(/([^s]*):scope/, function(h0, h1) {
                    if (h1 === "") {
                        return "> *";
                    } else {
                        return "> " + h1;
                    }
                });
            }

            g1 = g1.replace(/^(s*)/, "$1" + prefix + " ");

            return g1 + g2;
        });

        addStyle(css,id+"-style");
        return id;
    }

    function generateID() {

        var id =  ("scoped"+ Math.random()).replace("0.","");
        if(document.getElementById(id)){
            return generateID();
        }else {
            return id;
        }
    }

    var isIE = (function () {

        var undef,
            v = 3,
            div = document.createElement("div"),
            all = div.getElementsByTagName("i");

        while (
            div.innerHTML = "",
                all[0]
            );

        return v > 4 ? v : undef;

    }());

    function addStyle(cssText, id) {
        var d = document,
            someThingStyles = d.createElement("style");
        d.getElementsByTagName("head")[0].appendChild(someThingStyles);
        someThingStyles.setAttribute("type", "text/css");
        someThingStyles.setAttribute("id", id);
        if (isIE) {
            someThingStyles.styleSheet.cssText = cssText;
        } else {
            someThingStyles.textContent = cssText;
        }
    }


    window.scoper = scoper;
})();

Scoped CSS實施

var id = scoper("h1 {
               color:red;
            /*color: #0079ff;*/
                }
        
                /*  h2 {
                color:green
                }*/");

scoper返回的id，在組件的JS里面賦給包裹的DOM便可以。這里詳細說下生成id的過程：

function generateID() {
    var id =  ("scoped"+ Math.random()).replace("0.","");
    if(document.getElementById(id)){
        return generateID();
    }else {
        return id;
    }
}

通過Math.random得到隨機數并經過處理，然后通過document.getElementById去查詢頁面上有沒有同名ID，有的話則繼續重新生成，沒有的話就使用當前id。這里需要特別注意的是，比如一些彈出層插件，display hide的時候有的組件是直接從body里面移除，所以這就帶來了CSS碰撞的可能性，所以這里Scoped CSS 規范強行約定：后插入的HTML，一定要經過scoper過程重新生成唯一id。
最后，Scoped CSS規范已經在AlloyTouch插件里開始實施，并打算推廣開來。

你有什么好的想法可以讓跨生態跨項目跨技術棧的組件復用更加愜意，可以交流交流。

云服務器 GPU云服務器 css規范 scoped webrtc scoped ptr 機房規范

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115447.html

Web標準制定過程

摘要：它制定了整個平臺的規則，監督整個進程。特邀專家指的是被邀請參與標準制定的開發者，都是一些技術大牛。備注數據來源于揭秘三制定過程制定過程是公開透明的，內部交流都是公開的。 W3C的標準規范是怎么制定出來的？瀏覽器廠商是收到來自w3c的規范標準才結合自己的瀏覽器進行開發更新以支持新特性嗎？一直很好奇，搜集了一些資料，主要參考了W3C CSS工作組特邀專家Lea Verou寫的《CSS揭秘》...

longshengwang 2019-08-29 11:04 評論0 收藏0
【譯】下一代選擇器：CSS4

摘要：默認選項偽類偽類會匹配那些在一組相關的集合中作為默認選項的元素。瀏覽器對和支持范圍偽類和這兩個偽類對于那些要求數據介于一個指定范圍的表單元素是非常有用的。因而應該像這樣子的注意默認值是，不在數據允許的范圍之內。 2014年1月，我寫了一篇文章：The Current Generation of CSS3 Selectors，這篇文章的目的是介紹一些CSS3中新增的選擇器。文中的選擇器已...

yangrd 2019-08-28 18:10 評論0 收藏0
babel知多少

摘要：我們知道，是規范，而語言是參照規范的實現。起因是年底，公司將提交給組織對語言進行標準化。年，發布年，發布，成為的通行標準，得到了各瀏覽器廠商的廣泛支持。年，發布，其間，因為改版過于激進，中途夭折。不適用與生產環境。前言 ES2015/ES2016/ES2017等新語法，新API的出現讓前端寫起來更爽，更不用說考慮到面向未來編碼。可我們使用這些新語法，新API，代碼的運行兼容性勢必受到...

anquan 2019-08-20 18:24 評論0 收藏0
PostCSS真的太好用了！

摘要：下面的代碼違反規則下面的代碼符合規則禁止使用十六進制顏色十六進制的顏色違反規則無效的十六進制色同樣違規下面的是符合規則的自動將十六進制色轉換為大寫或者小寫可以使用實現同樣的功能。 showImg(https://segmentfault.com/img/remote/1460000014782565); 在PostCSS官網有著這樣的對PostCSS特性介紹，箭頭后面是對應功能的插件及...

SKYZACK 2019-08-29 15:18 評論0 收藏0
css實現單行、多行文本超出顯示省略號

摘要：前言項目中我們經常遇到這種需求，需要對單行多行文本超出顯示為省略號。單行文本省略文本溢出顯示省略號文本不會換行語法默認值適用于所有元素當對象內文本溢出時不顯示省略標記，而是將溢出的部分裁切掉。前言：項目中我們經常遇到這種需求，需要對單行、多行文本超出顯示為省略號。這篇文章主要總結了小編解決此問題的方法，有不足之處歡迎大家指正。單行文本省略 showImg(https://segme...

wing324 2019-08-02 12:05 評論0 收藏0