Selectors

What element(s) the styles should apply to; an element, class, ID, etc.

Elements h1, p, div

Classes .page-header


IDs #login


Attributes input[type=“text”]


Pseudo-classes :last-child


Pseudo-elements :after

Property The style that you are applying to a selector, e.g. color.

Value The value that the property can have,
 e.g. blue.

Declaration The combination of a property: value; pair.

Rulesets A selector followed by some number of declarations:

.classname {
   color: blue;
   font-size: 18px;
}

Cascade & Inheritance

nicolasgallagher.com/css-cascade-specificity-inheritance

importance + origin + specificity + source order = cascade

Inheritance

header {
    color: red;
}

.header h1 {}

Source Order

.header {
    color: red;
}

.header {
    color: blue;
}

.header h1 {}

.header {
    color: red;
}

.header {
    color: blue;
}

.header h1 {
    color: green;
}

.header {
    color: red;
}

.header h1 {
    color: green;
}

.header {
    color: blue;
}

Specificity

inline styles are 1000

IDs are 100

classes are 10

elements are 1

specificity.keegan.st/

codepen.io/elyseholladay/pen/LpgHc

Using Inheritance

“I want every h2 in the sidebar to look the same, and I don’t want to have to write CSS every time we create a new sidebar widget.”

h2 {
    color: #fd7900;
    font-size: 1.8em;
    line-height: 1.1;
    margin-bottom: .3em;
}

.sidebar h2 {
    color: #8cc5e6;
    font-size: 2.2em;
    padding-bottom: .2em;
    border-bottom: 1px solid black;
}

.block
    border: 1px solid #8cc5e6;
    padding: 0 15px;
}

.block h2 {
    /* Color was changed by .sidebar h2, set it back */
    color: #fd7900;
    /* remove border added by .sidebar h2 */
    border: none;
    /* remove the margin set by h2 */
    margin: 0;
    padding: .3em;
    background: #8cc5e6;
}

/* The Markup: <div class="block alt-block"> ... </div> */

.alt-block h2 {
    /* Need to set color set by .block h2 */
    color: #8cc5e6;
    /* Need to set the padding-bottom back to .sidebar h2 styles */
    padding-bottom: .2em;
    /* Need to set the border back to .sidebar h2 styles */
    border-bottom: 1px solid black;
    /* Set bottom margin again from root h2 */
    margin: 0 0 .3em;
    /* remove background from .sidebar h2 */
    background: none;
}

element inheritance

location inheritance

class inheritance

Element Inheritance

ties presentation to HTML elements and markup

Location Inheritance

means your styles are dependent on their location in the DOM and parents

Class Inheritance

creates relationships & dependencies where none should exist

<div class="block my-calendar-widget">
  <h2>My Calendar Title</h2>
  ...
</div>

.block
    border: 1px solid #8cc5e6;
    padding: 0 15px;
}

.block h2 {
    /* Color was changed by .sidebar h2, set it back */
    color: #fd7900;
    /* remove border added by .sidebar h2 */
    border: none;
    /* remove the margin set by h2 */
    margin: 0;
    padding: .3em;
    background: #8cc5e6;
}

how do we do
it better?

composition

is the idea that an html component might “contain” other styles, rather than “inheriting” those styles.

<div class="sidebar">
    <div class="calendar-widget">
        <h2 class="calendar-widget-title">My Calendar Title</h2>
        ...
    </div>
    <div class="latest-blogs">
        <h2 class="latest-blogs-title">My Blog Title</h2>
        ...
    </div>
    <div class="latest-news">
        <h2 class="latest-news-title">My News Title</h2>
        ...
    </div>
</div>

%primary-header {
  font-size: 1.8em;
  line-height: 1.1;
  color: #fd7900;
  margin: .3em;
}

%secondary-header {
  font-size: 2.2em;
  line-height: 1.1;
  color: #8cc5e6;
  margin: 0 0 .3em;
  padding-bottom: .2em;
  border-bottom: 1px solid black;
}

%block-header {
  font-size: 2.2em;
  line-height: 1.1;
  color: #fd7900;
  margin: 0;
  padding: .3em;
  background: #8cc5e6;
  margin: 0 -15px;
}

%block {
  border: 1px solid #8cc5e6;
  padding: 0 15px;
}

%alt-block {
  padding: 15px;
  background: #eee;
}

.calendar-widget {
  @extend %block;
}
.calendar-widget-title {
  @extend %block-header;
}

/*...*/

.latest-blogs {
  @extend %alt-block;
}
.latest-blogs-title {
  @extend %secondary-header;
}

/*...*/

.latest-news {
  @extend %alt-block;
}
.latest-news-title {
  @extend %secondary-header;
}

Refactored Sass code to improve developer ergonomics, making it easier to find what you need than to write something similar from scratch;

An accessible view into the common ingredients available to build out an RMN page, how they work, the code, and how they can be extended or modified;

An ability for developers to quickly code new features without frustrating and untraceable CSS bugs;

Improved developer and designer ergonomics, so you can work on the stuff you are best at without worrying about the rest.

Our CSS should be 80% Roux, 20% RMN.

Do I write it in Roux or RMN?

• Is some or all of it unique to that page?
• Could the code be reused in the future?
• Or the design pattern?
• Is it for a test?
• Is it just plain hacky?

Making a New Page

1. Create templates/markup

2. Create example.scss manifest file in www/gui/libsass

3. Create partial templates in libsass/pages/example/

4. Import Roux and partials into example.scss

- roux // (symlink folder)
  example.scss
    // (imports roux, example/partial1, example/partial2)
  - pages
    - example
      partial1.scss
      partial2.scss

example.scss

• comment header with name of page & what it is
• import roux
• import any partials
• any extra CSS that doesn’t belong in a partial

