CSS is Great

CSS is Awful

CSS is Great

You can do whatever you need to do, however you need to do it!

CSS is Awful

There are 8,000 ways to do the same thing. Some make more sense than others, just choose!

I wish someone would just tell me what to do!

OK!

CSS Layout

The Right Way

Blocked elements

Right Way

Create block or inline contexts for various elements. 

 

Want your <a> element to be a button, make it block or inline-block.

Wrong Way

Create complex layouts trying to use just Block, Inline and Inline-Block

 

Want to create a grid of 3 items DON'T use inline-block.

Floated elements

Right Way

Want an element to have text wrap around it? Use floats.

Wrong Way

Literally anything else.

Positioned elements

Right Way

When exact placement matters.

Wrong Way

Should only be used for minor things.

Flexed elements

Right Way

Use when your content's size matters. 

 

Use one one-directional layout makes sense.

 

Use when a browser doesn't support Gridded content.

Wrong Way

Save yourself a headache don't try to use it in a column.

Gridded elements

Right Way

Use Grid when your layout itself should control size.

 

Use Grid when two-dimensional placement makes sense.

Wrong Way

Create a 12-column grid and pretend that it's Bootstrap.

More In-Depth

What would you like to see?

Made with Slides.com