今日推荐开源项目：《看个大新闻 pygooglenews》
今日推荐英文原文：《An Introduction to Atomic CSS》
今日推荐开源项目：《看个大新闻 pygooglenews》传送门：项目链接
推荐理由：这个项目使用 python 对 Google News RSS 进行加工，使得用户可以轻松在 python 上获得它提供的信息，包括热门新闻和各种主题等等，它还提供了多样的搜索功能，诸如标题搜索，网址搜索，日期区间搜索等，不仅是可以在自己的 python 应用上获得新闻信息，用于搜集机器学习需要的数据也是一个不错的选择。
今日推荐英文原文：《An Introduction to Atomic CSS》作者：Joan Saum
原文链接：https://medium.com/better-programming/an-introduction-to-atomic-css-880cb02ad57f
推荐理由：使用一种在长远来说会提供便利的方式来使用 CSS
An Introduction to Atomic CSS
Let’s explore Atomic CSS and how you can apply it to your project today
In the past few years, Atomic CSS, also known as Functional CSS, has gained in popularity but its concept is not clear to everybody. Let’s try to explain it.Atomic refers to the atom, the smallest thing possible. The definition of Atomic CSS is:
Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.
Applying Atomic CSS in Practice
Atomic CSS is really easy to use.Basically, it’s about defining classes with only one attribute inside, as shown below:
An example of Atomic CSS
You can see how easy it is to name these class names depending on the attributes it contains.
Generate Atomic CSS
There are many tools which automatically generate CSS styles based on class names defined in the HTML files. For example, if you typed this:
The following CSS is automatically generated:
CSS generated by a build tool.
A Style For Everyone
As in everything, the style code is different for everyone. Some people will prefer shorthand style while others will prefer more readable class names in longhand style.
Atomic CSS using shorthand and longhand style.
Immutable CSS
An important rule when using Atomic CSS is to never modify the value of the attribute of the class name. Otherwise, you could end up with CSS like this:
An example of bad Atomic CSS
If you need a new style, you have to create the CSS for it and change the class name in the html part.
Scalability
You might first think that using Atomic CSS would make you write more CSS than the classic way. This is true — but only in the beginning.Yes, you have to create a lot of class names for every color you use, every margin, padding, height, and so on. But then you don’t have to add a lot of it anymore. Every feature you add doesn’t generate lots of CSS, since you already have all your class names written.
The size of generated CSS will follow an algorithmic curve like this:
In flash green, the size of the CSS with the “classic” way. In dark green, the size of ## the CSS with Atomic CSS
Facebook released a new version (you can see the dedicated article here) where they used Atomic CSS. They reduced the CSS on the homepage by 80% while it now supports dark mode and dynamic font size for accessibility.
How is Atomic CSS Helpful?
Let’s summarize how Atomic CSS is helpful.Atomic CSS offers an obvious and simple methodology on how to organize your CSS. Classes are immutable, which means your CSS is predictable — you can add or remove CSS as you want without worrying about breaking anything.
On top of that, the name of your classes is now meaningful — you don’t need to perform any mental exercises to find them. You can read your html files without having to look at your css files to understand the style used.
No more unused CSS, no more CSS with important! to override a property which has priority and, in the end, you have less CSS than the classic way.
How Is Atomic CSS Different From Inline Styles?
Inline styles have been bad practice for a long time and Atomic CSS seems similar.In fact, Atomic CSS and inline style do have a major pain point in common. For example, if you want to change the foundation color from green to orange, you can’t just edit your CSS file. You have to change every class in all your HTML files.
It is good to note that making these changes is not as painful any more, thanks to our convenient IDEs. And, despite this pain point, Atomic CSS offers something a lot better than Inline style…
Atomic CSS Allows Abstraction
Atomic CSS allows abstraction to make small changes that would be impossible using inline style.
An example of HTML with inline style and Atomic CSS
The first example is using inline style, the second bad Atomic CSS, and the third good Atomic CSS.
In this case, if we want to change the value of the dark color in our whole application, we can just change the CSS which is contained in the class name color-dark .
Brevity
Using inline style can make a long line of code whereas Atomic CSS can use abbreviations according to your style of code.CSS Features
Atomic CSS uses pure CSS, this means it can use every feature designed for CSS such as media queries, pseudo selectors, CSS animations, and so on.Want a classname depending on the size of the screen? Just add a prefix:
An example of Atomic CSS with media queries
When to Use Atomic CSS
This question applies to every concept and methodology it can apply to. Everything depends on your project’s needs. The good news is Atomic CSS is not an “all or nothing” feature. You can decide to apply it only in some parts of a project.If there is a lot of style inside some media queries, it may be difficult to use Atomic CSS. The decision always depends on your situation.
I want to finish with a quote from Phil Karlton:
There are only two hard things in Computer Science: cache invalidation and naming thingsLet’s just say Atomic CSS solves one of the two harder things in computer science.
下载开源日报APP：https://opensourcedaily.org/2579/
加入我们：https://opensourcedaily.org/about/join/
关注我们：https://opensourcedaily.org/about/love/