Learn about CSS Architecture: Atomic CSS - SitePoint

The following excerpts are from the book "CSS Master" written by Tiffany Brown. This book is available in major bookstores around the world, and you can also purchase the e-book version here.

If BEM is the darling in the industry, then Atomic CSS is its rebellious trendsetter. Yahoo's Thierry Koblentz named and explained Atomic CSS in his 2013 article Challenging CSS Best Practices, which uses a compact library of class names. These class names are usually abbreviated and are out of touch with what they affect. In the Atomic CSS system, you can know what the class name does; however, there is no relationship between class names—at least, there is no relationship between the class name used in the style sheet and the content type.

Let's use an example to illustrate. Below is a set of rules that we can call traditional CSS architecture. These rule sets use the class name that describes the content of their application: the global message box, and the style of the Success, Warning, and Error message boxes:

<code>.msg {
  background-color: #a6d5fa;
  border: 2px solid #2196f3;
  border-radius: 10px;
  font-family: sans-serif;
  padding: 10px;
}
.msg-success {
  background-color: #aedbaf;
  border: 2px solid #4caf50;
}
.msg-warning {
  background-color: #ffe8a5;
  border-color:  #ffc107;
}
.msg-error {
  background-color: #faaaa4;
  border-color: #f44336;
}</code>

Watch "Becoming a CSS Hero of the Office: CSS Architecture Tips" and learn to build structured, maintainable and scalable CSS! View this course View this course To create an error message box, we need to add both msg and msg-error class names to the element's class attribute:

<code><p class="msg msg-error">发生错误。</p></code>

Let's compare it with an atomic system, where each declaration becomes its own class:

<code>.bg-a {
  background-color: #a6d5fa;
}
.bg-b {
  background-color: #aedbaf;
}
.bg-c {
  background-color: #ffe8a5;
}
.bg-d {
  background-color: #faaaa4;
}
.bc-a{
  border-color: #2196f3;
}
.bc-b {
  border-color: #4caf50;
}
.bc-c {
  border-color:  #ffc107;
}
.bc-d {
  border-color:  #f44336;
}
.br-1x {
  border-radius: 10px;
}
.bw-2x {
  border-width: 2px;
}
.bss {
  border-style: solid;
}
.sans {
  font-style: sans-serif;
}
.p-1x {
  padding: 10px;
}</code>

The amount of CSS code has increased significantly. Now let's recreate our error message component. With Atomic CSS, our tag becomes:

<code><p class="bw-2x bss p-1x sans br-1x bg-d bc-d">发生错误。</p></code>

Our marks are also longer. But what happens when we create a warning message component?

<code><p class="bw-2x bss p-1x sans br-1x bg-c bc-c">警告：该商品价格已更改。</p></code>

The two class names have changed: bg-d and bc-d are replaced by bg-c and bc-c. We reused five rule sets. Now, let's create a button:

<code><button type="button" class="p-1x sans bg-a br-1x">保存</button></code>

Look! Here we reused four rule sets and avoided adding more rules to our stylesheets. In a strong Atomic CSS architecture, adding new HTML components (such as the post sidebar) does not require adding more CSS (although in reality, it may require adding some). Atomic CSS is a bit like using utility classes in CSS, but it is taken to the extreme. Specifically, it:

• Keep CSS concise by creating highly fine-grained, highly reusable styles instead of creating a rule set for each component
• Severely reduce specific conflicts by using low specific selector systems
• Once the initial rule set is defined, HTML components can be developed quickly

However, Atomic CSS is not without controversy.

Arguments against Atomic CSS

Atomic CSS is contrary to almost everything we have learned about writing CSS. It feels almost as bad as pasting style attributes everywhere. In fact, this is one of the main criticisms of the Atomic CSS approach: it blurs the line between content and performance. If you float an element to the left and add a ten-pixel margin, what should you do when we no longer want the element to float to the left?

Of course, one answer is to remove the fl class from our element. But now we are changing the HTML. The whole reason for using CSS is that tags are not affected by performance and vice versa. (We can also solve this problem by removing the .fl {float: left;} rule from the stylesheet, although this affects all elements with class name fl). Still, updating HTML may be a small price to pay for a cleaner CSS.

