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.

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?

Raena Jackson Armitage is an Australian web developer with a background in content management, public speaking, and training. When she is not thinking about the Web, she loves knitting, gaming, all-day breakfasts, and cycling.

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

http://manwithnoblog.com tuna

Totally Agree.

All comes down to roll your own, take the best from the frameworks and use with caution.

Some would say they are just for prototyping. But all too often that prototype code ends up in production.

Nice to learn from, but don’t use them as a crutch, for like a crutch they will hold you back in your understanding of CSS.

Dean

CSS Frameworks can impose an irrelevant CSS Architecture&trade, and Front End Developers can tend to think less when using them. As long as the thought process of implementing a CSS system remains in tact, CSS Frameworks can be helpful.

#1 Most Common CSS Framework Fail – resetting padding and margins of a bunch of (or all) elements (even ones that aren’t even in use) to zero, without a reason to do so. It’s down right stupid!

Control your CSS, don’t let it control you.

(Bury me… Sorry, wrong site.)

Michael Long

All of which only serves to illustrate just how much of a hack it is to actually work with today’s CSS “standards”.

M

I’ve used frameworks and it doesn’t mean you can avoid knowing something about how CSS works. It just helps make it a little quicker and you always have div ids to play with.

asbjornu

The biggest gripe I have with CSS frameworks is that they are so amazingly badly built. The class names and id’s are mentioned; why the heck can’t they try to at least appear semantic? And why would you need a unique class name and id on almost every god damned element in the whole HTML document?

For a three-column layout, three class names or ID’s should be more than enough. The structure should take care of the rest of the styling hooks required. It seems like the builders of these frameworks live inside the “an element without a class name or ID can’t be styled” bubble.

Of course this is pretty advanced and not really for your green html/css pupil.

I just picked it up this week and it makes a lot of sense :)

http://www.tyssendesign.com.au Tyssen

Use compass…

Pity most of the links end in 503s.

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

By the time you’ve done all that, you probably would’ve been better starting your own from scratch.

madr

OH come on! Does anyone actually believes that CSS newbies have the courage to rename classes in CSS framworks, or even are able to get the idea?

I bet they don’t.

There also is a lack of solidness in the training wheels metaphor: Training wheels is, for real, for newbies. It is a pure DEGRADATION to use training wheels. People force themselves to do training wheels, and when they are no longer needed, people throw them out, happy to manage the “real” thing and to be upgraded to be like the other folks.

Frameworks do not work that way. They try to be BETTER than the real thing. People who uses frameworks see themselves as BETTER THAN people which work in “real” world.

@madr, having trained a number of people in the past, I’m here to tell you newbies can indeed rename classes. Take my word for it or don’t, but it isn’t hard, and this kind of muddling-along approach is hardly unusual.

People who uses frameworks see themselves as BETTER THAN people which work in “real” world.

In general the problem with people who think they are better than others is their attitude, not what tools they use.

http://www.mikedesign.net/ mauteri

I’m not a big fan of frameworks, except maybe JavaScript ones because of how differently the language is handled by different browsers. As far as CSS goes, I think as a newbie you need to learn and write all your CSS from the beginning. That’s the only way you will learn how each browser handles your code, so when you run into little browser quirks later that actually require your experience with CSS, you will know what code has to be written to remedy the problem. Plus, you will have your own library of code that you will know like that back of your hand, so making changes and finding issues will be a cinch. Also, the whole problem with that training wheels analogy is that a lot of people don’t know when to take them off. Further, if you rely on a framework, do you really know CSS? Just like if you rely on a WYSIWYG, do you really know HTML?

Reformed Training Wheels Junkie

Your training wheels analogy fails on so many levels. I used training wheels for what seemed like years when I was a kid. Did it make me a better bicyclist? No. I was terrified to remove them. I didn’t think I could ride without them. One day, my dad removed them and forced me to learn for real. It took all of 5 minutes before he let go without my knowledge and I was doing it all by myself. Balance is the hard part, steering and breaking are easy.

