具体性
@bramus/specificity 是计算 CSS 选择器特性的软件包。 它还包括一些方便功能来比较,排序和过滤一系列特异性值.
支助 选择器等级 4,包括那些特殊情况 :is(), (中文(简体) ), :where(), (中文(简体) ), :not()等 (中文(简体) ).
发音: https://codepen.io/bramus/pen/WNXyoym 互联网档案馆的存檔,存档日期2013-12-02
安装
npm i @bramus/specificity
用法/ 实例
在其核心, @bramus/specificity 暴露一个 Specificity 课。 它的静态 calculate 用于计算给定 CSS 的特异性的方法 选择列表 绳子.
import Specificity from '@bramus/specificity';
const specificities = Specificity.calculate('header:where(#top) nav li:nth-child(2n), #doormat');
因为 calculate 接受一个 选择列表 ——可包含1个以上 选择器 它总是返回一个阵列,每个条目都是一个 Specificity 实例——每个找到的选择器一个.
const specificities = Specificity.calculate('header:where(#top) nav li:nth-child(2n), #doormat');
specificities.map((s) => s.toString()); // ~> ["(0,1,3)","(1,0,0)"]
如果您知道您只经过一个选择器 calculate(),您可以使用 JavaScript 的内置解结构来保持您变量名称的清洁 .
const [s] = Specificity.calculate('header:where(#top) nav li:nth-child(2n)');
s.toString(); // ~> "(0,1,3)"
在引擎盖下, @bramus/specificity 用途 CSSTree (英语) 来解析选择者的字符串。 因此 calculate 方法也接受一个 CSSTree AST (英语) 类型 Selector 财务报告和审定财务报表 SelectorList。 。 。 .
如果您拥有该类型预分的 CSSTree AST Selector 可以传入 Specificity.calculateForAST()。 表现稍好 比起来 Specificity.calculate() 因为它需要检查更少的东西。 这和 Specificity.calculate() 它不返回一系列 Specificity 实例,但只有一个值.
返回格式
计算出的特异性作为实例说明 Specificity 课。 这个 Specificity 类包括以某种格式获得特异性值的方法,以及一些将特异性值与其他实例进行比较的方便方法.
// 🚀 Thunderbirds are go!
import Specificity from '@bramus/specificity';
// ✨ Calculate specificity for each Selector in the given Selector List
const specificities = Specificity.calculate('header:where(#top) nav li:nth-child(2n), #doormat');
// 🚚 The values in the array are instances of the Specificity class
const s = specificities[0]; // Instance of Specificity
// 👀 Read the specificity value using one of its accessors
s.value; // { a: 0, b: 1, c: 3 }
s.a; // 0
s.b; // 1
s.c; // 3
// 🛠 Convert the calculated value to various formats using one of the toXXX() instance methods
s.toString(); // "(0,1,3)"
s.toArray(); // [0, 1, 3]
s.toObject(); // { a: 0, b: 1, c: 3 }
// 💡 Extract the matched selector string
s.selectorString(); // "header:where(#top) nav li:nth-child(2n)"
// 🔀 Use one of its instance comparison methods to compare it to another Specificity instance
s.isEqualTo(specificities[1]); // false
s.isGreaterThan(specificities[1]); // false
s.isLessThan(specificities[1]); // true
// 💻 Don’t worry about JSON.stringify()
JSON.stringify(s);
// {
// "selector": 'header:where(#top) nav li:nth-child(2n)',
// "asObject": { "a": 0, "b": 1, "c": 3 },
// "asArray": [0, 1, 3],
// "asString": "(0,1,3)",
// }
功用函数(稳态方法)
这个软件包还暴露出一些根据具体情况开展工作的实用功能. 这些公用功能都作为静态方法在 Specificity 课.
-
比较:
Specificity.compare(s1, s2): 将 s1 与 s2. 返回一个值,可以是:> 0= 在 s1 之前排序 s2 (即s1比s2更具体)0= 保持S1和S2的原始顺序 (即s1和s2同样具体)< 0= 在 s2 之前排序 s1 (即 s1 不如 s2 )
Specificity.equals(s1, s2): 回归true如果S1和S2具有相同的特性。 如果没有,false已返回.Specificity.greaterThan(s1, s2): 回归true如果 s1 的特异性高于 s2 。 如果没有,false已返回.Specificity.lessThan(s1, s2): 回归true如果 s1 的特异性低于 s2. 如果没有,false已返回.
-
排序 :
Specificity.sortAsc(s1, s2, …, sN): 按升序排序给定的特性 (低特异性到高特异性)Specificity.sortDesc(s1, s2, …, sN): 将给定的特性按下行顺序排序 (高度特异性与低特异性)
-
过滤 :
Specificity.min(s1, s2, …, sN): 筛选出特性最低的值Specificity.max(s1, s2, …, sN): 以最特殊性过滤出值
在其中任何一种公用事业职能中,可以采用以下任何一种特性:
- 包括的事例
Specificity类 - 简单对象, 如
{'a': 1, 'b': 0, 'c': 2}
工具函数( 单独)
所有静态方法 Specificity 类曝光也被导出为独立函数 子路径导出。 。 。 .
如果你只有兴趣将这些功能纳入您的项目, 你可以从他们的子路径导入它们。 因此,你的捆绑尺寸会大大缩小 (不包括单独的 calculate,当它返回一系列 Specificity 依赖整个批量的示例)
import { calculate, calculateForAST } from '@bramus/specificity/core';
import { compare, equals, greaterThan, lessThan } from '@bramus/specificity/compare';
import { min, max } from '@bramus/specificity/filter';
import { sortAsc, sortDesc } from '@bramus/specificity/sort';
类型定义
虽然 @bramus/specificity 以 Vanilla JavaScript 写成,它确实包括 类型定义 暴露于其 package.json。 。 。 .
二进制/CLI
@bramus/specificity 曝光二进制名称 specificity 用于计算CLI中特定选择器列表的特异性。 对于每一个它找到的选取者,它将打印出计算出来的特异性,作为新行上的字符串.
$ specificity "header:where(#top) nav li:nth-child(2n), #doormat"
(0,1,3)
(1,0,0)
基准
包含一个基准,您可以引用 npm run benchmark。 。 。 .
样本结果(在MacBook Air M3上测试):
Specificity.calculate(string) x 420,682 ops/sec ±0.34% (98 runs sampled)
Specificity.calculate(ast) - using SelectorList x 8,994,080 ops/sec ±0.25% (98 runs sampled)
Specificity.calculate(ast) - using Selector x 11,054,856 ops/sec ±0.39% (91 runs sampled)
Specificity.calculateForAST(ast) x 12,652,322 ops/sec ±0.35% (96 runs sampled)
许可证
@bramus/specificity 以麻省理工学院公共许可证发放。 见附件 LICENSE 详细情况.
鸣谢
创建此软件包的想法是由 由 Kilian Valkhof / Polypane 创建的美妙特性计算器,一个高度教育性的工具,它不仅计算特异性,还解释了哪些部分对此负责.
对选择者进行实际分析的举重方式是: CSSTree (英语)。 。 。 .