CSS Prez Reveals Common Frustrations and Solutions

Preparation H is a hemorrhoid creme, and it’s the title of this presentation

CSS is a pain in the ass

Because at one point in time we’ve all thought that CSS is a pain in the ass

SASS & Compass will make writing CSS easier
But ﬁrst this is what people think about CSS

That may be true, but it’s getting better. CSS preprocessors will help you write CSS, but before we jump in here’s what people
think of CSS

CSS makes me want to kill myself
@mullets4lyfe

Mastering CSS is like mastering throwing shit into a fan
@hatianminera

CSS sucks! Can we please go back to intuitive tables?
@delainanicole

CSS is fun. You just need to be in the right mood & have patience. Bit like anal sex
@darwoodster

I fucking hate CSS. strait up, going to kill its children
@clearasconcrete

God I hate CSS. Its not proper development, is it?
@fergalleon

I'm going through all nine circles of CSS hell
@gijsdekoning

These are all within the last week or two. CSS is still hard today, for everyone

suicidal thoughts
CSS makes me want to kill myself
@mullets4lyfe

Mastering CSS is like mastering throwing shit into a fan
@hatianminera

CSS sucks! Can we please go back to intuitive tables?
@delainanicole

CSS is fun. You just need to be in the right mood & have patience. Bit like anal sex
@darwoodster

I fucking hate CSS. strait up, going to kill its children
@clearasconcrete

God I hate CSS. Its not proper development, is it?
@fergalleon

I'm going through all nine circles of CSS hell
@gijsdekoning
everlasting divine punishment
Most comments were negative

CSS sucks!

The conversation around CSS goes something like this

CSS sucks!

No it doesn’t! You suck at using it.

CSS sucks!


No I don’t, browsers don’t support it.

CSS sucks!



Well.

CSS sucks!



It’s Microsoft’s fault.
It’s not really Microsoft’s fault, the way we learn how to use CSS is a bit weird

1. Understand a little more about CSS

2. Have a go at SASS & Compass

Hopefully at the end of these slides, you’ll feel better about CSS, and you’ll give SASS & Compass a try

.selector {
property: value;
}

So we’re on the same page, here’s the terminology. This is a CSS class

.selector {
property: value;
}

We use selectors to target HTML elements

.selector {
property: value;
}

We use properties to apply styles. There are over 150 properties in CSS2

.selector {
property: value;
}

A CSS class is a collection of property value pairs

1. Styles may not work
Many properties depend on the display value

Has anyone ever added some styles, only to refresh the browser to see nothing change? It’s probably because the element has the
wrong display value

span
{

height:
100px;
}

This won’t work

span
{

display:
inline; ‹ from the browser’s stylesheet

height:
100px;
}

SPANS inherit a display value of inline from the browser’s stylesheet

span
{

display:
block;

height:
100px;
}

If you override that value, and make the SPAN a block, it will work

div
{
from the browser’s stylesheet ›

position:
static;

top:
10px;
}

Likewise if you add a property of top, it won’t work

div
{

position:
relative;

top:
10px;
}

If you change the position of the DIV from static to relative, it will work

2. Values aﬀect other values
The browser computes a lot of stuﬀ

The browser computes every value that is not in pixels when your stylesheet loads

body
{

font-‐size:
12px;
}

div
{

font-‐size:
2em;
}

<body>

<div>

<div></div>

</div>
</body>

So if we have this HTML & CSS

body
{

font-‐size:
12px;
}

div
{

font-‐size:
2em;
}

<body>

<div>

<div></div> calculates to › (12px
x
2)
=
24px

</div>
</body>

This DIV will have a font-size of 24px

body
{

font-‐size:
12px;
}

div
{

font-‐size:
2em;
}

<body>

<div>

<div></div> calculates to › (24px
x
2)
=
48px

</div>
</body>

This DIV will have a font-size of 48px. Often when a browser computes a value, it uses the parent’s value as a reference

span
{

display:
inline; calculates to › block

float:
left;
}

Likewise if I ﬂoat an element, the browser will compute the display value as block. That’s kind of important to know

3. The total element size is computed
You may have heard of the box model debacle

The browser computes a lot of stuff, it’s true

div
{

width:
100px; the width on screen › 100px
}

If you have a DIV with a width of 100px, it’s correct when you view it

div
{

width:

padding:
10px;
}

If you add padding, what you see on screen when you view it will actually be 100px + 10px + 10px

div
{

width:

padding:
10px;

border:
1px;
}

Likewise if you also add a border, the width you see on screen is 100px + 10px + 10px + 1px + 1px

4. there’re only two ways to flow
4. Elements belong to a position
Float and position disrupt the ﬂow

Float and position are the only ways to change layout in CSS 2, which is sad, because they’re not very good at their jobs

