Beginner’s Guide to Web Development
CSS Preprocessors and Frameworks
4 minute read
CSS preprocessors and frameworks are both tools to help developers save time building websites. A CSS preprocessor is its own language built on top of CSS that adds scripting functionality. A CSS framework is a prewritten style sheet that includes its own layout and theme for user interface elements.
CSS is designed to be a simple language. It’s intuitive to learn CSS and write it on small websites, but on larger, more complex websites, writing CSS can become very tedious. That’s where preprocessors come in. Developers wanted more options when writing their style sheets, so they created CSS preprocessors to add programming functionality.
- Addition, subtraction, multiplication, and division. Writing out math problems makes code easier to maintain in the future and helps avoid scary “magic numbers” that get pasted in without explanation.
- Variables. An example would be setting a color variable in one place and then referencing it multiple times throughout a style sheet.
- Functions. For example, the built-in percentage() function that turns any number into a percentage value in CSS.
- If/else conditionals. Conditionals are useful for toggling CSS throughout a style sheet or even switching between an entire light or dark theme.
- Loops. Loops help avoid repetitive code when writing things like grids or creating individual classes for a bunch of different colors.
These features are present across almost every programming language, so it’s no surprise that developers would want them in CSS, too.
But how do preprocessors add their own features to CSS? Well, they work by compiling special style sheets into plain CSS. That means a developer can use variables, functions, loops, and more throughout their style sheets, and the preprocessor will compile everything into CSS that browsers can understand.
CSS preprocessors are tremendously useful, but they only make it easier to write CSS — they don’t come with their own styles. That’s why CSS frameworks exist.
CSS frameworks contain prewritten styles for common design elements across the web. Websites today often need a lot of the same things: buttons, tables, forms, and grids, for example. CSS frameworks offer a quick and well-documented way to style all of these and more.
Frameworks like Bootstrap and Foundation are popular open source projects with hundreds of contributors. Their code is well tested by developers all over the world. If something breaks, it’s sure to get reported and fixed by the community. Their popularity also means there are a lot of plugins and themes available for more specific features.
Let’s take a closer look at some of what Bootstrap has to offer, like tables. Tables can be one of the most tedious things to style in CSS. The browser default tables look pretty rough, and it takes difficult CSS to get them looking nice. Luckily, Bootstrap has its own styles for tables that look good and are quick and easy to work with.
Almost every website needs some kind of grid system. Twelve-column grids are the most popular because they allow layouts to divide into halves, thirds, fourths, and so on. Setting up a 12-column grid that’s responsive across different screen sizes can be a lot of work, but using a CSS framework like Bootstrap means developers can start their project with a grid system already in place — which means they can focus on the more interesting and demanding aspects of development.
A lot of CSS frameworks are built with preprocessors, too. It’s not a one-or-the-other decision — developers can use one, both, or neither.
CSS preprocessors and frameworks can both save developers a lot of time building websites. They offer features and convenience that aren’t possible when writing CSS from scratch, and their growing popularity proves just how useful they are.