myths about css pre processors

39
Myths of CSS Preprocessors Ramon Lapenta - @ramono - #sass

Upload: ramon-lapenta

Post on 08-May-2015

2.355 views

Category:

Technology


2 download

DESCRIPTION

This talk will break some of the myths regarding pre-processors and explain how they can help you be more efficient coding CSS, by showing examples and practical information about them, available tools, and some useful techniques to get you started and get the most out of them and put you in the right track.

TRANSCRIPT

Page 1: Myths about CSS Pre processors

Myths of CSS Preprocessors

Ramon Lapenta - @ramono - #sass

Page 2: Myths about CSS Pre processors

About me

•Frontend developer @ Cyber-Duck Ltd

•Making websites for over 10 years

•Love what I do for a living

•Love to talk about it

Page 3: Myths about CSS Pre processors

What are CSS Preprocessors?

•A way of adding functionality to CSS in the form of mixins, extends, functions.

Page 4: Myths about CSS Pre processors

What are CSS Preprocessors?

•A way of reducing development time by using variables and nesting rules.

Page 5: Myths about CSS Pre processors

Usage stats: Europe

Page 6: Myths about CSS Pre processors

Usage stats: America

Page 7: Myths about CSS Pre processors

Usage stats: America

Page 8: Myths about CSS Pre processors

Why use preprocessors?

1. CSS is repetitive

2. CSS doesn’t have variables

3. Inflexible, limited reusability

4. Complex websites are hard to maintain

Page 9: Myths about CSS Pre processors

The Myths

1.Adds complexity to the development process

2.You lose control over the final code

3.Adds overhead to the website

4.Adds extra dependencies to your workflow

5.Too hard to debug

Page 10: Myths about CSS Pre processors

The Myths

God, SCSS looks like JavaScript and PHP mated in a drunken state.

Christian Heilmann

Page 11: Myths about CSS Pre processors

Bull!The Famous Bull Of Wall Street -

http://goo.gl/kKsghb

Page 12: Myths about CSS Pre processors

Lets debunk the myths!

Page 13: Myths about CSS Pre processors

Myth: Complexity

•Nesting is a natural way of coding

