body {
font-size: 14px;
font-family: Helvetica, Arial, sans-serif;
line-height: 1.4;
}
.header {
color: red;
font-weight: bold;
text-align: center;
text-shadow: 0 0 5px yellow;
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
}
p {
margin-bottom: 1rem;
line-height: 1.2;
}
.content {
font-size: 85%;
}<body>
<div class="header">Hello World</div>
<div class="header">Hello World Again</div>
<p class="content">Lorem ipsum</p>
</body>
/* CSS reset (e.g. normalize.css) */
* { /* ... */ }
/* base typography style */
.kg-t {
font-size: 14px;
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
text-decoration: none;
line-height: 1.4;
text-align: left;
/* etc. */
}
/* base layout style */
.kg-l {
position: relative;
padding: 0;
margin: 0;
}
.kg-t-000 {
color: red;
font-weight: bold;
text-align: center;
text-shadow: 0 0 5px yellow;
}
.kg-l-000 {
position: absolute;
top: 0;
left: 0;
padding-top: 10px;
padding-bottom: 10px;
/* padding-left and padding-right are same as base style */
}
.kg-t-001 {
line-height: 1.2;
font-size: 85%;
}
.kg-l-001 {
margin-bottom: 1rem;
}<body class="kg-t kg-l">
<div class="kg-t kg-t-000 kg-l kg-l-000">Hello World</div>
<div class="kg-t kg-t-000 kg-l kg-l-000">Hello World Again</div>
<p class="kg-t kg-t-001 kg-l kg-l-001">Lorem ipsum</p>
</body>
- Minimal representation, i.e., fewest number of classes.
- Normalize size measurement unit (use px or rem everywhere).