CSS is not intuitive. Rebranding a library of code and calling it a magical “framework” (a word I loathe to use because it’s not a framework at all, but a library) is not going to change that fact. Resets and libraries like Tripoli are a nice starting point for someone who knows what they’re doing, but entirely inappropriate for a new coder. Just like training wheels, they fail to teach what is hardest to learn. In the case of CSS (though not the fault of CSS itself), is browser inconsistency and how to deal with it.

Libraries are well and good, but without a solid foundation in debugging browser behavior, you’re left on unsteady ground when it comes to new browser versions.

http://www.fonant.com Fonant

Liked the reference to bicycle training wheels (we call them stabilisers in the UK). Current cycle training thinking says that training wheels actually hinder the learning process: how can you learn to balance when the silly little wheels keep preventing you from leaning the bike as required? How do you lean to turn a corner?

Our twins are on the verge of being able to ride pedal bikes, aged just three and a half. That’s way younger than I managed. They started (aged two and a half) with basic wooden bikes with no pedals or brakes. Within a few hours they learnt by themselves how to scoot along, balancing quite naturally. Now they can balance, adding in the pedalling has taken about an hour in short bursts over two days.

What this has to do with CSS frameworks, I don’t know :)

Justen

I think you’ve sort of missed the point of semantic HTML & CSS. If I have to create a layout by creating wrapper elements and applying specific classnames to them (even if I can rename them to something less obtuse), I have already mixed up my presentation with my content. At this point I might as well slap some tables on there and chuck out the framework, as I’m going to have to get into the markup and change a bunch of stuff around next time I change a style anyway.

If you want to automate the process you’re talking about, consider developing a personal template & meta-style. Build a blank slate html document with a set of standard semantic class names that will almost never change from site to site, and pair it with a blank slate stylesheet. You can add elements you need specially for the site, or remove ones you don’t need in this instance. You can even use a nasty little framework if you like, but instead of applying the framework’s classes to your markup change the class names in the framework to match your standard set of classes. Once you get used to working like this you get the best of both worlds: a great jumping off point for new sites and semantic HTML that you, or another designer down the road, can understand and restyle without fiddling with the markup.

neovive

It really comes down to a tradeoff. The current limitations of the widely-deployed CSS implementations are quite frustrating when working on layouts — especially when dealing with IE 6.

Unless you have a real need to drastically modify the design of a website without the need to rework the underlying markup structure, using a CSS framework could save you some time. They also provide the added benefit of common naming conventions.

Arlen

You’ve oversimplified things, raena. I’m one of those real-world guys who builds everything by hand. That does *not* however, mean I’m continuously retyping the same old things for every project.

I have a continuously evolving “standard” document skeleton with standard class/id names for bits and pieces, which I use or toss out of the files, depending on the project at hand. Then I also have a standard set of css files I pull from, and custom-tailor for each project.

I tried to use a couple of the frameworks some time back, but was dissatisfied with the cruft, and the effort it took to understand it all well enough to know what I could profitably do without, especially since I already had files I understood thoroughly sitting right there on my hard drive, ready to hand.

I’d recommend against frameworks for beginners, simply because it’s easier to teach them how to write good markup and style selectors/rules than it is to help them understand how to use the long list of classes/ids in a framework (I remember one student who was sure he needed a different div for each class name he applied, for example).

That said, I certainly wouldn’t bar an advanced beginner from looking into frameworks, to see what could be profitably taken away from them. Frameworks *should* be studied by everyone; knowledge never goes to waste. But not every project can or should use them.

And there *is* certainly a place for frameworks. It’s not on the every-page-the-same projects that make up 98% of the work that comes in the door, but in those rare publication-style websites, that want slightly different looks from page to page, because of widely varying content or simply to keep the designs interesting and fresh. Those projects demand both a good dose of javascript and a robust framework to hang the work on.

http://www.heyraena.com raena

I have a continuously evolving “standard” document skeleton with standard class/id names for bits and pieces, which I use or toss out of the files, depending on the project at hand. Then I also have a standard set of css files I pull from, and custom-tailor for each project.

