在搜索监控CSS质量和复杂性的堆栈时

许多开发人员都写了如何维护CSS代码库，但很少有人写他们如何度量代码库的质量。当然，我们有像StyleLint和CSSLint这样优秀的linter，但它们只在微观层面上有助于防止错误。使用错误的颜色符号，在已经使用Autoprefixer的情况下添加供应商前缀，以不一致的方式编写选择器……诸如此类。我们一直在寻找改进CSS编写方式的方法：OOCSS、BEM、SMACSS、ITCSS、utility first等等。但是，在其他开发社区似乎已经从仅仅是linter发展到sonarcube和PHP Mess Detector等工具的地方，CSS社区仍然缺少比浅lint规则更深入的检查工具。出于这个原因，我创建了华勒斯项目，一套用于检查和实施CSS质量的工具。什么是华勒斯项目？在核心部分，华勒斯项目是一组工具，包括命令行界面、linter、分析和报告，这里是这些工具的一个快速摘要。。的输出示例项目华莱士网站这是一个专门为CSS设计的Linter。基于Wallace生成的分析，您可以设置不应超过的阈值。例如，单个CSS规则不应包含超过10个选择器，或者选择器的平均复杂度不应高于三。，所以我们可以把它送到项目华莱士网站对于分析， h4>Reportingallanalysis from Extract CSS is sent to项目华莱士网站其中仪表板包含该数据的所有报告。它类似于CSS统计，但它跟踪更多的指标，并随着时间的推移存储结果，并将其显示在仪表板中。它还显示了到时间点之间的差异，更多功能。由项目华莱士网站analying CSS complexity。它的要点是，每个CSS选择器基本上都是一堆if语句，这让我想起上计算机科学课程时，我不得不手工计算方法的圈复杂度。哈里的这篇文章对我来说非常有意义，因为我们可以编写一个模块来计算CSS选择器的复杂度，当然不要把它与特殊性混淆，因为当涉及到复杂度时，这是一个完全不同的蠕虫罐头。基本上，CSS中的复杂度可以以多种形式出现，但在审核代码库时，我最关注的是：CSS选择器的圈复杂度对于浏览器来说，选择器的每个部分都意味着另一个if语句。较长的选择器比较短的选择器更复杂。它们更难调试，更难解析浏览器，更难重写。 .my-selector {} /* 1 identifier */.my #super>Declarations per ruleset (cohesion) A ruleset with many declarations is more complex than a ruleset with a few declarations. The popularity of functional CSS frameworks like Tailwind and Tachyons is probably due to the relative \"simplicity\" of the CSS itself. /* 1 rule, 1 = 1 */.text-center {text-align: center;}/* 1 rule, 8 = (1 />The number of source code lines More code means more complexity. Every line of code that is written needs to be maintained and, as such, is included in the reporting.Average selectors per rule A rule usually contains 1 selector, but sometimes there are more. That makes it hard to delete certain parts of the CSS, making it more complex. All of these metrics can be linted with Constyble, the CSS complexity linter that Project Wallace uses in its stack. After you\"ve defined a baseline for your metrics, it\"s a matter of installing Constyble and setting up a config file. Here\"s an example of a config file that I\"ve pulled directly from the Constyble readme file: {// Do not exceed 4095 selectors, otherwise IE9 will drop any subsequent rules\"selectors.total\": 4095,// We don\"t want ID selectors\"selectors.id.total\": 0,// If any other color than these appears, report an error!\"values.colors.unique\": [\"#fff\", \"#000\"]} 最酷的部分是Constyble运行在最终的CSS上，所以它只在您从Sass、Less、PostCSS或您使用的任何工具中完成所有预处理工作之后才做它的事情。这样，我们就可以对选择器的总量或平均选择器复杂度进行智能检查—就像任何linter一样，如果出现任何问题，您可以在生成步骤的这一部分生成失败。使用Project Wallace的收获使用Project Wallace一段时间后，我发现它很棒用于跟踪复杂性。但是，虽然它主要是为了这样做而设计的，但它也是一种很好的方法，可以在CSS中找到linters可能找不到的细微缺陷，因为他们正在检查预处理的代码。以下是我发现的几个有趣的事情： - 在我们的sprint中，我已经停止计算用户故事的数量，我们必须在网站上修复不一致的颜色。已经有好几年历史的项目和进出公司的人：这是一个让每个品牌的颜色都错误的配方网站。幸运的是，我们实现了Constyble和projectwallace以获得利益相关者的认可，因为我们能够证明为我们的客户打造的品牌在新项目中是合适的。Constyble阻止我们添加样式指南中没有的颜色。一个颜色图，证明我们的颜色游戏是正确的。只有少数颜色，只有那些来自客户的样式指南或代码库的颜色。 - 我已经安装了所有的项目华莱士webhooks我在以前的雇主那里工作过的项目。每当新的CSS添加到项目中时，它都会将CSS发送到项目华莱士网站它会立即出现在\"项目\"仪表板中。这使得我们很容易发现媒体查询的特定选择器是何时添加到CSS中的。\"嘿，那个橙子去哪儿了？\"差异示例项目华莱士网站. - 今年早些时候重新设计的CSS技巧意味着复杂性和文件大小的大幅下降。重新设计非常适合分析。它让你有机会在幕后窥探一下，弄清楚作者是如何改变他们的CSS的。看看哪些部分对网站不起作用，哪些新的部分也许能教会你一两件关于CSS发展速度的事情。 - - 一家总部位于荷兰的大型国际公司曾经拥有超过4家，在一个CSS文件中有095个选择器。我知道它们在即将到来的市场中正在积极增长，它们必须支持Internet Explorer 8+。IE9在4095个选择器之后停止读取所有的CSS，所以他们的CSS中的一大块并没有应用到旧的IE浏览器中。我给他们发了一封电子邮件，他们验证了这个问题，并通过将CSS分成两个文件立即解决了这个问题。 - - GitLab目前使用的字体大小超过了70种。我很确定他们的排版系统很复杂，但这似乎有点过于雄心勃勃。可能是因为某些第三方CSS，但这很难说清楚。，我看了一下CSS分析，只是想了解一下这个项目的难点所在。他们经常使用吗？规则集的平均大小是可以理解的，还是每个规则集都抛出了20多个声明？选择器的平均长度是多少，它们很难覆盖吗？不必求助于会很好。 - - 检查您的缩小是否有效的一个简单技巧是让Constyble检查代码度量的行数不大于1。CSS缩小意味着所有CSS都放在一行上，因此代码行数应该等于1！ - 在我的另一个项目中不断发生的一件事是缩小失败了。我不知道，直到一个项目Wallace diff向我展示了一堆颜色是如何突然被写成 The movement trick happens by adjusting the startOffset而不是textPath。这不一定是件坏事，但它发生在这么多的颜色在同一时间，有一些东西是不正常的。快速调查表明我在缩小尺寸时犯了一个错误。StackOverflow有四种独特的白色书写方式。这不一定是坏事，但这可能是一个破碎的CSS缩小器或设计系统不一致的迹象脸谱网有超过650种独特的颜色）在他们的CSS中。一个破碎的设计系统也开始听起来像是他们的一种可能性。我的前雇主的一个项目选择器。仔细检查之后，我们看到这个选择器以嵌套在另一个输入中的输入为目标。这在HTML中是不可能做到的，我们认为我们一定忘记了CSS中的逗号。没有linter在那里警告过我们。在CSS预处理器中嵌套很酷，但是可能会导致错误，比如***5***，正如我在语法.fm这只是华莱士计划的冰山一角。一旦你开始分析你的CSS，还有很多东西要学习和发现。不要只看你自己的统计数据，还要看看其他人在做什么。我已经用我的Constyble configs作为一个与经验不足的开发人员的对话，来解释为什么他们的构建在复杂的CSS块上失败了。与其他开发人员讨论我们为什么要避免或推广某些编写CSS的方法，这有助于传递知识。它也帮助我脚踏实地。我不得不向一位PHP开发人员解释我多年来一直在做的事情，他只是想帮助我，这让我重新思考为什么我要用我的方式做事。我的目标不是告诉任何人CSS中什么是正确的，什么是错误的，而是创建工具，以便您可以验证哪些工具对您和您的同事有用。华勒斯项目是来帮助我们理解我们写的CSS的

在搜索监控CSS质量和复杂性的堆栈时

admin_action_{$_REQUEST[‘action’]}

admin_footer-{$GLOBALS[‘hook_suffix’]}

customize_save_{$this->id_data[‘base’]}

customize_value_{$this->id_data[‘base’]}

get_comment_author_url

network_admin_edit_{$_GET[‘action’]}

network_sites_updated_message_{$_GET[‘updated’]}

pre_wp_is_site_initialized

WordPress 的SEO 教学：如何在网站中加入关键字（Meta Keywords）与Meta 描述（Meta Description）？

谷歌的SEO是什么