New Perspectives On Web Design

(C. Jardin) #1
By Harry Roberts CHAPTER 1

I know a lot of people are still on the fence about the value of preproces-
sors, but the beauty of them is that you can use as much or as little as you
need. Where managing big projects is concerned, I think preprocessors’
concatenation (@import) is invaluable. You don’t have to make use of mix-
ins, or variables, or anything else, but the ability to split your codebase into a
lot of little includes is really, really handy when working on big projects.
I use Sass, so by having files like normalize.scss, grids.scss,
forms.scss and so on, I can import everything I need to as and when
and, most importantly, where I want. Because we now have these granular
chunks of SRP CSS, we can simply move our includes up and down our
master Sass file to really quickly reorder our entire style sheet. For example,
let’s imagine this is our main Sass file that imports the entire project’s CSS:


@import "generic/normalize",
"base/grids",
"base/headings",
"base/forms",
"gui/page-head",
"gui/page-foot",
"gui/image-gallery",
"gui/date-picker",
"gui/blog-posts";


All we need to do is nudge a few lines up or down accordingly and we
can completely rearchitect our compiled output. This ability to manage
whole components as single lines rather than in their entirety makes it re-
ally easy to quickly make huge changes to the structure of your CSS should
you need to. It also means you can remove chunks of CSS you no longer
require just by commenting out one of the included files. Don’t need the
image gallery any more? Simple:


@import "gui/page-foot",
// "gui/image-gallery",
"gui/date-picker";

Free download pdf