Sounds kind of like a framework to me… it’s just one you made yourself. :) I have one too.

I tried to use a couple of the frameworks some time back, but was dissatisfied with the cruft, and the effort it took to understand it all well enough to know what I could profitably do without, especially since I already had files I understood thoroughly sitting right there on my hard drive, ready to hand.

You’re absolutely not alone, and I think there’s a time and effort related kind of thing there. If you’re already set up to go, then why use one? I’m certainly not saying they’re for everyone.

I’m very mixed on this issue. I think if frameworks were used as the article describes, they can work pretty well. I’m a big fan of the “learning from examples” methodology. When I first started learning HTML way back when that’s how I did it because there weren’t many tutorials yet.

However, at the same time, because I’m such a fan of this method and I’ve taught using the method before, I also know that people often end up stuck inside of the “bubble” that you create and can’t think out of the box or come up with new ideas or solutions other than those they’ve seen in examples.

It’s a real catch-22.

okparrothead

@asbjornu
You are so right! I’m up to my neck in Magento right now and every element has two or three classes and there is no cascade, every element is styled separately. Nightmare all around. It’s even worse when there is more than one person developing the site. Add a little here, add a little there, pretty soon its a cow.

@Justen
Right you are. I’ve built my own two and three column templates and some global classes for all of my homegrown sites. I only have to add new selectors if I add new elements. The code stays groomed and the overhead is small. Initial investment has payed off well.

For everything else I use the Dust-Me Plug-in for Firefox. It tells me which css selectors are unused so I can eliminate them from the code.

I don’t think training wheels are any good…they’re a marketing scam! ;-) Why? Because what’s the difference between training wheels and putting your feed on the floor and pushing off until you learn. I think I learned to ride a bike in less than a week by doing this when I was a kid, while other kids seem to be delayed by holding on to their false sense of balance. In my opinion it’s better to bite the dust once or twice when if you really want something to stick. There’s lot of stuff on the web you can use “training wheels” and it ends up taking forever to feel proficient with it.
As far as CSS goes, I learned the hard way and as a result it’s ingrained in my brain. A few more iterations by myself and I would have spontaneously created my own CSS framework. In the end, that’s what these are. People who have done CSS production so much noticed consistent patterns which they then compiled neatly and shared. If you pick up a framework as a newbie you’ll never really learn what it’s like to battle with IE6 (and I think that may be a good thing. After all, Bill Gates is now a nice philanthropist and you don’t really want to hate a philanthropist). I mean really, who in their right mind is going to take time to understand a framework during production? Most of us don’t dig into WordPress/Drupal code to understand how core functions are written…that is, unless we really really need to. Production efficiency always takes priority as a professional, and most of the time becoming a Guru will go by the wayside as deadlines approach. There’s a good chance I would have tossed my valuable “hard-knocks” learning experience aside if I would have discovered frameworks as I climbed the CSS mountain.
So, if you’re in school and sheltered by academia, I recommend learning without wheels. If you’re a pro and need to produce high quality fast, use FWs and focus on essentials…unless you’re a guru.

http://www.yellowshoe.com.au/ markbrown4

We’ve created a layout framework at work so that back-end development doesn’t have to require a lot of front-end skills.
I imagine most large development teams would create their own frameworks.

I’ll be watching these frameworks grow and pick out the parts that work well putting them into use.
I haven’t yet built a site using one of the public CSS frameworks though.

—

A framework is an important thing to put in place if you want to be highly productive.

timothytrice

I just did a tutorial that dealt with the basics of 960 and I have to say I don’t understand why there’s an “IE vs. Firefox” debate going on. You talk about semantics? What’s so difficult to understand if I assign the class .grid_10 it’ll span 10 grids or columns? If I additionally assign the class .prefix_3 and .suffix_3 it’ll center grid_10 in a 16-column layout. If I want .grid_10 to be on the first row with everything else reset use .clear. And if I have three child div’s in the same row use alpha and omega.

What I don’t like about 960 is it’s static width. So I found Fluid 960 and have begun using that. What I like about it is that even though it’s fluid, I can still static any part of it I want to (navigational menus, sidebars, etc.).

