Using single property classes in CSS - FEL Nov 2015

Using single property classes in CSS Richard Bray @ceiga

This is the ﬁrst time I’ve ever done a talk

This is my ﬁrst FEL event!

Who am I?

Developer / Designer / Product Designer

Side Projects - richbray.me

The Problem

CSS has become complicated

Before Write CSS Upload it. Done!

Now Preprocessor Normal Css Post Process Minify

Now Preprocessor Normal Css Post Process Minify Server Side Language
Terminal Knowledge

Now Version Control (maybe)

Multiple ﬁles

What If?

Typical Process 1. Inspect Element in Chrome 2. Make change
in Developer Tools 3. Run site locally 4. Locate .scss ﬁle and change 5. Save and View 6. Go through process mentioned previously

New Process 1. Inspect Element in Chrome 2. Make change
in Developer Tools 3. Update and save html ﬁle

Not inline CSS

Helper (or single property) Classes

New Process 1. Inspect Element in Chrome 2. Make change
in Developer Tools 3. Update and save html ﬁle

How do you implement this?

Either

Or visit richbray.me/bricks

Similar naming convention

Or visit richbray.me/bricks

New projects only! (unless you’re refactoring)

Let your HTML do the work

Another Thing

Not a fan of @extends

Use @mixins instead

3 issues with this method

1. Lots of classes on a html element looks ‘ugly’

2. Slight chance of bloating your CSS

You Could

Or Just leave it 2 KB compressed 82.34 KB compressed

3. Media queries is tough

Desktop Mobile

This isn’t a new concept

http://ux.mailchimp.com/patterns/helpers

Thank You! Richard Bray @Ceiga https://github.com/RichardBray

http://digitalcroydon.net/event/

Using single property classes in CSS - FEL Nov ...

Using single property classes in CSS - FEL Nov 2015

More Decks by Richard Bray

Other Decks in Technology

Featured

Transcript