今日推薦開源項目：《筆記 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/
