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
littlebusters
uxevents
morganepeng
magi1125
mayunak
nextbeat
okazakityo
root_recruit
revolveconf
kastner
addyosmani
kneath
schacon
productmarketing
erikaheidi
edds
hannesfritz
gr2m
eileencodes
lara