There are only two hard problems in Computer Science: cache invalidation and naming things — Phil Karlton

CSS Problems in Projects

• Multiple people naming things differently
• Things randomly styled not sure why
• Old CSS no-one is sure what it does
• Vague file names (modern.css)
• So much SCSS nesting
• !important

CSS solutions

• Naming conventions
  • BEM (classes)
  • ITCSS (file names)
• Code style guides

BEM

Block Element Modifier

BEM Features

• Naming classes (HTML/CSS/JS)
• Allocating a class for nearly everything that is styled
  • element agnostic
• Class names are long with __ and --

class="block_element-modifier"

.banner {
  background-colour: blue;
  height: 60px;
}

.banner_title-white {
  color: white;
  text-align: center;
  font-size: 2.45em;
}

.banner_title-yellow {
  color: yellow;
  text-align: center;
  font-size: 2.45em;
}

.home_page_title-big {
  font-size: 3.45em;
}

.home_page_title-small {
  font-size: 1.45em;
}

.footer_title-left {
  text-align: left;
}

.form_title-hidden {
  display: none;
}

BEM Drawbacks

• Very verbose (names can get quite long)
• Difficult to have DRY code
  • (SASS @extends are your friend)
• High up front cost
  • Aim for whole project consistency

BEM Benefits

• Harder to mis-style something by accident
  • Names are very unique and descriptive
  • More thought goes into the planning stage
• Updating the HTML elements doesn't break styling
• So much easier to find and update styling
  • All in the one spot

ITCSS

Inverted Triangle CSS

ITCSS Features

• Naming files
• Allocating every block of styling to it's own file
  • Small and many files
• Structure from general to specific

//Manifest file

@import 'settings';          // variables

@import 'tools';             // mixins

@import 'generic';           // boilerplate

@import 'objects_typography';

@import 'objects_buttons';

@import 'objects_forms';

@import 'components_header';

@import 'components_footer';

@import 'components_content';

ITCSS Drawbacks

• File names are verbose
• High up front cost
  • Project wide approach
  • Split exisiting CSS
• Difficult if not using asset pipeline/compilers

ITCSS Benefits

•  Easier to find code
  • Lots of small files ( ~50-400 lines )
  • Descriptive/predictable names
• Cascading easier to manage
  • More predictable styling

In Conclusion

• A combination of BEM and ITCSS
  • High upfront cost
  • Easier maintainability
  • More predictable styling

Thanks past me! -- future you

Resources

• BEM
  • https://css-tricks.com/bem-101/
  • http://getbem.com/naming/
• ITCSS
  • https://www.youtube.com/watch?v=1OKZOV-iLj4&hd=1