Document edge cases

[TheJaredWilcurt]

Though most of the automated atomization will reproduce identical results, there are some known edge cases. These should be documented as "gotchas" on the website. And ideally, resolved by some code updates when someone clever finds a better solution to handle them.

---

Dealing with CSS Specificity

Sometimes styles that normally would apply based on specificity no longer do after the atomization reduces redundant code that would have come later and thus overridden the previous style. For Example:

// input
.modal-footer { padding: 10px }
.alert { padding: 5px }
.success { padding: 20px }
.active { padding: 20px }
.btn-sm { padding: 10px }
.p-md { padding: 10px !important }

In the above example, assume that all of these classes have many other properties (except the last one). Notice that they all happen to affect padding, and that the order of them in the CSS file will effect their specificity.

// atomized
.rp__0 { padding: 10px }
.rp__1 { padding: 5px }
.rp__2 { padding: 20px }
.rp__3 { padding: 10px !important }

However, when atomized, the redundant classes that come later, are removed. So specificity is impacted. Here's how that looks from the HTML's perspective.

<div class="success btn-sm"></div>

Here, the success and btn-sm both apply padding to the element, however .btn-sm is defined in the CSS later, so the element should get 10px of padding. However, when atomized the classes become this:

<div class="rp__2 rp__0"></div>

And because the redundant atomized classes are removed, the actual padding to be applied is 20px, since rp__2 is defined later in the CSS file.

Workaround

To resolve this, create atomic styles that use !important to ensure they are applied over their alternatives.

<div class="success btn-sm p-md"></div>

becomes

<div class="rp__2 rp__0 rp__3"></div>

And the correct padding is applied in both cases.

---

Matching nested selectors

If there are two unrelated nested selectors that have the same level of nesting and the same property/value inside them it is possible for them to cross-effect each other.

Example:

This CSS input:

.a .b { padding: 1px }
.c .d { padding: 1px }

Would produce this atomzied output:

.rp__padding__--COLON1px_---PARENT1 .rp__padding__--COLON1px_---CHILD { padding: 1px; }

When this HTML gets atomized, it works as intended, the inner div's both receive a padding of 1px.

<div class="a">
  <div class="b"></div>
</div>
<div class="c">
  <div class="d"></div>
</div>

This scenario would also receive a 1px padding on the inner div, even though based on the original code, it should not.

<div class="a">
  <div class="d"></div>
</div>

Workaround

There is no workaround for this, it is recommended to avoid using nesting when using automated atomization.

---