best practice css

8/2/2019 Best Practice Css

http://slidepdf.com/reader/full/best-practice-css 1/28

Best Practice CSS

Rimian Perkins

@rimian

Senior Drupal Developer at PreviousNext:

previousnext.com.au

@previousnext



It's about...

Representing design faithfully.

● Enforcing the graphic designer's rules.

● Giving CSS more structure



I ❤ CSS

● Abstracts design from content

● Simple language structure (insert buzz word)

● Cascades

● Tolerates errors



It's a jungle out there...

A typical project may have:

● Many CSS files

● More than one developer

● A distributed team

Beware of Software Entropy

●

The natural tendency for information to becomechaotic.



But wait. There's more.

Imposed Duplication

● Attributes and Values must be re applied

● Block hierarchy unlike DOM



Duplication of values

Designer's idea: “I really like blue”

.a { color: #00c; }

.b { border-bottom: #00c; }

.c { background-color: #00c; }



A bit more complicated

Designer: “I really like blue colour schemes.”

.fav_color { color: #005; border-color: #00f; }

.contrast { color: #660; }



Complicated

Colours for <table> in garland theme:

#d3e7f4, #494949, #6f9dbd, #d3e7f4, #edf5fa

#fff, #ffb, #ffd, #ddecf5, #e6f1f7, #fff, #b4d7f0

#d4e7f3, #455067



Repetition of spacing

Designer: “I want all my margins 10 pixels”

.container { margin: 10px; }

..

h2 { margin-bottom: 10px; }



The Reverse: Ambiguity

“The image is 200 pixels x 100 pixels”

.a { width: 200px; height: 100px; }

“The columns are 200 pixels wide”

.b { width: 200px; }



Context of Block Declarations

.a {}

.a .b { }

.a .b .c{ }

.a .b .d{ }

.a .x { }



It's just an expression

.col-1 { width: 80px; }






Technical Cost

The overhead of managing CSS

● Design knowledge must be stored outside CSS

● Developers have to reverse engineer.

● Flat structure increases name collisions

● The Original Design Idea is lost in theimplementation.

● Software Entropy



Definitions

A Framework

● An abstraction in which common code providinggeneric functionality can be overridden by user

code, thus providing specific functionality. An Abstraction Layer

● A way of hiding the implementation details of a

particular set of functionality



Drum Roll Please

Why not write CSS through an abstraction layer?

● Hide the evils of duplication

● Enhance the good features

● Write the code that writes the code.



Sass - Syntactically AwesomeStylesheets

sass-lang.com

● It's a Ruby Gem

● Sass is an extension of CSS.

● It’s translated to well-formatted, standard CSS.

Related to: Less



Features of Sass

● Variables

● Operations

● Control Structures

● Functions

● Selector Inheritance and Mixins

●

Nested Classes● Firebug plugin and console thingy



How do I get it?

$ gem install haml

$ mv style.css style.scss

$ sass --watch style.scss:style.css

OR

Drupal Projects: Sass, Less, xCSS

OR (for mac OSX)incident57.com/less



Variables

$hex: #9cc;$grid: 10px;

.a {color: $hex; margin: $grid;}

.a {color: #9cc; margin: 10px;}



Operations

$hex: #67ef54;

.a { color: $hex + #111; }

$grid: 10px;

img.thumb { width: $grid * 16; height: $grid * 9 }



Selector Inheritance

.a { color: red; }

.b { width: 100px; }

.my_class{ @extend .a; @extend .b; }

..

.my_class { color: red; width: 100px; }



Mixins

@mixin spacer ($arg) { padding: $arg; }

.b { @include spacer(10px); color: red; }

.b { padding: 10px; color: red; }



Here's one I prepared earlier.

● Define units● Create reusable things

● Compose the things like design requirement

● Grids are good!

● Run UI prototype in parallel to graphic design.

https://github.com/rimian/css-framework



HTML5 Document

<div id="container">

<header></header>

<aside id="sidebar-first">

<div class="content"><h2></h2></div>

</aside>

<div id="content">


</div>

<aside id="sidebar-second">


</aside>

</div>

<footer></footer>



Create Elements

@mixin positioning() { // Position containers on the page }

@mixin space($option) {

// Apply default white space around things

// Option for top & bottom or sides or whatever

}

@mixin coloring($option) { //Apply colour. With reverse out option. }

@mixin corners() { // Handle browser support and apply corners }

@mixin bordering() { // Apply a standard border to some things }



Define Units

grid: 10px;

$page_width: $grid * 120;

$col_width: $grid * 20;

$hex_bg: #efefef;

$hex_fg: #111;

$hex_content: white;

$hex_low: darken($hex_bg, 30%);

$corners: $grid * 0.8;$small: $grid * 0.9;

@import 'components.scss';



Compose CSS

header {

@include corners();

@include space(sides);

div { @include space(ends); }

}

aside {

@include positioning(column);

div.content {

@include corners();

@include space(all);

}



FIN

Sass - sass-lang.com

Less - lesscss.org

Less Framework - lessframework.com

Less.app - incident57.com/less

xCSS (php) - xcss.antpaw.org

The Pragmatic Programmer – pragprog.com

https://github.com/rimian/css-framework

best practice css

Documents