Home > Meeting Notes, Programming > Function Pink Meetup 2013-04-11

Function Pink Meetup 2013-04-11

Defensive SASS Modular Styles for the modern web John Long @johnlong

John was introduced by meetup rangler Les James. He started out by explaining that he would be mainly talking about modularity in SASS. John works at UserVoice. and writes for fun at @thesassway “the latest news on sass + compass”.

He started out talking about an example of 10k line css file he had to rangle. He got interested in using SASS due to the complexity of working with such a large file.

His examples are out on a site

http://bit.ly/menu-1 is his first example

Worked with child selectors and the code gets very complicated.

Ex. http://bit.ly/menu-2 adding classes to menu bars.

ex http://bit.ly/menu-3 adding more ultra modular approach.

dont think in terms of selectors. think in terms of objects.

Parent-child pattern..tableview, tableview-item, tableview-item-cell.

http://bit.ly/modular-tableview example. he uses multiple classes within the class field to get better modularity.

Plural Parent Pattern .faqs, .faq, .faq-title as an example

Parent-child used to declare (not enforce) object hierarchy for the dom.

subclassing-.item, .ticket-item, .article-item

uses codepen.io for examples.

subclasses used to declare that one object should inherit from the other.

contextual classes .item, .ticket .item, .item .title

difficulty with this is that someone could come along and define “title” and everything goes out of whack.

subclassing is almost always better.

Is there a penalty for using many classes, probably not.

make code clear, avoid premature optimization in css for performance.

Modifiers: use for state is-selected, is-active, etc. has-menu, no-border, no-margin, etc. other: primary, secondary, etc.

generic modifiers: .is-hidden {display: none !important;}

the ampersand operator is a general modifier.

specific modifiers: use nesting and the ampersnad operatior

modifiers: used to change attributes or state on an existing object.

modifiers vs subclassses

Naming scheme

objects tend to be nouns, child  noun-noun, subclass adjective-noun, modifiers prefix-adjective or adjective.

modular typography http://bit.ly/modular-typography

compass is a open-source framework for Sass http://compass-style.org/

@import “compass”

@include “global-reset”

reset vs normalize

reset-zeros out styles on all elements

normalize-normalizes styles across browsers so that all browsers share a simliar stylesheet.

some surprises-

don’t stule with IDs or tags (classes are better)

contextual styles are mostly evil (avoid nesting)

more markup and less styles (often much easier to maintain)

smacss.com, thesassway.com, github.com/stubbornella/oocss, joshuarudd.github.io/typeset.css/


http://bit.ly/defensive-sass-april-2013 is the presentation.



I give his presentation a thumbs up.

His slides are available.

His code examples are also available.


Categories: Meeting Notes, Programming
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: