Most contemporary web developers recognize the importance of using an application framework when developing for the web. From Ruby on Rails to the litany of PHP frameworks available to up-and-coming Node.js offerings, application frameworks substantially reduce development time while improving code readability and standardizing development practices for the web. Surprisingly, though, many developers continue to handcraft their CSS for each application, or copy-and-paste legacy layout styles to new projects. CSS frameworks improve developer workflow for a few key reasons:
1. CSS frameworks standardize layout code.
Handcrafting layout code or maintaining your own company styles is a functional solution, but it reduces readability. New developers, or developers working on new projects, must learn the terminology and intersectional usage of a number of styles before they can step in to make changes. Custom stylesheets that have passed through a number of hands often accrue a number of outdated, conflicting, or repetitive styles that further worsen this problem. Regular refactoring can solve this problem to an extent, but who wants to waste time rewriting old CSS?
CSS frameworks standardize layout code because each class in the framework has the same meaning across applications, in much the same way that each element of an application framework connotes the same functionality across projects. This keeps stylesheets short and readable: each developer can learn the framework styles once, and only have to use custom styles for application-specific colors and layout elements.
2. CSS frameworks solve cross-browser compatibility issues.
A mature CSS framework, such as Bootstrap or Foundation, will have undergone an extended period of open-source development. This means that layout issues with old browsers have often been sussed out already, eliminating most of that feeling of shock you get when you first open your site in IE7. Cross-browser testing is a must for any project, but a good CSS framework will solve many problems for you before you even notice them.
3. CSS frameworks play well with mobile devices.
CSS frameworks are generally built around responsive principles, automatically optimizing content and even menus for the mobile web. While application-specific tweaks will need to be made, frameworks drastically reduce the time necessary to create a great user experience on mobile platforms. Additionally, some frameworks, such as Foundation, include layout elements that allow you to control the flow and order of layout elements as they are resized downwards.
Which framework?
The two most common CSS frameworks being used today are Twitter’s Bootstrap and Zurb’s Foundation. Both offer the advantages mentioned above and neither is a poor choice; however, they have different focal areas that make each one a better choice for different types of projects. Bootstrap has traditionally been focused more around desktop than mobile, although this has changed to an extend with its most recent release; if battle-tested responsive behavior is important to your project, Foundation is the better choice. Additionally, a number of developers tend to adhere too closely to stock Bootstrap in their implementations, creating a “Bootstrappy feel” that plagues a number of websites. Foundation doesn’t tend to create this effect, but that may be just because it’s currently the less popular of the two. Finally, if your application is in Ruby on Rails, Foundation is the far superior choice; it is implemented with SCSS classes that allow you to easily create mixins and adjust variables to easily access powerful customizability. Whichever option you select, though, use of a CSS framework will go a long way towards building a powerful, beautiful application with readable, well-maintained styles.