<div>Top</div>
<div>Middle</div>
<div>Bottom</div> Top

Middle

Bottom

Let’s say I have this HTML and it generates the boxes on the right. They belong in the same ﬂow, appearing in sequence one after
the other as I would expect

<div>Top</div>
<div
class="blue">Middle</div>

Middle

Bottom

I’ll make one blue

<div>Top</div>
<div

.blue
{

float:
left;
}
Middle

Bottom

And I’ll ﬂoat it

<div>Top</div>
<div

.blue
{

float:
left;
}
Middle
Bottom

The bottom DIV slides up, as if the blue DIV isn’t even there. Floating puts elements “above and below” of each other, instead of
“side by side”

<div>Top</div>
<div

.blue
{

float:
left;
}
Middle Bottom

Content from other elements will not hide beneath ﬂoating elements

<div>Top</div>
<div

.blue
{

float:
left;
}
Bottom

Note that ﬂoating does not affect how other boxes are drawn

<div>Top</div>
<div

.blue
{

position:
absolute;
}
Middle
Bottom

Positioning is the same as ﬂoating, except content from other DIVs will hide underneath

<div>Top</div>
<div
<div>Bottom</div> Middle
Top

.blue
{

position:
absolute;

top:
0px;

left:
0px; Bottom
}

And you can also add other properties, like top, left, right, bottom and z-index

5. Layout aﬀects browser calculation
5. browsers miscalculate
It’s the browser calculation that makes CSS painful

When you use ﬂoat or position, it changes the way the browser will calculate surrounding DIVs

<div
class="parent">

<div
class="child"></div>
</div>

.parent
{

height:
auto; ‹ from the browser’s stylesheet
}

.child
{

height:
auto;
}

Let’s say I have this HTML and CSS

<div
class="parent">

<div
</div>

.parent
{

height:
auto;
parent height is › 100px
}

.child
{

height:
100px;
}

If I give the child of 100px, the parent DIV will have a height of 100px. The browser uses child elements to calculate the height
and width of a parent element

<div
class="parent">

<div
</div>

.parent
{

height:
auto;
parent height is › 0px
}

.child
{

height:
100px;

float:
left;
}

The parent will no longer use ﬂoated child elements to calculate its height, so as far as the browser is concerned, the parent DIV
is empty

1. Styles may not necessarily work
Properties can “toggle” other properties on and off

2. Values affect other values
The browser calculates a lot of stuff when your stylesheet loads

3. The total element size is computed
The box model can be a little confusing

4. Elements belong to a flow
Float and position affect the flow

5. Layout affects browser calculation
This makes CSS pretty painful

CSS is still hard today, and it’s mostly because of browser calculations

CSS3 will fix most of that stuff
But vendors implement the fixes inconsistently

CSS3 will fix most of those issues, but vendors implement the fixes differently and at different times

Now a short tangent. Here I am back in 2000. I have my lap top. I’m feeling cool. I’m wearing sandals and socks

When I write my web app, I decide what browsers I’ll support

function
listen(fn){

//
I
want
to
add
multiple
event
handlers
}

function
grab(id){

//
I
want
to
grab
an
element
from
the
DOM
}

function
update(elm){

//
I
want
to
update
the
innerHTML
of
an
element
}

Remember JavaScript before libraries? You need to write custom functions yourself for basic tasks

My JavaScript

I have to make sure it works in all browsers, likewise I have to educate my colleagues on the custom functions I’ve written. Hard
stuff

JavaScript Library

When JavaScript libraries became popular, I could depend on the library to take are of browser discrepancies. They created a base
for all developers to work from, and your experience working in a library could transfer from job to job

CSS preprocessor

CSS preprocessors, and speciﬁcally Compass, are the same idea. Let them worry about browser differences

SASS is a CSS preprocessor
CSS will no longer be a long string

Variables have been discussed for a decade. Why wait for browsers to implement them? The future of CSS is moving towards
being a more programmatic language. SASS is the preprocessor we’ll look at now

gem install sass

You need Ruby, you can install SASS with the command prompt or through terminal

.box
{}
.box
.content
{}
.box
.content
p
{}
.box
.content
p
a
{}

If you write CSS for sites you end up duplicating classes. There is no standard structure for a CSS ﬁle, it’s up to the developer to
create one

.box
{

.content
{

p
{

a
{} nest selectors

}

}
}

A CSS preprocessor will let you nest selectors, letting you group your CSS classes together

a:link
{

color:
blue;
}

a:visited
{

color:
purple;
}

a:active
{

color:
blue;
}

a:hover
{

text-‐decoration:
underline;
}

a.red
{

color:
red;
}

This is pretty common in CSS, marking each pseudo element

