systematic-css

Web design methodologies benefit all kinds of web projects, big and small. They benefitfreelancers who work on their own. And they are absolutely essential for large, labyrinthine,long-running projects, or where the team members have widely differing specialitiesand abilities, or where there is a high staff turnover. In these scenarios if a web designmethodology is not put in place from the outset, a codebase can rapidly snowball into anunmanageable mess. And that's all it takes to cripple a web startup.A few entrepreneurial types have developed their web design methodologies into formaldesign systems and published them for everyone's benefit. Nicole Sullivan's Object-OrientedCSS Framework (OOCSS), published in 2009 (https://github.com/stubbornella/oocss/), wasthe first web design methodology to become widely adopted. It is still hugely influential.Jeremy Clarke's Don't Repeat Yourself principles (DRY CSS), presented at ConFoo in 2012(https://vimeo.com/38063798), has similar goals to OOCSS, but offers a very differentsolution. Brad Frost followed up with a widely circulated blog post titled "Atomic Design"in 2013 (http://bradfrostweb.com/blog/post/atomic-web-design), which got us thinkingabout web interfaces as a hierarchy of progressively more complex objects built up from lotsof smaller ones. Other popular web design methodologies include: Block Element Modifier(BEM, http://bem.info), developed by the dev team at Yandex; Jonathan Snook's Scalable andModular Architecture for CSS (SMACSS, http://smacss.com); and Nicolas Gallagher's SUIT CSS(http://suitcss.github.io), which combines a class naming system with extended CSS syntax.About this bookThis book presents a brand new web design methodology – mine. This is how I write CSS.It is a system that I have developed over a period of at least three years. It is influenced bymany of the ideas and conventions of existing web design methodologies, though the practicalimplementation is generally much simpler. There is less to remember.An abbreviated version is published online athttp://www.systematiccss.comThis is a pure CSS methodology, though it works equally well whether you are writing Sassor Less or any other superset of CSS. Personally I use only a limited amount of extended CSSIntroduction 4