I suppose it’s reasonable to understand some will fight it (I’ve yet to try Blueprint, Grids or Compass but I’m looking forward to it, soon). Most people don’t like change. But most of you are trying to or are making money off this. If you don’t have your own quality setup, why not try it? Better than wasting money building your own!

http://FragosTech.com fragos

For my taste the frameworks try to solve too many cases and lead to bloated sites. I prefer to code myself for specific designs and do reuse code I’ve created before — silly not to. You can always learn from what others have done but sometimes I get the feeling that examples offered are coded to publish and aren’t really examples of what one might have used and refined for a particular site. Still some of these examples have served a purpose as working samples to see the code in action.

On the other hand, I’m not sure if they are considered frameworks but Paul O’Brien’s CSS examples is the perfect choice for a beginner who would like to use ready-made CSS as well as editing them for their neeeds.

tactics

I agree with what most others have said here – any benefit gained from using frameworks is outweighed by its drawbacks. And I’ll add a few more others haven’t mentioned:

1. Grid layouts destroy accessibility. With grid layouts, you have to write your content in the order you want it to appear on the page from left to right, top to bottom, rather than in the logical order it would be read without styles. So when a person using a screenreader encounters a page built in a grid, it becomes completely unreadable.

2. CSS frameworks are completely counter to the concept of “The Three Layers of the Web” (a great article published elsewhere on this site) because they require you to write your code with aesthetics in mind. Developers should write their content first, with no regard to how it will look in the end.

3. If you build your site using a framework, and you decide to change the layout later, you have to go in and edit your HTML, not just your CSS. I build all of my sites using the same basic HTML framework, but with completely different CSS. That allows me to have complete control and flexibility over the design, and change the entire look and feel of it whenever necessary.

John

Most developers have their own set of templates to start from, developed over the years. I don’t see the point of using templates which are stuffed with junk classes that nobody ever uses. Style sheets should only contain styles that are actually being used, if you ask me. All the rest is dead weight. That said, I can imagine that css frameworks are good as a case study.

Me

CSS framework is good, provided that you know it from the root.
Using the framework of others without inspecting is fail.

I dont use other’s framework. I create my own css framework, that is only suitable for me and no one else.

CSS is like an art, you have to be original on your own and be unique.

http://www.webarnes.com webarnes

First thing is frame works are bloated and over complicated. The second thing that I find and as noted previously they are based on columns. one column, two column, three column.

Wicked wrong.

A skeleton framework should be in rows.

I could type all day trying to explain. So here is a very simple skeleton that can modified in a snap:

I used the YUI framework before, and found it extremely limiting. I still use their css and fonts reset, but I wouldn’t go back to the grids.

bloodofeve

I must say that this is an eye opener for me I’ve been hand coding css for about 7 years now, and I’m glad I read the article.
All I will need to do is find a grid system that works from 780px wide upwards, or try developing my own. I do like the idea of being able to produce magazine style websites which aren’t bloated.
but the biggest thing that does concern me is what “tatics” wrote about frameworks not being accessible – I produce accessible websites and this seems a non scematic markup system.
I guess it can’t be all things to all men, but there again it’s up to us to make the right choice when producing a css based website that ticks the right boxes.

http://www.patricksamphire.com/ PatrickSamphire

There appears to be a false dichotomy in some people’s minds here. For a lot of people, it’s not a choice of ‘use a CSS framework or learn CSS properly yourself’. It’s more like, ‘use a CSS framework or lay it out with tables’.

Because there are still an awful lot of people out there who have no interest in really learning CSS. They want a simple, personal site. For them, using a framework that’s relatively easy to understand is a big advance on the dreadful tables-monsters they would otherwise do. I see this as a positive thing and progress towards a better web.

Not everyone is a professional developer and not everyone wants to be.

Jared

I’ve tried a few of the frameworks out there and most are bloated and I don’t really see the need for them and I enjoy the freedom of creating my css to match the design, not creating my design to the framework’s rules.

