CHAPTER 1 Modern CSS Architecture and Front-End Development
you’re unlikely to ever pay that back all at once; you pay several hundred
dollars a month in order to make that huge total more manageable. When
you’re spring cleaning your house, you break it into smaller tasks: clean
the bathroom, vacuum the carpets, wash the paintwork. Breaking things
down is just a common-sense approach to tackling larger obstacles one
step at a time, and the same applies to building websites.
When faced with building a large-scale front-end, it is important to
not look at the bigger picture. Zoom in and spot smaller tasks that, as
you’re completing them, chip away at the project as a whole. To borrow yet
another saying, take care of the pennies and the pounds will take care of
themselves. Or, as my good friend Jamie Mason^11 likes to say, “take care of
the bits and the bytes will take care of themselves.”^12lego
One of my favourite analogies for breaking code down is from Nicole
Sullivan. She said that you should treat code like Lego; many smaller,
simpler chunks can be combined and arranged to make a huge variety of
structures. With a box of assorted Lego pieces you could build a car, or an
airplane, or the Eiffel Tower, or Big Ben, or anything! All by combining the
same little tiny pieces in different quantities, in a different way, and in a
different order.
So, instead of looking at your project and preparing to build a mono-
lithic contact page, think about combining a series of inputs and buttons
inside a content area, which is next to a subcontent area, which in turn is
surrounded by a header and a footer. Stop thinking in terms of pages and
start thinking in terms of components. If you need to build a search form,
you can probably reuse and repurpose the same inputs from the contact
form. Breaking your code down into Lego-like chunks gives you the ability
to do a lot more with it.11 https://twitter.com/GotNoSugarBaby
12 https://twitter.com/csswizardry/status/334962253029838849