Building and shipping functional CSS

<div class='questionCard'>  
<!-- Contents of the card -->
</div>
.questionCard {
position: relative; /* So buttons can be absolutely positioned inside the card */
margin-top: $scale1;
padding: $scale2;
background-color: #fff;
box-shadow: $boxShadow-2;
}
.siteCard {
padding: $scale1;
background-color: #fff;
box-shadow: $boxShadow-2;
}
.card {
background-color: #fff;
box-shadow: $boxShadow-2;
}
.card--question {
position: relative;
margin-top: $scale1;
padding: $scale2;
}
.card--site {
padding: $scale1;
}
<div class='u-relative u-mt1 u-p2 v-bg-white v-bs2'>  
<!-- The contents of the card -->
</div>
<div class='u-p1 v-bg-white v-bs2'>  
<!-- Card contents -->
</div>
<div class='u-p1 v-bg-gray-300 v-bs1'>  
<!-- Card contents -->
</div>
.a-textShadow-white {
text-shadow: 0.03em 0 0 #fff, 0.06em 0 0 #fff, 0.09em 0 0 #fff, 0.12em 0 0 #fff, 0.15em 0 0 #fff, -0.03em 0 0 #fff, -0.06em 0 0 #fff, -0.09em 0 0 #fff, -0.12em 0 0 #fff, -0.15em 0 0 #fff;
}
<h2 class='v-h5 v-bold u-mt1 u-mb1 u-md-mb0 a-textShadow-white'>  
<a href='{{url}}'>
{{brief_title}}
</a>
</h2>

Gripes and gains — getting comfortable with functional CSS

By using component classes, you get the communicative value of naming element groups and relationships; you encourage the creation of coherent, relatively self-contained components intended for reuse; and you allow for the flexibility to vary styling, to some degree, without changing markup.

# Secondary buttons
Secondary buttons have a blue background with white text:
<button class='c-button v-bg-blue-500 v-white'>
A secondary button
</button>
<button class='c-button v-bg-blue-500 v-white' on-click='{{on-click}}'>  
{{label}}
</button>
<SecondaryButton on-click='myFunctionName' label='My secondary button' />

In [an] experiment, I removed every class attribute from a 60KB HTML file pulled from a live site (already made up of many reusable components). Doing this reduced the file size to 25KB. When the original and stripped files were gzipped, their sizes were 7.6KB and 6KB respectively — a difference of 1.6KB. The actual file size consequences of liberal class use are rarely going to be worth stressing over.

<p class='myCoolText'>  
I am centre-aligned by default but left-aligned on wider screens
</p>
.myCoolText {
text-align: center;
}
@media screen and (min-width: 32em) {
.myCoolText {
text-align: left
}
}
<h2 class='v-h5 v-bold u-mt1 u-mb1 u-md-mb0 a-textShadow-white'>  
<a href='{{url}}'>
{{brief_title}}
</a>
</h2>
@media (--screen-md) {

.u-md-mb0 { margin-bottom: 0; }
.u-md-mb1 { margin-bottom: var(--scale-1); }

}

--

--

Visual/sound artist, UI developer, armchair physics nerd.

Love podcasts or audiobooks? Learn on the go with our new app.

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