Compass is an exception and is the only framework worth using in my opinion, take the idea of a css framework and gets rid of all the non-semantic garbage. I don’t really use any of the framework aspects of compass, but I take advantage of the ability to write SASS stylesheets with it.

hallodom

Thanks for the post! I write CSS but why I never thought about looking for frameworks for it I’ll never know! Thanks for the info will be experimenting with these new CSS toys!

Arlen

Let’s clear something up about grids:

Grid-based design is good design. The designs that look the most pleasing to the eye are based on grids. When they’re not based on grids, they look jumbled and chaotic.

Grid-based design does *not* have to be in column-priority order, and it does *not* dictate the load order. (Tables-based designs do, but we’re talking about grids, not tables.) Jason Santa Maria’s recent work on art direction for the web, and his modular layout system from 24Ways is a case in point.

As general rule, people talk of columns on the web, for two reasons: one, it’s easier and more accessible to scroll down than sideways (certainly far better than scrolling both directions, which, alas, I’ve seen) and two, the sites they’re referring to resemble printed media, which also goes in columns. The mere fact a column is on the right side doesn’t mean it loads last; check out Inman positioning, still the most reliable way to set up good-looking columns on the web. Columns can load in any order.

“The Three Layers” is a completely artificial construct that doesn’t fit reality, or do you really think that capitalization (a purely presentational attribute) belongs in CSS files and not in the HTML file? It’s fine as a general guideline, but should never be considered inviolable.

I can count the times I’ve changed the design of a site, and not touched the markup as well, on the toes of one hand (or the thumbs of one foot). Any good redesign will hit the html as well, since the html standards are always changing and you’ll want to update the markup as well.

Bloodofeve, try rolling up your own. Take a look at JSM’s or some of the others, and start whacking away at it. It’ll fit your hand better than any pre-fab tool out there, and once you start getting the hang of it, you’ll do fine.

bigyaz

I think part of the disdain for frameworks is snobbery, and perhaps turf protection. Front-end developers (as they like to call themselves) hate to admit that what they’re doing is pretty much paint-by-numbers stuff: learn the ridiculous anomalies of the various browsers and the necessary hacks, and you too can pretend to be a wizard. Frameworks make it pretty clear that the emperor has no clothes; anyone can do this stuff.

I’ll be happy when CSS is fixed and we get rid of the need for these intermediaries between the creative people and the true developers.

http://www.heyraena.com raena

I’ll be happy when CSS is fixed and we get rid of the need for these intermediaries between the creative people and the true developers.

Same here, bigyaz. :)

okparrothead

@raena and bigyaz

From my experience, the creative people are about art and the ‘true developers’ are about data. To marry the two they need a minister, the front end web developer.

roniu

@raena and bigyaz

“True developers”. You people are funny… But dangerous !!

Paint by number ? May be. So what ? Spit on those people and their job ? Arrogant really !

Look, everybody can paint a house or cut grass… Piece of cake hey Bigyaz… Still, painters and gardeners jobs do exist right ? It is not because eveybody can do something that nobody will.

Anyway, the sadest really in this comment, and it’s follow up, is that you, Raena, the author of this article, do run straight into this troll !!!

http://www.heyraena.com raena

roniu, I’m not a hundred percent sure what it is you don’t like about the idea of making CSS easier and more accessible. That’s what I was agreeing with there with Bigyaz.

http://www.thesheep.co.uk thesheep

By the time you’ve done all that, you probably would’ve been better starting your own from scratch.

Exactly my experience.

http://www.calcResult.co.uk omnicity

Trainging wheels simply teach children that they can ride a bicycle-that-has-been-fitted-with-training-wheels
Yes, they gain confidence that they can handle what they have, but my daughter lost all confidence when they were taken off – I basically had to start again, if I had left it up to her, the bike would still be rotting in the shed.

I suspect your analogy is better than you think – many people will find that a framework works just fine, and never take the step up to a proper bike.

http://www.quizzpot.com hquinn

Thanks for this information, I haven’t really work with any css frameworks yet, I might just give it a try.