今日推荐英文原文：《3 Libraries to Remove Unused CSS》
推荐理由：这是一个由开发者开发，面向开发者的基于浏览器的笔记记录应用。它使用了更类似于 IDE 的环境来让开发者快速记录，并且支持拖放，搜索与笔记间链接等常用操作；而且放弃了 markdown 编辑器中很常见所见即所得功能——毕竟作为面向开发者的应用，这个功能的确有些鸡肋。
今日推荐英文原文：《3 Libraries to Remove Unused CSS》作者：Floriel
推荐理由：能够完成清除 CSS 代码中冗余任务的库
3 Libraries to Remove Unused CSS
And why you would use a library to do this taskThe 2020 State of CSS Survey had a section dedicated to utility libraries. In that section, the question was about the usage of StyleLint, PurgeCSS, and PurifyCSS. Two of those libraries are for removing unused CSS. As the author of PurgeCSS and a contributor to PurifyCSS, I want to take a moment to explain what problems those libraries can solve and compare the three most popular libraries to do this job.
Why Do You Need a Library to Remove Unused CSS?Like every library, their usage depends on use cases and there are situations where it doesn’t make sense to use them. The most common use case for the libraries in this article is to remove unused CSS with CSS frameworks.
CSS frameworksMy past experiences with Bootstrap were not pleasant, mainly because I wanted to use CSS frameworks for small websites. They always ended up being bloated — especially for a single static page. Bootstrap offered the possibility to go on the website and select what features you will use to download a trimmed version of their CSS framework. The developer experience was poor.
In comparison, TailwindCSS has the option to use PurgeCSS to remove the unused CSS automatically. When using TailwindCSS, you rarely ask yourself if you should consider another framework to trim down your website. And you rarely have to change your settings to deactivate rules.
Legacy websitesAnother use case is the legacy sites that got out of hand. While you can ask for developer resources to clean up the CSS mess accumulated over time, you can take the initiative by using this tool first. Those libraries will add value to your website right away and help identify the unused CSS.
Critical pagesSome companies have different teams taking care of multiple parts of the website. One team can be in charge of the main application page, another in charge of the signup and payment pages, and another will handle settings and administration pages.
In those situations, code is not always seen between the teams. They might choose to have a common CSS framework and not remove any CSS from it to take advantage of caching. But there should still be an exception for critical pages.
Pages that are seen once and require high loading performances, such as the signup and payment pages, can use those libraries to remove unused CSS from their framework and preload the full version once on the final signup step. Overview and Comparison
Initial HTML and CSS file
Once we have the list, the primary process begins. We parse the CSS file using PostCSS. Then, we walk through the Abstract Syntax Tree (AST). We take a look at each rule and analyze the selectors that compose it. If we notice a selector that is not present in the list, it means it is not used and we remove the rule.
In the CSS file above, PurgeCSS iterates over the rules, starting with p. It sees p in the list and so decides not to remove it. For text-transparent, it does not see it in the list and the rule is removed:
Perceived selectors (left)/CSS output (right)
PurgeCSS provides the possibility to create an extractor. An extractor is a function that takes the content of a file and extracts the list of CSS selectors used in it. It allows for more precise removal of unused CSS.
You can specify which extractors you want to use for each file type, allowing you to get the most accurate results. But using specific extractors is optional and you can rely on the default one.
But the main flaw with PurifyCSS is its lack of modularity. Compared to PurgeCSS, it has essentially one extractor defined that cannot be changed. The extractor of PurifyCSS takes every word and is based on some use cases.
Since every word is considered a selector, a lot of selectors can be erroneously used. It will also not work with special characters that are often used by utility CSS frameworks.
Then, PostCSS parses all the stylesheets. UnCSS looks at the list of selectors defined in the stylesheets and runs document.querySelector on the website. If the function doesn’t find the selector, it is removed from the CSS.
However, its emulation can have a cost in terms of performance and practicality. To remove unused CSS from Pug template files, you would need to convert Pug to HTML and emulate the page inside jsdom. After this step, UnCSS can run document.querySelector on each selector.
Another issue with this process is that you have some common use cases where elements will not be present initially. You might have to click on a button on your website to make a modal appear or make another section appear.
With UnCSS, you have the ability to click on elements on your website. But it creates a maintenance burden. You can see it as creating a small Cypress/Selenium test to go through your application and discover all the hidden sections.