I've recently adopted a unique technique for managing vertical spacing in front-end design by using transparent <hr> elements as spacers. I understand that this method is not favored among most of the web community, but I believe it has its merits for handling specific use cases. Here are some key advantages:
- The self-closing nature of
<hr>makes it cleaner in terms of markup - According to MDN, the semantic purpose of
<hr>is to signify a thematic break or shift in content within a section. The element's definition focuses on semantics rather than presentation, allowing an invisible<hr>for pure spacing purposes without compromising its meaning. - It's easily styled consistently across different browsers
- We can incorporate responsive behavior directly into it
I am conscious of the separation between markup and style. Yet, handling vertical spacing in responsive design can be challenging and at times may overshadow the importance of semantic markup, in my view.
A common alternative approach involves manually styling special cases: when component-based classes like .my-special-recurring-element don't provide precise spacing (for instance, if one element appears too close to the next one), we resort to adding an id like
#special-element-that-requires-spacing/* Ensure proper spacing for the special element near the footer on mobile */
#special-element-that-requires-spacing {
margin-bottom: 1rem;
}
@media screen and (min-width: 640px) {
#special-element-that-requires-spacing {
margin-bottom: 0;
}
}
This struggle has led to the rise in popularity of CSS utility toolkits such as Tachyons and Basscss in recent years. These toolkits enable adjusting vertical spacing through inline classes, along with convenient responsiveness handling. This allows us to structure our HTML like so (using Tachyons as an example):
<div class="my-special-recurring-element mb1 mb0-ns"></div>
Here, .mb1 roughly means "apply a margin-bottom of 1 based on our size scale," while mb0-ns indicates "use a margin-bottom of zero in non-small viewport widths." While this approach offers practicality in front-end design, it can lead to cluttered markup that blurs the line between content and style. Employing these toolkits often results in HTML like this:
<div class="ph2 pv3 pv2-m pv1-l mb2 mb2-ns"></div>
While efficient and quick, this method sacrifices maintainability. It also fails to address a common dilemma: "Where should we add space? Should we use padding-bottom here? Or margin-top there? Oh, let's remove padding on mobile but add margin on larger screens," and so on.
Introducing the concept of <hr> spacing. By inserting a single <hr class="space-1"> between two elements needing separation, we achieve consistent, clear, maintainable, and semantic spacing that doesn't clutter either the markup or the stylesheet.
hr.space-1 {
background: transparent;
color: transparent;
margin: 0;
height: 1rem;
}
@media screen and (min-width: 640px) {
hr.space-1 {
height: 1.5rem;
}
}
@media screen and (min-width: 1200px) {
hr.space-1 {
height: 2rem;
}
}
Is this unconventional method truly problematic? What potential drawbacks do you perceive with this innovative approach?