CSS = WTF HTML is viewed in situ... Has no interdependencies... Is, by nature, self-explanatory. CSS relies on inheritance... The cascade... Specificity.
CSS PREPROCESSORS Sass > LESS Excellent when used correctly Provide a disconnection Less useful than a knowledge of architecture Makes nothing better, only faster to write Still only generating CSS
OBJECTS > COMPONENTS Components are still cumbersome so... Break components down further as... Objects and abstractions are more useful. Can reuse a nav abstraction way more than .main-nav
USER-ACTIONS MENU No IDs, lots more markup and classes, a LOT less CSS. Bespoke HTML and CSS (once compressed) weighed 147 bytes LESS than the Google favicon! Abstractions come free-of-charge, they are already there and free to use over and over and over and over and over...
KEEP SPECIFICITY LOW NO IDs IN CSS!!! Write rulesets in specificity order Avoid qualifying selectors Avoid unnecessary nesting Avoid chaining selectors
WRITE RULESETS IN SPECIFICITY ORDER Reset, elements, objects, components, style trumps Not in occurrence order (e.g. header, page, footer) Subsequent rulesets should only inherit, never undo
AVOID QUALIFYING SELECTORS p.intro{} -> .intro{} Increases specificity — extra selectors Limits reusability — e.g. cannot be used on an Less efficient — more work for the browser
TABLE OF CONTENTS AND SECTION TITLES /* RESET.......Undo defaults MEDIA.......The media object MAIN........HTML/BODY, wrappers SITE-NAV....Page’s nav bar FOOTER......Disclaimer, links */
SAY WHAT NOW?! Write less CSS Reuse more CSS — design patterns! Let the HTML do some work for a change! Get some rules, stick to them Comments, comments, comments!!! People are human
csswizardry
uxaustralia
ryuuuuukun
mixil
juliantruitt
yuriemori
sizucca
onlinesalon
ncdc
mistrysia
5kaichi
yuyaink
scottboms
mojombo
bcantrill
samlambert
davidbonilla
tanoku
garrettdimon
danielanewman
sugarenia
lauravandoore
malarkey
swwweet