icss, 可以互操作的CSS —标准可以装入可以链接的CSS标准

分享于 

7分钟阅读

GitHub

  繁體 雙語
Interoperable CSS — a standard for loadable, linkable CSS
  • 源代码名称:icss
  • 源代码网址:http://www.github.com/css-modules/icss
  • icss源代码文档
  • icss源代码下载
  • Git URL:
    git://www.github.com/css-modules/icss.git
    Git Clone代码到本地:
    git clone http://www.github.com/css-modules/icss
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/css-modules/icss
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    互操作的CSS ( ICSS )

    本文档描述了启用CSS模块的低级文件格式的规范。 这是为装载器实现者而设计的,而不是为最终用户设计的。 对于高级规范,请参见完整的CSS模块规范。

    的基本原理

    JavaScript工作流倾向于构建组件集合,而CSS工作流则遵循。 然而,在CSS前的任何进步都是纯粹的传统,而不是语言所支持的。 最明显的例子是边界元法,但是这个参数对于很多方法来说是通用的:

    • 样式的范围应为单个组件
    • 所有CSS选择器都是全局
    • ∴开发一个确保全局唯一选择器的约定

    在边界元法中,采用 .block-name__element-name--modifier-name ,或者 .BlockName__elementName--modifierName

    显式跨语言依赖关系

    Webpack加载程序的基本特性之一是,无论源文件的类型如何,它都能够显式地描述文件的每一个依赖项。 对于组件工作流中的CSS,采用以下形式:

    // Marks the CSS as being a dependency of this JS.// Depending on the loader, the CSS is either injected// into the DOM or bundled into a separate CSS package.require( './my-component.css' );var MyComponent =// component definitionmodule.exports= MyComponent;

    现在,每当加载或者绑定 my-component.js 时,相应的CSS就会被保证,就像它的他任何依赖项一样。 这种约定导致了一个新的能力,并且需要一个新的规范。

    CSS JS互操作性

    我们可以把CSS当作我们JS的一个依赖项,我们有机会做一些迄今为止不可能做的事情- 从CSS传递给 JS。 例如不是这样的:

    // loads the CSS as a side-effectrequire( './my-component.css' );

    我们现在可以将任意信息传递给加载程序:

    // loads the CSS as a side-effect and returns// something we can use in rendering our component.var styles =require( './my-component.css' );// this might be a dynamically-generated classname:elem.addClass( styles.elemClass );

    This Webpack,JSPM和Browserify等现代多格式加载程序,这是一个关键的功能,而 CSS模块规范( ) 是一个大胆的建议,它支持新。 但是,在基本级别,我们需要一个描述机制的规范,通过这些规范,这些符号被传递给。

    规范

    互操作的CSS ( ICSS ) 是标准CSS的超集,它使用另外两个伪选择器:

    :import("path/to/dep.css") {
     localAlias: keyFromDep;
     /*.. . */}
    :export {
     exportedKey: exportedValue;
     /*.. . */}

    : 导出

    :export block 定义将导出到消费者的符号。 可以认为功能等价于下面的JS:

    module.exports= {
     "exportedKey":"exportedValue"}

    以下限制放在 :export 语法上:

    • 它必须位于顶层,但可以位于文件中的任何位置。
    • 如果文件中有多个,则将键和值组合并导出到一起。
    • 如果复制了特定的exportedKey,则最后一个( 按源顺序) 优先。
    • 一个 exportedValue 可以包含任何对CSS声明值( 包括空格) 有效的字符。
    • exportedValue 无需引用,它已经被视为文字字符串。

    以下是输出可读性的理想内容,但不强制执行以下操作:

    • 应该只有一个 :export block
    • 它应该位于文件的顶部,但在任何 :import 块之后

    : 导入

    一个 :import 语句允许从其他CSS文件导入变量。 它执行以下操作:

    • 获取&处理相关性
    • 根据导入的令牌解析依赖项,并将它们 MATCH 解析为 localAlias
    • 在当前文件中查找并替换 localAlias的用法,并在当前文件中使用依赖项。

    在CSS文件中检查 localAlias的位置是:

    • 在任何声明值中:比如 border: 1px solid localAlias;
    • 在任何选择器中:比如 .localAlias. MyComponent {}
    • 在媒体查询参数中: e.g. @media screen and localAlias

    这使得在文件中可以导入和使用的内容有相当大的灵活性。 它还要求特定的本地别名足够清晰,不会在替换过程中导致 false的积极性。 以下限制适用:

    • 它必须在最顶层
    • 每个文件都可以从多个依赖项导入,并导入多个符号
    • 本地别名必须是单个字词,由字母数字字符。下划线和破折号组成。 它还必须是唯一的文件,以避免冲突。

    以下属性对于可读性是可取的,但不强制执行:

    • 每个依赖项应该有一个导入
    • 所有导入都应位于文件的顶部
    • 本地别名的前缀应为双下划线
    捐赠

    编辑这里文件并对规范进行更改,然后发送一个关于变更的变更的公关。 欢迎所有捐赠。

    确认

    感谢你的帮助:

    • 标记 Dalgleish
    • Tobias Koppers
    • 本 Smithett
    • Bedford

    Glen Maddern,2015.


    相关文章