Christopher Bloom
Frontend developer, lover of design systems, CSS architecture, and all things javascript.
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
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?
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 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.
-
Minimum 5 HTML files.
- Clickable to each page
- At least one (1) mixin and three (3) variables
- Think OO to avoid repetition: blocks & elements
- Every team member MUST appear in the commit log.
- Each member without a commit gets a zero.
Homework 6b
wdim351_week06
By Christopher Bloom