•Named variables are easier to manage than individual values like colours (E.g. #0E2740)

•You don’t have to use all the functionality

Page 14: Myths about CSS Pre processors

Myth: Lose control

•If your CSS code is currently horrible, your Sass will undoubtedly be horrible

•Sass doesn’t write code by itself

•Use expanded output option during development

Page 15: Myths about CSS Pre processors

Myth: Overhead

•Compiled file is just plain CSS

•Automatically minify/compress

•Easy to add (or remove) vendor evil prefixes

•Seamless file concatenation

Page 16: Myths about CSS Pre processors

Myth: Dependencies

•Your current set up has many dependencies

•If you don’t use a pre-processor, you need a post-processor

•Many tools are available for free, for every platform

Page 17: Myths about CSS Pre processors

Myth: Hard to debug

•Organised code shouldn’t be hard to debug

•There are ways

•It’s getting better

•The cost is low compared to the benefit

Page 18: Myths about CSS Pre processors

Resources & Tools

Page 19: Myths about CSS Pre processors

Documentation

•All three major pre-processors have excellent documentation online

•Tutorials available

•Videos everywhere

Page 20: Myths about CSS Pre processors

Graphic Tools

• Codekit (http://incident57.com/codekit/)

• Prepros (http://alphapixels.com/prepros/)

• Compass (http://compass.kkbox.com)

• Hammer (http://hammerformac.com)

• Koala (http://koala-app.com)

• Mixture (http://mixture.io)

LiveReload (http://livereload.com)

Scout (http://mhs.github.io/scout-app/)

Crunch (http://crunchapp.net)

SimpleLess (http://wearekiss.com/simpless)

WinLess (http://winless.org)

LessApp (http://incident57.com/less/)

Page 21: Myths about CSS Pre processors

Other tools

•Brunch.io

•Grunt!

•Buildr

•Gulp

•Command line (it’s not hard)

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

$ sass --watch scss:css

Watch a file

Watch a folder

Page 22: Myths about CSS Pre processors

Techniques & Tips

Page 23: Myths about CSS Pre processors

Debug: —debug-info

•Debug info flag tells you with a comment where the rule is located in the source file.

•Available only up to Sass 3.2

$ sass --watch —style expanded —debug-info scss:css

Watch a folder

/* _head.scss line: 24 */.head { background-color: darkslateblue;}

Output

Page 24: Myths about CSS Pre processors

Debug: Chrome inspector

• Chrome 30+ includes Sourcemap (Sass 3.3 and Less 1.5+) support by default

• Stylus considering it

Page 25: Myths about CSS Pre processors

Debug: Chrome inspector

•Sourcemaps creates a map of your CSS

•Available only on Sass 3.3+

$ lessc common.less > common.css

Watch the folder

common.css common.map

Output

Page 26: Myths about CSS Pre processors

Debug: File organisation

•Divide and conquer

•Master the @import rules and file concatenation

•It’s easier to find a rule in a small file

public/ assets/ css/ styles.css img/ js/ scss/ _carousel.scss _contact.scss _grid.scss _home.scss _typo.scss styles.scss

Page 27: Myths about CSS Pre processors

Tip: File organisation

•Import within media queries so don’t repeat media queries

@media (max-width: 599px) { @import “small/base.scss”; }

•Make one file by component / section with all its media queries

Page 28: Myths about CSS Pre processors

Tip: Mixins

•Mixins are parametrisable snippets of code

@mixin box($type: border-box) {box-sizing: $type;-ms-box-sizing: $type;-moz-box-sizing: $type;-webkit-box-sizing: $type;

}

.box { padding: 20px;

width: 100%;@include box(border-box);

}

Page 29: Myths about CSS Pre processors

Tip: Mixins

•Easy way to add prefixes .box {

padding: 20px;width: 100%;box-sizing: border-box;-ms-box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;

}

Page 30: Myths about CSS Pre processors

Tip: Extends

•Extends allows you to alter rules without repeating code

•Use % to create a rule that outputs code only when extended.

.go { color: $white; padding: 5px 10px; border-radius: 5px; text-decoration: none; font-size: 1em; text-transform: uppercase; background-color: $green; } .cancel { @extend .go; background-color: $red; }

Page 31: Myths about CSS Pre processors

Tip: Extends

•Clever separation .go, .cancel {

color: white; padding: 5px 10px; border-radius: 5px; text-decoration: none; font-size: 1em; text-transform: uppercase; background-color: green; } .cancel { background-color: red; }

Page 32: Myths about CSS Pre processors

Tip: Nesting

•Nesting feels right

•It’s easy and you write less

.box { float: right;

footer {padding: 20px;

.btn { color: $white; }

} }

Page 33: Myths about CSS Pre processors

Tip: Nesting

•Easy to get carried away

•Can bring over-specificity issues

/ Compiles to .box { float: right; } .box footer { padding: 20px; } .box footer .btn { color: white; }

Page 34: Myths about CSS Pre processors

Tip: Github resources

•Tons of resources:Mixins, frameworks, libraries, tutorials,

Page 35: Myths about CSS Pre processors

Tip pitch: hoisin.scss

•Light & extensible

•Responsive

•Doesn’t make any design assumptions

•Mobile first, Content first, Performance first

•http://cyber-duck.github.io/hoisin.scss/

Page 36: Myths about CSS Pre processors

Which one is the best?

•Sass!

•All have about the same functionality

•Ensure it fits with your workflow

•Compatibility with existing code

•What feels better to you?

Page 37: Myths about CSS Pre processors

The Myths

1. Adds complexity to the development process

2. You lose control over the final code

3. Adds overhead to the website

4. Adds extra dependencies to your workflow

5. Too hard to debug

Page 38: Myths about CSS Pre processors

Final Considerations

•If you are a CSS beginner

•You need to know how CSS works before using a pre-processor

•Source Control: ignore compiled / compile on deployment

Page 39: Myths about CSS Pre processors

Thanks!Ramon Lapenta - @ramono - sxsw.com/rate