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.

Each block has unique name (class name)
No html elements (ie .thingy li, .thingy a)
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,

Install Homebrew.
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; }
}