Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The evolution of CSS - 2
Search
Mattia Larentis
February 05, 2013
Programming
1
100
The evolution of CSS - 2
Mattia Larentis
February 05, 2013
Tweet
Share
More Decks by Mattia Larentis
See All by Mattia Larentis
Going isomorphic with Django and React
nostalgia
0
520
django loves gulp
nostalgia
0
160
orrfuscation
nostalgia
0
130
The evolution of CSS
nostalgia
4
310
jQuery
nostalgia
4
440
Other Decks in Programming
See All in Programming
Open source software: how to live long and go far
gaelvaroquaux
0
630
昭和の職場からアジャイルの世界へ
kumagoro95
1
360
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.8k
Honoとフロントエンドの 型安全性について
yodaka
5
330
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
Introduction to kotlinx.rpc
arawn
0
670
Conform を推す - Advocating for Conform
mizoguchicoji
3
690
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.2k
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
380
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
120
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
340
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Thoughts on Productivity
jonyablonski
69
4.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Side Projects
sachag
452
42k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Why Our Code Smells
bkeepers
PRO
336
57k
Transcript
Mattia Larentis - @spiritualguru the evolution of css
a long time ago...
1980s
Nerdz
CERN
Share documents
HTML HyperText Markup Language
tags!
paragraphs titles bulleted lists
1993
people began to talk about STYLE
W3C World Wide Web Consortium
CSS Cascading Style Sheet
1996
version 1.0
None
from 1998 to 2004
version 2.0
new Browsers
None
None
None
WIN
TODAY
version 3.0
New Features
Border Radius 2D Transforms Box Shadow RGBA Colors
but...
CSS SUCKS
Problems
vars
nesting
performance
is there a solution?
YES!
preprocessing
A system written in another language that adds lots of
tasty goodies that don’t exists natively, while still spitting out something a browser can understand
{LESS} The dynamic stylesheet language.
Sass Syntactically Awesome StyleSheets
stylus Expressive, dynamic, robust CSS
None
ok... but... why?
it will make you CSS DRY
it will save your time
it will make your code easy to maintain
it will make your CSS more organized
it’s fun
talk is cheap, show me the code
START
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js"></script>
IMPORT
@import "vars";
VARS
@border: 1px; @color: #111; @red: #842210;
.my-class { color: @color; border-left: @border; border-right: @border; }
.my-class { color: #111; border-left: 1px; border-right: 1px; }
OPERATIONS
.my-class { color: (@color + #030); border-right: (@border * 2);
}
.my-class { color: #114411; border-right: 2px; }
MIXIN
.border-radius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius;
-o-border-radius: @radius; border-radius: @radius; }
.my-class { .border-radius(2px); } .another-class { .border-radius; }
.my-class { -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px;
border-radius: 2px; }
.another-class { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px;
border-radius: 5px; }
NESTING
.my-class { h1 { font-weight: bold; } p { font-size:
12px; a { text-decoration: none; &:hover { color: @red; } } } }
.my-class h1 { font-weight: bold; } .my-class p { font-size:
12px; } .my-class p a { text-decoration: none; } .my-class p a:hover { color: #842210; }
Questions?!?
Mattia Larentis http://larentis.eu
[email protected]
@spiritualguru github.com/nostalgiaz