Rapid Web Development

Unit 6, Week 7

Object-oriented CSS, SCSS/Compass

SMACSS review



 BasE
Layout
Module
State

Theme

(see example)

Object-oriented?

A way of describing reality in code, with a range of patterns, and a way of thinking about program entities regardless of the programming languages being used.


We can talk about "things", not code. Our things interact with other things.


MindBEMding: CSSWizardry 

BEM Methodology: Smashing

blocks & Elements


Smashing Magazine

Blocks

An entity, the "building blocks" of an application. Can contain other blocks.


Elements

Part of a block that performs a certain function.
Context, context, context! (The container block sets the context for the element.)



Keywords

Common sense, but bears repeating:

  • Name your blocks and elements.
  • Block names must be unique, unless multiple instances of same block
  • Element names are unique within a block context. For instance, "item" elements within a parent "menu" block

Modifiers

The same menu element is in both the header and footer blocks. It has the exact same markup, only its context is different. Yet, it must look different in both cases.



<ul class="menu menu--big menu-inline">...</ul>
//
.menu--big{ // big menu code here }
.menu--small{ // small menu code here }

Independence

Blocks should be placed anywhere, completely independently of container, and maintain behavior/appearance.

  1. Each block has unique name (class name)
  2. No html elements (ie .thingy li, .thingy a)
  3. Avoid nesting selectors to get to blocks

Preprocessor

CSS is inherently simple, easily picked up by beginners. It is, however, inherently limited.

CSS preprocessing extends the feature set of CSS to include many goodies we always wished we had:

  • Nested selectors
  • Variables
  • Mixins
  • Shorthand

Still produces good ol' CSS.

Why sass and not less?

Because Chris Coyier doubled down on it.

Just kidding. (But seriously, read everything that dude has ever written.)

For most SASS users, SASS wins because of Compass, which we'll get into later.

We're actually using "SCSS" syntax, which looks more like CSS. "SASS" syntax is  stripped down. We'll just call it "SASS".

We'll use SASS. Which means Ruby.

Install Ruby

OSX *SHOULD* come with Ruby. If not, 
  1. Install Homebrew.
  2. brew install ruby


Windows:

http://rubyinstaller.org/


Linux

$ sudo apt-get install ruby1.9.1

Install compass

Wait, Compass? Compass prepackages a lot of goodies.
$ gem install compass

Now navigate to the folder of one of the local urls we've created recently. For instance, the folder for my wdim351.com is

/Applications/MAMP/htdocs/dev/wdim351

Set up a new SASS/Compass project:

$ compass create <myproject>

Add an index.html to that folder and include the screen.css file:

<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />

Preprocessin' time

Inside the same folder as config.rb, run:
$ compass watch

Let's edit /sass/screen.scss:

.thing1{
  .thing2{
    .thing3{
      background: blue;
    }
  }
} 

BOOM, now check /css/screen.css:

...

/* line 10, ../sass/screen.scss */
.thing1 .thing2 .thing3 {
  background: blue;
} 

Everything from here out straight from sass-lang.com

Nested selectors

#navbar {
  width: 80%;
  height: 23px;

  ul { list-style-type: none; }
  li {
    float: left;
    a { font-weight: bold; }
  }
} 

Becomes

#navbar {
  width: 80%;
  height: 23px;
}
#navbar ul {
  list-style-type: none;
}
#navbar li {
  float: left;
}
#navbar li a {
  font-weight: bold;
} 

WARNING

This is awful CSS:
#header .nav .top .menu-top.inline ul li a{ //properties }

That's the result of:

#header{
  .nav{
    .top{
      .menu-top{
        &.inline{
          ul{
            li{
              a{ // properties }
            }
          }
        }
      }
    }
  }
} 

It's easy to get carried away with nesting. Don't follow document tree. Follow OOCSS.

Nested .. Properties?!

.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
} 
.fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc;
}

Ermagehrd SRSS


Parent References

"&" grabs the top parent.
a {
  color: #ce4dd6;
  &:hover { color: #ffb3ff; }
  &:visited { color: #c458cb; }
} 

Becomes

a {
  color: #ce4dd6;
}
a:hover {
  color: #ffb3ff;
}
a:visited {
  color: #c458cb;
} 

Variables

Start with $, can be any CSS property.
$main-color: #ce4dd6;
$style: solid;

#navbar {
  border-bottom: {
    color: $main-color;
    style: $style;
  }
}
a {
  color: $main-color;
  &:hover { border-bottom: $style 1px; }
} 
#navbar {
  border-bottom-color: #ce4dd6;
  border-bottom-style: solid;
}
a {
  color: #ce4dd6;
}
a:hover {
  border-bottom: solid 1px;
} 

Operations & Functions

#navbar {
  $navbar-width: 800px;
  $items: 5;
  $navbar-color: #ce4dd6;

  width: $navbar-width;
  border: 2px solid $navbar-color;

  li {
    float: left;
    width: $navbar-width/$items - 10px;

    background-color:
      lighten($navbar-color, 20%);
    &:hover {
      background-color:
        lighten($navbar-color, 10%);
    }
  }
}
    
#navbar {
  width: 800px;
  border-bottom: 2px solid #ce4dd6;
}
#navbar li {
  float: left;
  width: 150px;
  background-color: #e5a0e9;
}
#navbar li:hover {
  background-color: #d976e0;
}

Mixins

Re-usable, repeatable chunks of code. Pass arguments.
@mixin rounded($vert, $horz, $radius: 10px) {
  border-#{$vert}-#{$horz}-radius: $radius;
  -moz-border-radius-#{$vert}#{$horz}: $radius;
  -webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
#sidebar { @include rounded(top, left, 8px); }
#navbar li {
  border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px; }

#footer {
  border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -webkit-border-top-left-radius: 5px; }

#sidebar {
  border-top-left-radius: 8px;
  -moz-border-radius-topleft: 8px;
  -webkit-border-top-left-radius: 8px; }

Homework 6a

Build your new wireframes in SCSS.  Push to your team repo.

  1. Minimum 5 HTML files.
  2. Clickable to each page
  3. At least one (1) mixin and three (3) variables
  4. Think OO to avoid repetition: blocks & elements
  5. Every team member MUST appear in the commit log.
  6. Each member without a commit gets a zero.

Homework 6b

Read: 
  1. http://css-tricks.com/musings-on-preprocessing/
  2. http://www.lullabot.com/articles/10-commandments-modern-web-design
Made with Slides.com