In Kobleentz's original article, he used class names such as .M-10 (margin: 10px) and .P-10 (padding: 10px). The problems with this naming convention should be obvious. Changing to a five-pixel or 20-pixel margin means we need to update our CSS and HTML, otherwise it may cause the class name to not accurately describe its effect.

Using class names such as p-1x (as shown in this section) can solve this problem. The 1x part in the class name represents the ratio, not the defined number of pixels. If the basic fill is five pixels (i.e. .p-1x {padding: 5px;}), then .p-2x will set the ten pixel fill. Yes, this doesn't quite describe what the class name does, but it also means we can change the CSS without updating the HTML, or create misleading class names.

The Atomic CSS schema does not prevent us from using the class name that describes the content in our tags. You can still add .button-close or .accordion-trigger to your code. This class name is more suitable for JavaScript and DOM operations.

BEM and Atomic CSS

BEM works best when you have a large number of developers building CSS and HTML modules in parallel. It helps prevent bugs and bugs created by large teams. It scales well, partly because the naming convention is descriptive and predictable. BEM is not

just for large teams; but it is very effective for large teams.

Atomic CSS works better when there is a small team or an engineer responsible for developing a set of CSS rules, and a larger team builds a complete HTML component. With Atomic CSS, developers can determine the set of class names required by a particular module simply by looking at the style guide or CSS source code.

FAQs about Atomic CSS

What is the main difference between Atomic CSS and traditional CSS?

Atomic CSS, also known as functional CSS, is a way to break up a style into atomic or indivisible fragments. Each class does only one thing, which can be as simple as setting margins or changing the font color. On the other hand, traditional CSS usually involves creating specific classes for specific elements, which can lead to stylesheet bloating and specific conflicts. Atomic CSS improves reusability and can produce cleaner, easier to maintain code.

How does Atomic CSS improve performance?

Atomic CSS can significantly improve performance by reducing the size of the stylesheet. Since each class does only one thing, there is less duplication in CSS. This can result in smaller file sizes, which means faster loading times for users.

Is Atomic CSS suitable for large projects?

Yes, Atomic CSS is especially beneficial for large projects. It improves consistency and reusability, which can make your code base easier to maintain. However, it does require a change in mindset and may not be suitable for every team or project.

What are some common criticisms of Atomic CSS?

Some critics believe that Atomic CSS can lead to lengthy and difficult to read HTML, because each element can have multiple classes. Others are worried that it breaks the separation of concerns, because the style information is now mixed with your markup. But, proponents of Atomic CSS believe these concerns are offset by the benefits of cleaner, easier to maintain code.

How do I get started with Atomic CSS in my project?

There are several libraries available to help you get started with Atomic CSS, such as ACSS, Tachyons, and Tailwind CSS. You can also start incorporating Atomic CSS principles into your own stylesheet by breaking the style into atomic, reusable classes.

Can Atomic CSS be used with preprocessors like SASS or LESS?

Yes, Atomic CSS can be used with CSS preprocessors like SASS or LESS. However, it is important to remember that Atomic CSS is a method, not a specific tool or framework. It's about how you build and organize your CSS, not the tools you use to write it.

Is Atomic CSS compatible with CSS frameworks like Bootstrap?

Yes, Atomic CSS can be used with CSS frameworks like Bootstrap. However, one of the main advantages of Atomic CSS is that it reduces the need for large, bloated frameworks by improving reusability and simplicity.

How does Atomic CSS handle responsive design?

Atomic CSS can handle responsive designs by using classes for specific screen sizes. For example, you might have a class that sets margins on a large screen, and another class that sets different margins on a small screen.

Can Atomic CSS be used with JavaScript frameworks like React or Vue?

Yes, Atomic CSS can be used with JavaScript frameworks like React or Vue. In fact, some developers find Atomic CSS complements these frameworks well, as both advocate component-based architectures.

What are the resources to learn more about Atomic CSS?

There are many resources available to learn more about Atomic CSS. Some recommended resources include ACSS websites, CSS-Tricks, and various articles and tutorials on Medium and other coding blogs.

The above is the detailed content of Learn about CSS Architecture: Atomic CSS - SitePoint. For more information, please follow other related articles on the PHP Chinese website!