Mo CSS, Mo Problems

The specificity war is happening right now and you might not even know it.

Is your file always getting bigger? Are you adding stuff to the end of the file? You are showing symptoms of CSSitis. May be linked to Divitis, you can get it treated, but you have to act fast.

Users time should be the highest priority. More code, more potential bugs, more time fixing things. A product should be fast, systematic and maintainable.

42 Popular sites and frameworks

CSS File Size - kb

CSSitis is a condition that causes performance and maintainability issues. It may even keep you up at night, it’s a scientific word for - too much css.

Highest specificity score

Excessive use of nesting in sass and use of !important effects performance. Remember the Inception rule, three levels down, you could lose sight of what’s real.

It will become hard to read for your team, so aim for two levels. Using too many ID’s instead of classes will clog the users browser.

CSS stats

Stats from CSS Stats. Have an idea? @csspurge, roy[at]csspurge.com and Github.

Highest floats – 462

Did you know there are only three floats?

.fl { float: left; }
.fr { float: right; }
.fn { float: none; }

Highest colors – 176

How many colours does a brand have? Fifty shades of grey is the exception. It’s possible to just have one color for all tags and then one for links

$black: #111111;
$blue:  #0074D9;

body { color: $black; }
a { color: $blue;  }

Highest font sizes – 89

By default the web has provided 9 tags to give you a robust scale

body { font-size: 16px; }
h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }
p { font-size: 1rem; }
small { font-size: 0.875rem; }

// On a large screen
// Font size on the body with rem
// set on elements will increase in size
@media only screen and (min-width: 64em) {
 body {
  font-size: 18px;
 }
}

Highest font families – 31

It is recommended to have two fonts: one for the body and one for headings. Perhaps other fonts are used to support different languages?

$copy:      SF UI Text, Arial, sans-serif;
$heading:   SF UI Display, Arial, sans-serif;

body { font-family: $copy; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $heading;
}

Highest specificity score – 512

Frameworks are as low as 50. Too many declarations can lead to performance issues and bugs.

Some sites graph is very spikey at the beginning meaning a bigger hit on the site load when the user first visits.

To style an element that requires unique styling such as a sign up link, there are many ways to target it.

<nav>
  <ul>
    <li><a href="#">Features</a></li>
    <li><a href="#">Products</a></li>
    <li><a class="btn" href="#">Sign Up</a></li>
  </ul>
</nav>

// A. You could do this
nav ul li a.btn { }

// B. or simply
.btn { }

According to the specificity war powers, option A would be Vader:

A:

1+1+1+1+10

B:

10

Points

• (1) Element Selector
• (10) Class Selector
• (100) ID Selector

Another good reason to use classes over ID’s

Highest media queries – 74

320 and up looks at 4 sizes on average. To cater for every screen is counter intuitive. New devices and screens will emerge, then you have to code for another screen.

Take reference from Bruce Lee “be like water my friend”.

$mw-s:  320px;
$mw-m:  768px;
$mw-l:  1024px;
$mw-xl: 1382px;

// Mobile
@media screen and (min-width: $mw-s) {

}

// Tablets
@media screen and (min-width: $mw-m) {

}

// iPads
@media screen and (min-width: $mw-l) {

}

// Powerbooks
@media screen and (min-width: $mw-xl) {

}

Highest style links – 17

More external stylesheets will mean more http requests, so page speed is effected. Good for maintenance but bad for performance.

<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/type.css">
<link rel="stylesheet" href="css/grid.css">
<link rel="stylesheet" href="css/colors.css">
<link rel="stylesheet" href="css/modules.css">

Tools like Sass and Gulp can combine all stylesheets into one.

Example folder structure:

css/
node_modules/
sass/
gulpfile.js
index.html
package.json

_base.scss
_type.scss
_grid.scss
_colors.scss
_modules.scss
styles.scss

// 1. Use gulpjs to get all your sass partials
gulp.task('workflow', function () {
  gulp.src('sass/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(cssnano())
    .pipe(sourcemaps.write('./'))
    // 2. Output to a single css file
    .pipe(gulp.dest('css/'))
    .pipe(browserSync.reload({stream:true}));
});

<!-- Voilà! -->
<link rel="stylesheet" href="css/styles.css">

Case study - Unsplash

Resources

Did I mention all these tools are free? Rather than reinvent the wheel everytime, some developers and designers have done some amazing things. Good to default from these tools. Collaboration is key.

Articles

• Top five mistakes of massive CSS—Nicole Sullivan
• Optimize CSS delivery—Patrick Sexton
• The specificity graph—Harry Roberts
• CSS and scalability—Adam Morse
• Rethinking variables in CSS—Brent Jackson
• Falling With Style - feat. Jon Gold—Does not compute

Talks

• Daniel Eden: Move Slow and Fix Things—dotconferences
• Adam Morse: Things I’ve Learned About CSS—CSSConf Oakland 2014
• Harry Roberts: Managing CSS Projects with ITCSS—DaFED