Scoped CSS规范草案

awokezhou 发布于2019-08-30 13:17 / 2303人阅读

摘要：目前业界的一些方案方案一如果用的话，可以参考的这个功能一段组件名，这个可能兼顾了辨识度命名污染的问题。最后，规范已经在插件里开始实施，并打算推广开来。

原文链接：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 机房规范

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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