A coupe of weeks ago I offered some thoughts about the pros and cons for using a css reset file. Resets are really one smaller part of what you might use as a complete css framework and today I want to offer some thoughts on using frameworks.
Let’s take a look at what css frameworks are, their pros and cons, and finally some thoughts about choosing a specific framework or developing your own.
What Are CSS Frameworks?
To answer the question let’s first consider the definition of a framework in general. Here are some definitions I found.
framework (n.)
- A structure for supporting or enclosing something else, especially a skeletal support used as the basis for something being constructed.
- a real or conceptual structure intended to serve as a support or guide for the building of something that expands the structure into something useful.
- a set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules that can be reused.
The last one is from this A List Apart article specifically about css frameworks
Given the above we can say a framework is something that usually isn’t meant to stand alone, but is meant to provide a structure on which to build. That structure can be physical or it can be conceptual, but it serves to make building the final product quicker and easier.
In regards to css that structure will come in the form or reusable blocks of code that can be abstracted. Those blocks of code can and should be consistently improved to make them more stable and more reusable across projects.
CSS frameworks can come in different varieties. A css reset for example is a really a type of framework all it’s own. Other things css frameworks aim to build a structure for include:
- grid/general layout
- typography
- forms
- general styles
- widgets such as tabs, drop downs, buttons and other specific objects and design elements
Some frameworks build a structure for one of the above and some attempt to build structures for several or all.
If we think beyond css for a moment, most any CMS qualifies as a framework. A content management system like WordPress serves as a framework for building a complete website. If you’ve ever used a CMS you already know this. You use it because it generally makes developing a site quicker and easier.
The Pros of CSS Frameworks
CSS frameworks offer several benefits that offer reasons to use them.
- Increased productivity—Reusing a structure is more efficient than re-coding every project from scratch.
- Standardized codebase—By default frameworks lead to a standard codebase as you’re reusing the same code from project to project. This makes maintenance quicker and easier as you don’t need to relearn how you developed each site.
- Makes it easier to work with a team—Similar to the above a standard codebase makes it easier for different people to work together on the same project.
- Provides a more organized approach to css—Abstracting design patterns and code blocks forces your code to become more organized.
- Publicly released frameworks are improved by the community—Any publicly released framework has many developers using, testing, and improving it. This is more an advantage of the open source nature of publicly released frameworks.
- Fewer mistakes—Once you know a block of code or a larger pattern of code works you can safely add it to any project and know it won’t contain errors.
- Cross browser reliability—Because they need to be the structure for any number of projects, frameworks tend to work for a variety of solutions including multiple browsers.
- Can be a learning tool—If you take the time to study how a framework has been put together and think about why it was put together that way you can learn a lot.
The Cons of CSS Frameworks
Along with the benefits there are some downsides to using a css framework
- The learning curve—You’ll need to put in some time learning to use any framework. This is only a downside when you first start using the framework.
- Could inherit mistakes of framework developer—It’s always possible some mistakes aren’t corrected. If you’re simply dropping a framework into your project you’ll be dropping in both the good and bad code.
- Could lead to a lack of understanding the underlying css—This is more an issue for new css coders. Using a framework could restrict your knowledge if you treat it as a black box. Most of us learned by making mistakes with our own code.
- Bloated code—Since frameworks have to cover a multitude of different cases they often come with more code than you need for any specific project. You can always remove the code you aren’t using or minify your files.
- Might restrict you as you conform to the framework—The framework can become an arbitrary design constraint. You may find yourself designing to the framework instead of selecting the best framework for your design.
- Lack of semantic code—In abstracting the code frameworks tend not to use semantic class and id names as they can’t know specifically how the class will be used. You end up with .column-20 as opposed to .sidebar.
Choosing a Framework
I think the pros of using a framework outweigh the cons. It’s why I develop with a CMS, usually WordPress. It’s more efficient to develop using some kind of framework.
That said I think the key to using a css framework (or any framework for that matter) is not to use them blindly. Ideally you’d learn any framework well enough to understand how and when to use it.
Take the 960 Grid System. It makes the assumption that you’ll be using a fixed width layout of 960px. it allows you to quickly build a 12 column or 16 column gird in that space.
That’s great when your project calls for a 12 or 16 column 960px wide layout. It’s not so helpful if your grid will be a different overall width or use a different number of columns. In that case you either need to customize 960 or use another framework.
One question that comes up is who are css frameworks for, beginners or more advanced coders?
- Beginner—Can make it easier to code a project, but make sure to spend time learning the underlying css
- Intermediate/Advanced—Adds efficiency to your projects, but you may prefer to develop your own framework to suit your coding style
My best advice in choosing a css framework is to learn to use several instead of relying solely on one and as with css resets don’t treat them as black boxes. Choose the framework that works best with your own coding style and more importantly that works best with you current project.
And if you do use any regularly, spend some time looking through it to see if you can find a way to improve it or fix any issues you encounter and then contribute your fixes and improvements back to the framework for everyone to use.
Some Popular CSS Frameworks
Here are some popular frameworks you can look at. Keep in mind they don’t all abstract exactly the same thing or provide the exact same structure for you to build on.
These are hardly the only frameworks out there. You can find many more with a little searching.
Developing Your Own Framework
As useful as I think css frameworks can be, I don’t use them in my own projects. When they first started coming out I saw their cons more than I saw their pros. Over time I have come to understand their benefits, but I’ve stayed away from them and prefer to use my own.
Technically I don’t have a ready made css framework I can drop into projects. What I have is more a library of snippets for consistent patterns I use. Embarrassingly these aren’t always stored in a nice neat library either.
More recently I’ve started to get a little smarter and I’ve begun storing my snippets in a central place (I’m using a new snippet manager CodeBox, which I found in the Mac App Store) and little by little I’m building up those snippets into a framework.
Over the years I’ve developed my own standards for building a layout or a menu system and I generally prefer to stick with my own standards as opposed to those of another developer.
The learner in me also prefers to develop my own instead of using someone else’s solution. I don’t always have the time to learn everything myself, but css is something I know well already and I enjoy learning more about. To me it’s worth the time to build my own css framework.
Awhile back I posted some thoughts about how to organize a css file. I realize now what I was trying to get at in that post was how to develop a css framework and it’s something I think will be an interesting challenge and learning experience.
I wouldn’t necessarily recommend every developer build their own framework, but I am recommending it for myself and anyone else interested in the challenge and learning experience.
Summary
Like any framework, css frameworks aim to give you a solid foundation and structure on which to build. A good framework will increase development efficiency as it’s main benefit.
There can be some downsides to using a css framework if you treat them like a black box. Most of these cons are easily overcome, but you do need to be aware of them.
While beginner’s can certainly benefit from css frameworks, they’re more susceptible to some of the cons. Intermediate and advanced coders are better suited to using css frameworks as the downsides will affect them less.
As different frameworks have different strengths you may be wise to work with several as opposed to one or you may even decide it’s best to develop your own set of frameworks that better align with your projects and coding style.
Do you currently use or plan to use a css framework? If so, which one(s) and what has your experience been using a framework?
Download a free sample from my book, Design Fundamentals.
I always prefer the 960 grid base css framework. That is seo friendly also. Nice information.
Thanks for the info John. 960 is the framework I’m most familiar with too.
I stumbled upon the 960 framework earlier this year. After looking over it I chose not to use it due to the issue you raised of non-semantic class names and bloated code. What I did find interesting was that it’s a number that can be divided evenly by a large range of other numbers.
This then came in useful when I showed it to the designer whose sites I build. In the past his layout was generally done by eye resulting in layout that was difficult to divide up causing me to have to create more classes than I would like.
Now he produces designs that have better structure making it a lot easier for me to build the sites.
That’s one reason 960px is so popular as an overall width. It’s easy to divide into a variety of equal columns offering quite a bit of flexibility when using grids.
I think the many people don’t see the full potential of the CSS Frameworks. When I first started building CSS Frameworks the main comments were is not semantic and the code is bloated. For the semantic part you can easily build semantic wrapper and for the bloated code is true there will be code that you will never use but with that code you can build hundreds of layout combinations. Most of my Frameworks are less then 1kb so I wouldn’t call them bloated , yes you will probably use only 20-30% of the framework because you don’t build complex multi column sites every day. Theoretically you and always cancel the parts you don’t use or add some extra code in the Framework.
My general point is there are many public CSS Framework try to find the framework that works for you. Try to understand the CSS code and the quality of that code inside the framework. If you are not happy with any public framework than build your own.
Speaking of bloated code I noticed you offer one of the least bloated frameworks ever created. A one line framework is rather impressive.
True that the bloated comments are only looking at frameworks having extra code. Most don’t consider how much extra code is really there. Bloated is the word thrown around, but it’s quite often an exaggeration.
I agree about trying different frameworks. I’ll likely develop my own, but that’s as much for the fun of the challenge and what I’ll learn, than anything else.
This was a nice look into CSS frameworks. I like how you look at both sides to give a great overview.
Frameworks definitely have a learning curve and a few other drawback as you’ve mentioned but especially now for responsive/adaptive design they really can save you a lot of development time.
That makes sense. I still haven’t spent enough time with any framework to get past the learning curve, but I can understand how once you’re past the curve it would save you time.
We used Twitter Bootstrap on our project for the past half year. In the beginning, it was great for prototyping and showing something in barely no time to the client.
Now we plan to re-design everything, and as the new design doesn’t look too much like Bootstrap anymore and we didn’t use a lot of functionalities anyway, we are dropping Bootstrap (except a few JS plugins maybe) and roll our own solution with Compass/Sass and maybe some Blueprint mixins.
I translated designers’ PSD layouts to pixel perfect HTML/CSS sites for some years now, and as I’m aware of most of the caveats, I feel a lot more productive rolling my own solution for every new project, than using a standardized frameworks that forces me to do things in its way or forces me to alter (rape?) it so it does things my way.
In my opinion, CSS frameworks like Bootstrap are a very nice tool for programmers who want to have a visually nice, standard looking result really fast. But due to the fact that I have very high demands when it comes to aesthetic and semantic design with minimal HTML/CSS code, I found it impossible to work with standard solutions, as every project is unique.
I want my CSS code to do exactly as I want it to do, and ONLY THAT. When there’s something new needed, I know exactly where to change my codes and don’t have any side effects which inevitable lead to messy spaghetti codes and building site’s all over your code in no time – and as soon as this has only begun, you’ll never get your code clean again without a complete redesign.
That’s my experience. Thanks for this very informative article. You may want to read this other very informative one here: http://css-tricks.com/dont-overthink-it-grids/.
Best wishes.
We agree completely. For exactly the reasons you mention I tend to stay away from frameworks like Bootstrap. I much prefer using my own code.
I don;t want to completely knock frameworks. I understand why people like and use them. They can definitely improve production. But you’re giving up control to someone else who didn’t have your site in mind when they developed the framework. I’d rather do things my way than some arbitrary way.
Frameworks are beneficial to people who know what they’re doing and know the framework well enough to customize it. They can pick a framework that will work with their project and use it to develop quickly.
Unfortunately they don’t always get used that way. They get used for the quick part only and people use them instead of learning how to build the same thing themselves. Then we get lots and lots of sites looking exactly the same.
I remember that CSS-Tricks article. I think people sometimes do overthink how to build grids. I typically use more than 3 columns and I’d rather stick with % for the gutters, but the procedure is similar.
I think you and Jens Meiert would get along well! I think he ripped resets apart, and he’s also concerned about frameworks. (His book on frameworks is free I believe.)
But did your views change on this? I’m researching frameworks (hence swinging by) and I see rather “static” views.
I don’t know Jens personally, but I certainly know who Jens is. I’ve been following his site for a long time and I think he might be a subscriber here. I know Jens has commented at times.
I’m not sure if I saw his book on frameworks, but I’ll look for it.