reinteractive

Front End Naming Conventions

Rhiana Heath

Sep 2017

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

Naming things is hard

By RhianaH

Naming things is hard

reinteractive front end naming conventions

  • 1,384