CSS за програмисти

Красимир Цонев

blog: krasimirtsonev.com/blog
twitter: @KrasimirTsonev
github: krasimir

Основи

Selectors & naming

Избягвайте:

/* ids */
#header { background: #BADA55; }
.content #title { color: #00FF00; }
/* descendant selector */
.sidebar .social-widget {
	background: #BADA55;
}

Имената на класовете трябва да отразяват функция а не визия.

.button-red {  /* original */
  color: #FFF; 
  background: #F00; 
}
.button-red { /* два месеца по-късно */
  color: #000;
  background: #55993C;
}
.button-warning { /* правилен подход */
  color: #000;
  background: #55993C;
}

BEM

block, element, modifier
yandex.ru

.site-header { ... }
.logo { ... }
.navigation { ... }
.site-header { ... }
.site-header .logo { ... }
.navigation { ... }
.site-header { ... }
.site-header-logo { ... }
.navigation { ... }
.site-header { ... }
.site-header-logo { ... }
.site-header-logo-xmas { ... }
.site-header-logo-campaign { ... }
.navigation { ... }
.site-header { ... } /* block */
.site-header__logo { ... } /* element */
.site-header__logo--xmas { ... } /* modifier */
.site-header__navigation { ... } /* element */

OOCSS

Nicole Sullivan
github.com/stubbornella/oocss
Media object

1. Separate
structure and skin

.header {
    background: #BADA55;
    color: #000;
    width: 960px;
    margin: 0 auto;
}
.footer {
    background: #BADA55;
    text-align: center;
    color: #000;
    padding-top: 20px;
}
.colors-skin {
    background: #BADA55;
    color: #000;
}
.header {
    width: 960px;
    margin: 0 auto;
}
.footer {
    text-align: center;
    padding-top: 20px;
}

2. Separate
container and content

.header .social-widget {
    width: 250px;
    border: solid 1px #BADA55;
}

SMACSS

Scalable and modular architecture for CSS
smacss.com
Jonathan Snook

Categorizing
CSS Rules

1. Base

2. Layout

3. Module

4. State

5. Theme

Atomic Design

article
Brad Frost






margin-top: 24px;


Atom → Molecule → Organelle →
Cell → Tissue → Organ → Sys → Organism

Инструменти

CSS Preprocessors (LESS, SASS, Stylus)

Reset, Normalize

CSS Frameworks (...)

CSS Debug and test
(CSS Lint, Image diffs, PhantomCSS, http://csste.st/)

LESS

server-side (Node.js), client-side

input: .less

nesting, variables, mixins

@color: #4D926F;
.border(@color: #000) {
  border: dotted 2px @color;
}
#header {
  color: @color;
  h2 {
    color: @color;
    .border(#00F);
   }
}

#header {
  color: #4d926f;
}
#header h2 {
  color: #4d926f;
  border: dotted 2px #0000ff;
}

SASS

server-side (Ruby)

input: .sass, scss

nesting, variables, mixins, extends, place holders

$color: #BADA55;
%font-color {
  color: $color;
}
@mixin border($color: #000) {
  border: dotted 2px $color;
}
#header {
  @extend %font-color;
  h2 {
    @extend %font-color;
    @include border(#00F);
   }
}
#header, #header h2 {
  color: #bada55; 
}
#header h2 {
  border: dotted 2px blue; 
}

Проблеми на
LESS и SASS

Combining

.main-nav {
    background: #333;
}
.main-content {
    background: #333;
}
.main-nav, .main-content {
    background: #333;
}

Overwriting

.main-nav {
   font-size: 20px;
}
.main-nav {
   font-size: 30px;
}
.main-nav {
    font-size: 30px;
}

Flexibility

AbsurdJS

server-side (NodeJS)

input: .js, .json, .css

{
    body: {
        marginTop: '20px',
        padding: 0,
        fontWeight: 'bold',
        section: {
            paddingTop: '20px'
        }
    }
}
body {
    margin-top: 20px;
    padding: 0;
    font-weight: bold;
}
body section {
    padding-top: 20px;
}
// styles.js
api.plugin("size", function(api, type) {
  if(type == "small") { return {
      fontSize: "12px",
      lineHeight: "20px"
    }
  } else { return {
      fontSize: "18px",
      lineHeight: "26px"
    }
  }
}).import(__dirname + "/css/main.css");
// main.css
body {
    margin-top: 10px;
    size: small;
}
github.com/krasimir/absurd
github.com/jed/domo
github.com/Gozala/styleless
varnalab.krasimirtsonev.com/css-for-developers