What’s So Bad About CSS Frameworks?

CSS frameworks are by no means breaking news. There have been several to choose from for a good couple of years now, with one of the earliest and most well-known being Yahoo’s Grids CSS; we’ve talked about this previously in our blogs. What’s amazing to me is that many are failing to take advantage of these great little time-savers. A quick stroll through our CSS forum reveals plenty of people having the same frustrating, discouraging issues with floated layouts and positioning; I’m quite sure these could’ve been avoided if the developer had simply used tried and tested layout methods grabbed from a CSS framework.

Hey, hold on — put those rotten tomatoes away! I’ll explain, I promise.

Treat Frameworks like Training Wheels

One of the criticisms that’s often leveled at CSS frameworks is that it discourages the try-it-and-see approach that helps a beginner learn. Of course, it’s better for beginner markup monkeys to learn CSS for themselves, but I think there are some benefits to using a framework that far outweigh this particular pitfall.

How many of you learned to ride a bicycle with training wheels? They’re a great, fun way for a kid to gain confidence and master the fundamentals of braking and steering, before learning to balance the bike and stay upright. What’s more, it’s extremely discouraging to fall off the bike and scrape your knees.

The goal of training wheels is to build confidence by easing new riders into cycling: similarly, a CSS framework used with the right attitude can help guide new developers in the mysterious and often perplexing world of CSS layout. Newbies have the chance to see a layout working correctly without frustration, and the open nature of these frameworks makes it easy to learn what’s going on under the hood. Later, with some more confidence, techniques picked up from the framework can be put to good use when developing one’s own layouts from scratch.

So, if you’re a CSS newbie and you’re avoiding frameworks because you were told it was bad for your education, maybe you should reconsider. Try some out, see which one you like best, and give it a try! Just remember: you’ll need to take off those training wheels eventually, so be sure to use the experience to help understand how CSS works.

Have Your Cake and Eat It, Too

Another criticism of CSS frameworks is about how the frameworks are constructed. Oftentimes the framework is based on the idea of a grid, or a series of columns; accordingly there’ll frequently be a series of classes for these columns named for their presentational aspects. The popular 960 Grid System contains dozens of strange classes like .suffix_10 or .grid_3, while the equally popular Blueprint CSS goes for class names like .border or .span_5. What’s more, they contain numerous classes for every conceivable column width or margin requirement that you could need. Then, to add insult to injury, some of them have three or more separate CSS files for type, layout, print, or Internet Explorer.

Positively shocking! Should we be trying to encourage meaningful class names that describe the purpose of the element, rather than the appearance? Should we avoid bloat? Will somebody think of the browsers?

Well, of course we should, but this is hardly enough of a reason to completely discard CSS frameworks. The answer is as simple as this: you don’t have to use all that stuff, and nobody is forcing you to.

With most frameworks, it’s perfectly acceptable to use only the parts that you need, change them as required, and throw out the rest. In fact, choosing a framework with an editing-friendly license that allows you to just grab the bits you like is encouraged. Most of the CSS frameworks around the Web are licensed under a free software model that permits you to alter the code however you choose. For example, the 960 Grid System is dual licensed under the MIT license and the GNU General Public License (GPL), both of which permit free editing — while Blueprint’s license is a modified version of that same MIT license. There’s nothing in any of those licenses that will prevent you from charging for your work or asserting your copyright entitlements. All that’s required is if you intend to release the work to the rest of the world, such as in a WordPress theme or a free template, that you do so under similar terms.

So if you dislike how they work, it’s absolutely okay to rename those icky classes, rearrange them, or change them about completely. You can take out any parts that are unnecessary for your project — we even have a neat tool right here at SitePoint called Dust-Me Selectors that will help you do it. Really, it’s just fine. You could actually use one of these frameworks to kick-start your own, personal framework.

Some developers treat it as a matter of personal pride to carefully build every layout from scratch — even if it means they’re doing the same repetitive tasks over and over again. For my part, I treat it as a matter of pride to find ways to work smarter and be home in time for dinner. If CSS frameworks can help you build a more solid layout in less time, why not give it a go?

(Image credit: Beginner by joejoe7)