Stop Ruining Your HTML With Your CSS

What’s wrong?

<div class="post">    <header class="post-header">
<h1 class="post-title">Stop Ruining HTML</h1>
<p class="post-meta">By Kyle Coberly</p>
</header>
<article class="post-content">
<p class="post-first-paragraph">First paragraph here.</p>
<p class="post-paragraph">More content here.</p>
</article>
</div>
<div class="post">
<header>
<h1>Stop Ruining HTML</h1>
<p>By Kyle Coberly</p>
</header>
<article>
<p>First paragraph here.</p>
<p>More content here.</p>
</article>
</div>
.post {
background-color: red;
}
.post-header {
background-color: blue;
}
.post-title {
background-color: yellow;
}
.post-meta {
background-color: green;
}
.post-content {
background-color: white;
}
.post-first-paragraph {
background-color: orange;
}
.post-paragraph {
background-color: purple;
}
.post {
background-color: red;
header {
background-color: blue;
h1 {
background-color: yellow;
}
p {
background-color: green;
}
}
article {
background-color: white;
p {
background-color: orange;
&:first {
background-color: purple;
}
}
}
}
<div class="blue-border half-width">Content here</div>

What can be done?

$dark-grey: hsl(0,0,0.3);
$primary-color: hsl(120, 50%, 50%);
@import "colors";
body {
background-color: $primary-color;
color: $dark-grey;
}
@mixin header-type {
font-size: 8rem;
font-family: Arial, sans-serif;
font-weight: 700;
letter-spacing: -5px;
word-spacing: 15px;
}
@import "typography";
h1 {
@include header-type;
font-size: 6rem;
}
@import "colors";
@import "typography";
@import "breakpoints";
.about-me {
position: relative;
h2 {
@include header-type;
}
img {
box-shadow: 2px 2px 1px $dark-grey;
text-align: center;
@media (max-width: $small-breakpoint){
width: 100%;
}
}
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store