a
{

color:
blue;

&:visited
{

color:
purple;

}

&:active
{

color:
blue;

}
parent selectors

&:hover
{

text-‐decoration:
underline;

}

&.red
{

color:
red;

}
}

You can use parent selectors to add pseudo elements and classes to your HTML elements

a
{

color:
blue;

&:visited
{

color:
purple;

}

&:active
{

color:
blue;

}
parent selectors

&:hover
{

text-‐decoration:
underline;

}

&.red
{

color:
red;

}
}

So this would output CSS with an A link and a class of red

$width:
1000px;

.container
{

width:
$width;

} variables
.column
{

width:
$width;

}

You can use variables like any other programming language

$width:
1000px;

.container
{

width:
$width;

} math
.column
{

width:
$width
/
2;

}

You can even use math

@mixin
text
{

color:
#000;

font-‐size:
12px;
}

.box
{

@include
text;
mixins
}

.baz
{

@include
text;
}

You can use mixins to create a template of styles, and use them in classes throughout your document

@mixin
text($color:
#000)
{

color:
$color;

font-‐size:
12px;
}

.box
{

@include
text(#F00);
arguments
}

.baz
{

@include
text;
}

Mixins can have arguments, like JS functions, and you can pass values to the mixins

$color:
blue;

p
{

color:
darken($color,
10%);

&.disabled
{
color functions

color:
grayscale($color);

}
}

You can use color functions. For example you can have a base color, and modify that with functions like darken, lighten and
grayscale

.box
{

color:
#000;

width:
100px;
}

.big-‐box
{
extend

@extend
.box;

font-‐size:
14px;
}

You can extend classes to mimic inheritance in normal programming languages

$color:
blue;

p
{

@if
$color
==
blue
{

color:
blue;

} if statements

@else
{

color:
red;

}
}

You can use if & else statements to give your CSS logic

@for
$i
from
1
through
3
{

.item-‐#{$i}
{

width:
10px
*
$i;
for loops

}
}

You can use for loops, to output a bunch of similar CSS

@mixin
round-‐corners($x)
{

@if
$x
>
3px
{

@warn
"That's
too
round!";

}

@include
border-‐radius($x);
} warnings
.box
{

@include
round-‐corners(5px);
}

You can even add warnings that will print when you compile your ﬁles

$
sass
-‐i

>>
1px
+
1px
+
1px
3px shell
>>
#777
+
#888
#fff

SASS has a shell like Ruby, so you can test your functions before using them

compass is a collection of mixins
http://compass-style.org

Compass is a collection of SASS mixins that are already written for you

gem install compass

Install Compass the same way

compass create ‹myproject›

CD to your application directory and create your Compass project

$blue:
#0089B3;

a
{

color:
$blue;

&:hover
{

color:
darken($blue,
10%);

write some .scss

}

&:active
{

color:
invert($blue);

}

&:visited
{

color:
darken($blue,
30%);

}
}

Write some CSS, in this example I’m using variables and color functions

a
{

color:
#0089b3;
}

a:hover
{

color:
#006280;
}

a:active
{ compass compile

color:
#ff764c;
}

a:visited
{

color:
#00141a;
}

Run “compass compile” and here is the CSS it will output

compass watch
watches your .scss ﬁles for changes

Run this command to have Compass automagically detect when your ﬁles changes, and it will compile it for you

.box
{

@include
border-‐radius(10px);
}

border-radius

You can then easily use mixins like border-radius

.box
{

@include
background-‐image(linear-‐gradient(red,
white,
blue));
}

gradients

Or gradients

$blue
=
#0089B3;

a
{

@include
link-‐colors(

$blue,

darken($blue,
10%),

link-colors

invert($blue),

darken($blue,
30%)

);
}

Or link colors

ul
{

@include
pretty-‐bullets("bullet.png");
}

pretty bullets

Or pretty bullets

<body>

<div
id="root">

<div
id="root_footer"></div>

</div>

<div
id="footer">

Footer
content
goes
here. sticky footer

</div>
</body>

@include
sticky-‐footer(100px);

Or you can even automatically create CSS for a sticky footer

compass will handle the vendor stuﬀ
output styles

Notice I haven’t shown you much CSS, because you don’t need to look at it. Compass will handle everything for you, and it will
just work

it will output errors

And like any compiled language, it will output errors if you’ve made some syntax mistakes

gem update sass
gem update compass

Best of all if there are any updates to CSS properties, or a new browser enters the market, just update your gems, recompile, and
you’re done

Thanks!
follow me on twitter @jefweg

CSS Prez Reveals Common Frustrations and Solutions

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie CSS Prez Reveals Common Frustrations and Solutions

Ähnlich wie CSS Prez Reveals Common Frustrations and Solutions (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

CSS Prez Reveals Common Frustrations and Solutions