今日推荐开源项目：《笔记 takenote》
今日推荐英文原文：《3 Libraries to Remove Unused CSS》
今日推荐开源项目：《笔记 takenote》传送门：项目链接
推荐理由：这是一个由开发者开发，面向开发者的基于浏览器的笔记记录应用。它使用了更类似于 IDE 的环境来让开发者快速记录，并且支持拖放，搜索与笔记间链接等常用操作；而且放弃了 markdown 编辑器中很常见所见即所得功能——毕竟作为面向开发者的应用，这个功能的确有些鸡肋。
今日推荐英文原文：《3 Libraries to Remove Unused CSS》作者：Floriel
原文链接：https://medium.com/better-programming/3-libraries-to-remove-unused-css-f09ffc9777da
推荐理由：能够完成清除 CSS 代码中冗余任务的库
3 Libraries to Remove Unused CSS
And why you would use a library to do this task
The 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 frameworks
My 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 websites
Another 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 pages
Some 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
PurgeCSS
Here’s how PurgeCSS works. First, we look at the content of our website. It will be everything except our styles. For a simple project, it could be HTML and JavaScript files. We want to get a list of selectors that could be used in our CSS from this content. Looking at the image below, we can see where the selectors are:
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.
PurifyCSS
PurifyCSS works in a similar way to PurgeCSS. It analyzes the files, the content, and the CSS separately. It can work with any file — not just HTML or JavaScript.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.
Let’s take as an example .hello-world. PurifyCSS’s extractor is designed to work with JavaScript and it is possible to concatenate strings to form a class name. For that reason, it will see hello and world as used class names instead of hello-world.
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.
UnCSS
UnCSS approaches the problem in a different way. Instead of analyzing the file, it attempts to run your website and look for the selectors in your CSS files. As indicated in its README, UnCSS starts by loading the files with jsdom and the JavaScript is executed. This way, it can work with React single-page applications that would have no HTML.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.
Because of its HTML emulation and JavaScript execution, UnCSS effectively removes unused selectors from web applications.
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.
At the moment, UnCSS is probably the most accurate tool to remove unused CSS for a few situations. If you do not use server-side rendering and have a simple one-page website with HTML and JavaScript, it should work correctly and outperform PurgeCSS in terms of CSS size.
下载开源日报APP：https://openingsource.org/2579/
加入我们：https://openingsource.org/about/join/
关注我们：https://openingsource.org/about/love/
