Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Engineering Learning Lunch on Writing CSS as a ...

Engineering Learning Lunch on Writing CSS as a Team

I decided to share a few tips around writing CSS with our engineering team as we think more about scalability and the growth of our team and consequently, our code.

Julie Ann Horvath

July 30, 2015
Tweet

More Decks by Julie Ann Horvath

Other Decks in Technology

Transcript

  1. BEM

  2. “Follow the rules of semantics—make classes descriptive and not reliable

    on appearance of the given element.” - &yeT StyleGuide
  3. SO, we should base how we order them in our

    css files on what's easiest to search for, read, and debug.
  4. a. Display properties (or things that affect the box model

    of an element or object) B. Type (things that affect how fonts are displayed and positioned & their corresponding Visual Styles) c. Decorative properties (properties that are specific to decoration on structural [non-typographic elements) D. Animations and/or element transitions
  5. .block__element { box-sizing: border-box; display: block; height: $height; width: $width;

    margin: 0 auto; padding: 0; color: $color; font-family: $Open-Sans; font-size: 16px; /* px or rem preferred */ line-height: 1.5; /* integers preferred */ text-align: center; background: $bg-color url('images/bg.jpeg'); background-color: $bg-color; background-image: url('images/bg.jpeg'); background-position: center center; background-repeat: no-repeat; background-size: cover; border: 1px solid $border-color; }