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
97
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
490
django loves gulp
nostalgia
0
160
orrfuscation
nostalgia
0
130
The evolution of CSS
nostalgia
4
290
jQuery
nostalgia
4
420
Other Decks in Programming
See All in Programming
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
440
Ruby Function Composition
bkuhlmann
1
340
slow types ってなんだろう?
karad
0
140
Polars入門
daikikatsuragawa
1
190
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
990
Sheets API使ってみた
toshi0383
2
170
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
6
1.3k
Tailwind CSSを本気でカスタマイズする方法
fsubal
15
5.5k
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
910
Ruby Pattern Matching
bkuhlmann
0
930
WebGLで始める コンピュータグラフィックス入門
heller77
0
330
Documentation for users with AsciiDoc and Antora
ahus1
0
370
Featured
See All Featured
Become a Pro
speakerdeck
PRO
13
4.6k
Faster Mobile Websites
deanohume
300
30k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Navigating Team Friction
lara
179
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Into the Great Unknown - MozCon
thekraken
15
1k
A designer walks into a library…
pauljervisheath
201
23k
A Tale of Four Properties
chriscoyier
153
22k
A better future with KSS
kneath
231
16k
Designing Experiences People Love
moore
136
23k
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