How can we handle the scenario of implementing specific styling for h1 tags within a modular CSS approach? In the past, this would have been achieved through inheritance in a single stylesheet. For example:
.h1 { font-size: 3rem; /* more styles */ }
.h2 { font-size: 2.5rem; /* more styles */ }
...
.Widget--h1 { font-size: 1.5rem; }
However, this traditional method does not align with a modular CSS strategy. I'm struggling to find a way to accomplish this scenario in a truly modular manner. Below is my initial attempt to address the issue.
Widget.jsx
import React from "react";
import CSSModules from "react-css-modules";
import styles from "./_widget.less";
@CSSModules( styles )
export default class Widget extends React.Component {
render () {
return (
<div>
<h1 styleName="h1">Chewbacca</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam blanditiis, explicabo illo dignissimos vitae voluptatibus est itaque fuga tenetur, architecto recusandae dicta dolorem. Velit quidem, quos dignissimos unde, iste amet?</p>
<h2 styleName="h2">The "Walking Carpet"</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
);
}
}
_widget.less
.h1 {
composes: h1 from "atoms/text/_text.less";
font-family: "Comic Sans MS", cursive, sans-serif;
}
atoms/text/_text.less
@import (reference) "~styles/variables/_fonts.less";
/* Headings
============================= */
.h1, .h2, .h3, .h4, .h5, .h6 {
font-weight: normal;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}
.h1 { font-family: @primary-font; }
.h2 { font-family: @primary-font; }
.h3 { font-family: @primary-font; }
.h4 { font-family: @primary-font; }
.h5 { font-family: @primary-font; }
.h6 { font-family: @primary-font; }
The current implementation works well until using unmodified classes like .h2. The challenge lies in the fact that .h2 is not defined in _widget.less, and there is no global definition for these classes according to modern modular CSS practices. Explicitly composing all headings into each individual class is not the ideal solution either. For instance:
_widget.less
.h1 {
composes: h1 from "atoms/text/_text.less";
font-family: "Comic Sans MS", cursive, sans-serif;
}
.h2 { composes: h2 from "atoms/text/_text.less"; }
.h3 { composes: h3 from "atoms/text/_text.less"; }
...
Another proposed solution involves importing general heading styles into the _widget.less file.
_widget.less
@import @import "~atoms/text/_text.less";
.h1 {
composes: h1 from "atoms/text/_text.less";
font-family: "Comic Sans MS", cursive, sans-serif;
}
However, this approach leads to duplicated styles whenever styles from _text.less are applied, resulting in code bloat. Any suggestions on how to effectively tackle this issue while adhering to modular CSS principles? I am relatively new to the concept of modular CSS and seeking guidance.