Web Designer Freelance Interview Question:

Tell me what are the advantages and caveats of using a CSS framework such as Bootstrap or Foundation?
What's the proper way to include frameworks in your workflow?

Submitted by: Muhammad

☛ Advantages: Frameworks allow for fast prototyping of layouts, elements and pages, and promote reusability of consistent elements across the whole project. This often eliminates the need of dead end deliverables such as Photoshop mockups or other high-fidelity static sketches. In contrast, the HTML prototypes powered by a framework later evolve into the actual production templates code used by the new site. Another advantage is the myriad of development tools that come with the better frameworks: LESS/SASS preprocessors, variables for key values in the design, builder tools like Grunt/Gulp, ready to use JS scripts for commonly used interactions (modals, carousels and collapsing boxes, among others). Finally, frameworks come with good practices and commonly used pieces of standardized, well documented code built-in, and a large community to turn to when issues arise.

☛ Disadvantages: Although frameworks provide tons of built-in features and eliminate the need to write repetitive code, they also tend to generalize common elements and often lead to samey-looking designs. Another caveat is that when using a framework for a complex or unconventional design or a layout with a more complex grid, there's more effort involved in "fighting" the frameworks compared to simply writing the code from scratch. Sometimes, frameworks come with too much stuff that never gets used, or redundant styles that get overridden if not used correctly, leading to slower load times compared to a clean code written from scratch.

To properly utilise a CSS framework, developers should not include the compiled CSS of the framework and then write their own overrides. To take full advantage of the framework, the built-in development tools should be used: variables to be set, LESS/SASS mix-ins to be utilised, and the unused components to be excluded. Another frequent mistake is the heavy reliance on framework markup for layout and styling, which makes the separation of content and style harder and leads to design changes requiring editing HTML instead of CSS.
Submitted by: Muhammad