CSS, Sass, & Roux | Tech Talk 10-14-15

Roux & Sass Standards

Arrow left/right between sections

Arrow up/down inside sections

CSS Basics

CSS Vocabulary
Cascade & Inheritance
Specificity
Using Inheritance
Composition

Vocabulary

nimbupani.com/css-vocabulary.html

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:  ...  */

.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

Using location inheritance means that your header styles are dependent on being in the sidebar (not standalone or reusable), and that you’re required have intimate knowledge of your parent container before writing styles.

Someone is going to ask you to create a new header style for the sidebar and the last thing you want to have to do is try out all 6 of the header elements ( h1 – h6) to see which one has the least number of styles to override.

You will eventually be asked to move a component from the main content region over to the sidebar. How much do you want to bet that the .sidebar h2 styles won’t have ANY effect on the .widget h2 you are moving over.

You might think that using a decendant selector (like .sidebar > h2) will solve all of your problems, but now your styles are dependent on markup order, and there is no way to reuse those h2 styles elsewhere in your site.

Class Inheritance

creates relationships & dependencies where none should exist



  My Calendar Title
  ...


.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.



    
        My Calendar Title
        ...
    
    
        My Blog Title
        ...
    
    
        My News Title
        ...


%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;
}

Roux

CSS in Roux vs RMN
New Pages
Commenting

A single source of truth for the way ingredients look, their HTML and Sass/CSS code, and how to implement them;

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

Use /* */ comments for page headers only; they are visible in output
Use non-output // comments for explanations, usage, edge cases, individual line comments, and TODOs.
For TODOs, leave your handle and date: 
// TODO eholladay 101415 comment goes here

Sass Standards

General
Naming Conventions
Spacing & Formatting
Media Queries

General

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;
}