SMACSS notes May 18

smacss-notes.txt

SMACSS May 18

Part 1

- Don't use .button.large ... no subclassing for size or color definitions, try to use .button-large and sibling classes instead
- Naming convention clarifies intent (you should be able to read semantic HTML or CSS and know what it does)
- Create an internal style guide that the team refers to (!) - relates to docs efforts ongoing

State: active and default states; .tab and .is-tab-active (indication that JS will be used) - isolate JS classes so that you only have to make changes to the CSS
    - is- prefix indicates likelihood of JS dependency
    - is- is toggleable state
    - states that are specific to a module should include module name

Theme: (a.k.a. site.css)
    - .theme-header, .theme-border, .theme-background
    - .text-plus1, .text-minus1 (is this semantic?)
    - always specify background color and color for elements (assists with page draw)


Part 2

	Limit applicability 

	Reduce depth
		- use less selectors, preferably one
		- use child selectors to limit depth

	State representation
		- classes (JS dependent)
		- pseudo-classes (:hover, :focus)
		- attribute selectors (.btn[data-state=default,pressed,disabled])
			- review pointer-events: none;
		- media queries

		/* avoid this! */
		.btn.is-active .menu {
			display:block;
		}

		CSS3 ui module with HTML5, form validation example

		*** - include the media queries with the modules they affect

	Modularize
		- find repeatable patterns
		- accept that class names may describe a visual state
			- e.g. big and small
		- keep them separated

		"As someone who is building the HTML and CSS, you are the arbiter of design."

		base.css
		layout.css
		grid.css
		button.css
		carousel.css
		modal.css

			- benefits of conditional loading
			- yahoo example, combo handler
			- single file sent to end user

		Integrating JavaScript
			- scripts are written for individual modules
			- states are modified, no inline styles

Part 3: Process

	- SASS
	- Less
	- Stylus

	Preprocessors

		- Variables
		- Nesting
		- Functions (aka Mixins)
		- Handles compilation of files into final product

		gem install sass (used at Shopify)

		# or even better:

		gem install compass

		$ sass --watch before:after

		http://compass.handlino.com

		Nested Media Queries == awesome
			- .nav > li => @media => @media

	Prototyping
		
		- Build and test individual components
		- Allows for front-end development independent of engineering
		- Create centralized repository for multiple projects
		- Proto Engine can use different technology than engineering
			- JSON
			- Template
			- l11n
			- HTML
			- CSS
			- JavaScript

		Mustache

	Performance

		- Pull in style sheets when you need them
		- Smaller rule sets make it easier on browsers
			- Google Page Speed recommendations

		Layout and reflow are huge gotchas -- eliminate reflows

		Address selector performance

	Larger teams

		- separation of files allow multiple members of the team to work on separate files
		- modular approach works well with OOP on server side (hence OOCSS)

	Small vs large sites

		- Smaller sites don't have multiple people on it
		- Smaller sites don't change as often

Part 4: Examples

	Twitter bootstrap
		- scoping families of classes with prefix (e.g., modal-header instead of .modal .header)
		- stopping the cascade of CSS, or at least limiting it (e.g., .modal-title instead of .modal h3)
		- avoid element tags in selectors
		- Uses Less

	Extending Fireworks

	OOCSS stubbornella

		- a CSS "object" is a repeating visual pattern
		- separate structure and skin
		- separate container and content

		Base: Uses base reset and font from YUI
		Layout: Has a grid system
		Modules: comes with a few out of hte box
		Skin: themes separated
		
	Icon Module

		- traditional vertical sprite file as example
		- <li><i class="ico ico-16 ico-inbox"></i>Inbox</li>
		- create a mask around your sprite icons, allow clustering of icons in sprite file and reduce file size

	5by5

		- display:inline-block;display:inline;zoom:1 -- zoom:1 gives IE7 hasLayout
		- pointer-event:none really useful for interacting with elements behind other elements
		- use head tags as tabs with divs instead of ul li div
		- always use href #item anchors linked to objects on the page relying on JS so that link to those objects is still functional with JS turned off (follow semantics and accessibility) -- what about :focus for accessibility?
		- @media testing for performance? no studies known
		- Steve Souders study on CSS performance

	Mustache
		Could we use this to decouple django/python/html/css more?



Fin

	http://snk.ms/sres
	jonathan@smacss.com