partial1.scss

• comment header with name of module, what it does, where/what pages you’ll find it on
• comment subheaders between sections
• explanations/instructions for any mixins or variables
• any TODOs or notes with name & date

Commenting Rules

1. Use /* */ comments for page headers only; they are visible in output
2. Use non-output // comments for explanations, usage, edge cases, individual line comments, and TODOs.
3. For TODOs, leave your handle and date:

   // TODO eholladay 101415 comment goes here

Keep functional Sass separate from presentational styles

Write for composition, not inheritance.

Extends/Placeholders, Mixins, & Maps

sassmeister.com/gist/a787869d74248f5d4ea2

Use extends to reuse code with no output, create a relationship

http://sassmeister.com/gist/18c47aadd302b8bd9566

use mixins to alter variables, give options

http://sassmeister.com/gist/elyseholladay/878b591ee969db0026b4 and http://sassmeister.com/gist/elyseholladay/1adb96cae0a363086916

use maps for exponential code with
 a relationship

https://stash.rmn.com/projects/UI/repos/roux-ingredients/browse/sass/_molecules/_coupon_anchor.scss

Namespace (nest) modules one level to eliminate conflicts… but use minimal nesting to eliminate specificity hell.

.survey-module {
    .survey-module-header {}
}

.survey-module {
    .survey-module-header {
        .survey-module-header-close {
            .icon-close {}
        }
    }
}

Always use classes over elements or IDs.

// Incorrect
.survey-module {
    h2 {}
    .icon {}
}

// Correct
.survey-module {
    .survey-module-header {} // h2
    .icon-close {} // specific icon
}

Check the existing codebase before adding
 a new var, mixin, or extend.

Variabilize numbers that have a relationship locally

$square-image-size: 25px;

.square-image {
    height: $square-image-size;
    width: $square-image-size;
}

$square-image-size: 25px;

.square-image {
    height: $square-image-size;
    width: $square-image-size;
    padding: 10px; // creates 10px of white border/empty space around the image
}

Add inline documentation. Always.

li.ds-dfp-banner-container {
    padding: 0;
    margin: -1px;

    .ds-dfp-banner {
        padding: 20px 0;
        margin: 0 -16px;
        text-align: center;
    }
}

// li required to add specificity to override some of the styling
li.ds-dfp-banner-container {
    padding: 0;
    margin: -1px;

    .ds-dfp-banner {
        padding: 20px 0;
        margin: 0 -16px;
        text-align: center;
    }
}

// Double Click for Publishers (DFP) banner ads
// ---------------------------------------------------------------------- //

// li required to add specificity over .coupon-horizontal
li.ds-dfp-banner-container {
    // when banner ad child is hidden (DFP doesn't serve ad), li needs to seem hidden
    padding: 0;
    margin: -1px; // hide double border from .coupon-horizontal top borders

    .ds-dfp-banner {
        padding: 20px 0;
        margin: 0 -16px; // align with sides when screen is small
        text-align: center;
    }
}

Naming Conventions

Choose human readable names over acronyms

.btn-lg-s {} // ???

.button-login-submit {}

Shared or global name, then specific name

.blue-button      …   .button-blue
.red-button       …   .button-red
.submit-button    …   .button-submit

Use dashes, not underscores or camelcase.

// Incorrect
.buttonPrimary

// Trying to deprecate (BEM)
.button--primary

// Correct
.button-primary
.button-submit-offer

Never use display/functionality in names

.orange-box {}
.form-float-left {}

.orange-box {
   background: green;
}

.form-float-left {
   float: right;
}

Be descriptive.

.csat-survey
.csat-survey-content
  .csat-survey-header
  .csat-survey-question-wrapper
  .csat-survey-questions
  .csat-survey-question
    .csat-question-prompt
    .button-csat-response

.csat-survey
.surveyContent
  .header-survey
  .surveywrapper
  div
  .question-survey-item
    p
    .button

Spacing & Formatting

Use four-space tabs with an editor config.

Put spaces after the colon in property declarations.

// Correct
display: block;

// Incorrect
display:block;

Put spaces before brackets in declarations.

// Correct
.class {}

// Incorrect
.class{}

Place closing braces of declaration blocks on a new line.

// Correct
.class {
    styles: go-here;
}

// Incorrect
.class {
    styles: go-here; }

Put one property per line.

// Correct
.class {
    display: block;
    color: red;
}

// Incorrect
.class {
    display: block; color: red;
}

When grouping selectors, keep individual
selectors to a single line.

// Correct
.class,
.box {
    styles: go-here;
}

// Incorrect
.class, .box {
    styles: go-here;
}

Avoid specifying units for zero values and
using zeros before decimals.

// Correct
.class {
    margin: 0;
    font-size: .5em;
}

// Incorrect
.class {
    margin: 0px;
    font-size: 0.5em;
}

Use non-outputting // for comments

One line between rulesets; two lines between sections

.coupon-anchor {
    ...
    text-align: center;

    // size and color of SVG icons inside the coupon anchor amount div
    .icon {
        width: 30px;
        height: 45px;
        fill: $white;
    }
}


// COUPON ANCHOR COLOR MAP ---------------------------------------------- //
// ---------------------------------------------------------------------- //

Media Queries

Write media queries inside rulesets.

Media queries go first before all other CSS in a block.

Write responsive code small to large (mobile first)

.page-callout-content {
  @include media(grid-med) {
    float: left;
    width: 75%;
    padding-left: 1em;
  }

  padding-top: 0.75em;
  padding-right: 2em;
}

@include media(grid-med) {
  .page-callout-content {
    float: left;
    width: 75%;
    padding-left: 1em;
  }
}

.page-callout-content {
  padding-top: 0.75em;
  padding-right: 2em;
}