CSS Meetup at The Hive in Rock Hill, SC - 2014

{CSS}A Random Talk about Carolina Style

Sheetsby John Rouda

John RoudaProfessional Jack of All Trades

Elegance of CSS

What to talk about?

CSS 1, 2, 3….4? Understanding CSS Levels

Cleaning up Your Dirty CSS

CSS Preprocessors (Less, Sass, Stylus)

Mistakes to Avoid in CSS

CSS 1, 2, 3, 4? Understanding CSS Levels (versions, etc.)

CSS 1W3C Specs

CSSWG

1996 – Font Properties, alignment, etc.

CSS 2Published in 1998

Superset of CSS1

Absolute, relative, fixed, etc.

Then, we found it was all wrong, and made CSS 2.1

CSS 3Not a version of CSS (unlike 1, 2, 2.1)

Factored into Modules and modules are leveled.

Earliest drafts were in 1999.

By June 2012 over 50 CSS3 Modules were published:

Media Queries, Namespaces, Selectors, etc.

CSSWG ProcessBrainstorming

Working Draft (WD)

Last Call (LCWD)

Candidate Recommendation (CR)

Proposed Recommendation (PR)

Recommendation (REC)

Cleaning up Your Dirty CSS

We’ve all got it… let’s just clean it up.

3 Ways to keep it clean

1. Group Reusable Properties together2. Use naming Conventions3. Keep Your Tabs Straight

Group Reusable Properties

Reduce, Reuse, Recycle

SMACSS & OOCSS

Naming Connection

.

Keeping Your Tabs Straight

CSS PreProcessorsLess, Sass, Stylus and why use them at

all?

PreprocessorsLess

For those that fear command line

Download less.app

SassFor the Ruby folks

sudo gem install sass

sudo gem install compass

StylusFor the node.js folks

sudo npm install stylus -g

Reasons to Use a Preprocessor

It’s Fun!

There are frameworks built on them, such as Compass built on Sass.

Easy to install – gem install sass, or less.app

Organizes your CSS

Makes your code easier to maintain

Makes your CSS DRY

Saves Time

Gives you what CSS should have to begin with:Calculations, Functions, Variables, Nesting, Mixins, etc.

Cool Things with PreProcessors

Mistakes To Avoid5 Mistakes to Avoid

1) Forgetting Comments Always comment your code… the more

detail the better.

2) Using Inline StylesThey are a lazy coder’s way of doing

things.

3) Forgetting DRY Techniques

Don’t Repeat Yourself – Avoid repeating code…

WET = We Enjoy Typing

4) Not Using Shorthand

5) Calling it Carolina Style Sheets

Cascading Style Sheets

Thank You@johnrouda

Follow me on Twitter@johnrouda

http://www.johnrouda.com

Checkout my book

http://www.whatshtml.com/

CSS Meetup at The Hive in Rock Hill, SC - 2014

Design

Transcript of CSS Meetup at The Hive in Rock Hill, SC - 2014