0
Myths of CSS
Preprocessors
Ramon Lapenta - @ramono - #sass
About me
• Frontend developer @ Cyber-Duck Ltd
• Making websites for over 10 years
• Love what I do for a living
• Love to...
What are CSS Preprocessors?
• A way of adding functionality to CSS in the
form of mixins, extends, functions.
What are CSS Preprocessors?
• A way of reducing development time by
using variables and nesting rules.
Usage stats: Europe
Usage stats: America
Usage stats: America
Why use preprocessors?
1. CSS is repetitive
2. CSS doesn’t have variables
3. Inflexible, limited reusability
4. Complex we...
The Myths
1.Adds complexity to the development process
2.You lose control over the final code
3.Adds overhead to the websi...
The Myths
God, SCSS looks like
JavaScript and PHP
mated in a drunken state.
Christian Heilmann
Bull!
The Famous Bull Of Wall Street - http://goo.gl/kKsghb
Lets debunk
the myths!
Myth: Complexity
• Nesting is a natural way of coding
• Named variables are easier to manage than
individual values like c...
Myth: Lose control
• If your CSS code is currently horrible, your
Sass will undoubtedly be horrible
• Sass doesn’t write c...
Myth: Overhead
• Compiled file is just plain CSS
• Automatically minify/compress
• Easy to add (or remove) vendor evil
pre...
Myth: Dependencies
• Your current set up has many
dependencies
• If you don’t use a pre-processor, you need
a post-process...
Myth: Hard to debug
• Organised code shouldn’t be hard to debug
• There are ways
• It’s getting better
• The cost is low c...
Resources & Tools
Documentation
• All three major pre-processors have
excellent documentation online
• Tutorials available
• Videos everywhe...
Graphic Tools
• Codekit
(http://incident57.com/codekit/)
• Prepros
(http://alphapixels.com/prepros/)
• Compass
(http://com...
Other tools
• Brunch.io
• Grunt!
• Buildr
• Gulp
• Command line
(it’s not hard)
$ sass --watch file.scss:file.css
$ sass -...
Techniques &
Tips
Debug: —debug-info
• Debug info flag tells you with a comment where
the rule is located in the source file.
• Available on...
Debug: Chrome inspector
• Chrome 30+ includes
Sourcemap (Sass 3.3
and Less 1.5+) support
by default
• Stylus considering it
Debug: Chrome inspector
• Sourcemaps creates a map of your CSS
• Available only on Sass 3.3+
$ lessc common.less > common....
Debug: File organisation
• Divide and conquer
• Master the
@import rules and
file concatenation
• It’s easier to find a
ru...
Tip: File organisation
• Import within media queries so don’t repeat
media queries
@media (max-width: 599px) {
@import “sm...
Tip: Mixins
• Mixins are
parametrisable
snippets of code
@mixin box($type: border-box) {
box-sizing: $type;
-ms-box-sizing...
Tip: Mixins
• Easy way to add
prefixes .box {
padding: 20px;
width: 100%;
box-sizing: border-box;
-ms-box-sizing: border-b...
Tip: Extends
• Extends allows you
to alter rules
without repeating
code
• Use % to create a
rule that outputs
code only wh...
Tip: Extends
• Clever separation
.go, .cancel {
color: white;
padding: 5px 10px;
border-radius: 5px;
text-decoration: none...
Tip: Nesting
• Nesting feels right
• It’s easy and you
write less
.box {
float: right;
footer {
padding: 20px;
.btn {
colo...
Tip: Nesting
• Easy to get carried away
• Can bring over-specificity issues
/ Compiles to
.box {
float: right;
}
.box foot...
Tip: Github resources
• Tons of resources:
Mixins, frameworks, libraries, tutorials,
Tip pitch: hoisin.scss
• Light & extensible
• Responsive
• Doesn’t make any design assumptions
• Mobile first, Content fir...
Which one is the best?
• Sass!
• All have about the same functionality
• Ensure it fits with your workflow
• Compatibility...
The Myths
1. Adds complexity to the development process
2. You lose control over the final code
3. Adds overhead to the we...
Final Considerations
• If you are a CSS beginner
• You need to know how CSS works before
using a pre-processor
• Source Co...
Thanks!
Ramon Lapenta - @ramono - sxsw.com/rate
Upcoming SlideShare
Loading in...5
×

Myths about CSS Pre processors

2,613

Published on

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.

Published in: Technology, Education
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,613
On Slideshare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
13
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "Myths about CSS Pre processors"

  1. 1. Myths of CSS Preprocessors Ramon Lapenta - @ramono - #sass
  2. 2. 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
  3. 3. What are CSS Preprocessors? • A way of adding functionality to CSS in the form of mixins, extends, functions.
  4. 4. What are CSS Preprocessors? • A way of reducing development time by using variables and nesting rules.
  5. 5. Usage stats: Europe
  6. 6. Usage stats: America
  7. 7. Usage stats: America
  8. 8. Why use preprocessors? 1. CSS is repetitive 2. CSS doesn’t have variables 3. Inflexible, limited reusability 4. Complex websites are hard to maintain
  9. 9. 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
  10. 10. The Myths God, SCSS looks like JavaScript and PHP mated in a drunken state. Christian Heilmann
  11. 11. Bull! The Famous Bull Of Wall Street - http://goo.gl/kKsghb
  12. 12. Lets debunk the myths!
  13. 13. 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
  14. 14. 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
  15. 15. Myth: Overhead • Compiled file is just plain CSS • Automatically minify/compress • Easy to add (or remove) vendor evil prefixes • Seamless file concatenation
  16. 16. 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
  17. 17. 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
  18. 18. Resources & Tools
  19. 19. Documentation • All three major pre-processors have excellent documentation online • Tutorials available • Videos everywhere
  20. 20. 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/)
  21. 21. 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
  22. 22. Techniques & Tips
  23. 23. 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
  24. 24. Debug: Chrome inspector • Chrome 30+ includes Sourcemap (Sass 3.3 and Less 1.5+) support by default • Stylus considering it
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. 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); }
  29. 29. 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; }
  30. 30. 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; }
  31. 31. 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; }
  32. 32. Tip: Nesting • Nesting feels right • It’s easy and you write less .box { float: right; footer { padding: 20px; .btn { color: $white; } } }
  33. 33. 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; }
  34. 34. Tip: Github resources • Tons of resources: Mixins, frameworks, libraries, tutorials,
  35. 35. 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/
  36. 36. 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?
  37. 37. 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
  38. 38. 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
  39. 39. Thanks! Ramon Lapenta - @ramono - sxsw.com/rate
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×