Markup & Styling Workflow

(for CSS or SCSS)

1.Write Good Markup

Everything is made up of ROWS and COLUMNS. Build your markup to follow this standard convention.

2.Write markup for the LARGEST size.

Writing markup with the largest layout as a reference will ensure that you have the most complex information in your markup (you can always hide the extra stuff for small screens).

2.Name classes descriptively.

Elements of the same type should have distinct class names if they behave differently. Here, the ULs have distinct classes:

<div class="links featured-links">

    <ul class="featured-links-left">...</ul>

    <div class="featured-links-right">...</div>

</div>

<div class="sidebar">

    <ul class="sidebar-links">...</ul>

</div>

It's OK if this makes your markup verbose. You can always go back to optimize & make your markup dryer later.

3.Add in a CSS reset or CSS framework.

Add in CSS RESETS NOW!! A CSS Reset zeroes out inconsistent padding and spacing that is slightly different from one browser to another. Don't wait to do this at the end of your project or it will break your styles.

(If you are using a CSS framework, you don't need to do this step!)

4.Give everything an outline or background color. You should just see a layout of rectangles.

You can immediately tell what is a BLOCK element, versus what is an inline element.

You can also better keep track of all the rectangles, and tell the difference between padding and margin.

90% of your styling work should be done in this ugly color-block mode.

5. Style for the SMALLEST size.

Hide everything that is not relevant for the smallest/simplest layout. Do not restrict small styles in media queries because "small" styles are essentially the base/default styles that should apply to all sizes until they are overridden at larger screen sizes).

6[simple media queries]

Style for just one size at a time.

If you are super new to CSS, it is easiest to keep your browser at a single size and style everything, then make the screen larger to style for the next-largest size, making sure to use inline media queries, etc.

6[advanced media queries]

Simultaneously style for all sizes.

Browser-Sync will allow you to style for all screen sizes simultaneously. If you are comfortable working this way, you can focus on one element at a time, and style it for all screen sizes.

7.Same Result.

h1{

   font-family: "Helvetica Neue", sans-serif;

   font-size: 1rem;


   @media only screen and (min-width: 768px){

      font-size: 1.3rem;

   }


   @media only screen and (min-width: 1200px){

      font-size: 1.6rem;

   }

}

SCSS Rules

Don't nest too deep.

• you will lose track of your closing }.
   
• Nest abundantly to rapidly create initial styles, then refactor immediately to flatten the nesting.
   
• Appropriate nesting will output CSS with *JUST ENOUGH* specificity. You do not want styles that are too specific.
   
• Show example of horribly nested code...

Don't use @extends.

Keep your style declarations in the right order.

• @includes first
• media queries for the top-level element
• child selectors, pseudo-selectors, etc.

Clump Similar Properties together

• layout properties
• spacing properties
• font properties

Spacing

• 1 vertical space above lines with opening selectors{
• No vertical spaces for all the closing }
• 2-space indents

Always check the CSS for clean output.

Generally, your css should still be clean and beautiful when it is compiled.

If you write bad scss it will output very very bad css.

Grok the tl;dr of http://sass-guidelin.es/

Use an auto-prefixer.