Article Stats
- Published on August 17th 2007
- Categorized under Features
- 30 comments and 17 Pingbacks
- 361 views in the past 24 hours
2007 / August 17th/ Why I don’t use CSS Frameworks
CSS Frameworks seem like an awesome advancement at first glance: speed up your development, normalize your code base, and eliminate those nasty browser bugs! Hot damn, where do I sign up? Unfortunately there’s some pretty strong caveats that go with those statements.
The frameworks themselves are very good
I’d like to start this off by saying there’s nothing inheritly wrong with any of the CSS, HTML, or ideas put into these frameworks. I also think it’s an absolutely fabulous idea that people are writing them — it gives newcomers an easy way out to create professional looking designs using semantic XHTML and CSS.
Advantages of Frameworks
Most CSS frameworks offer three primary selling points:
- Speed up your develoment (don’t have to write all that HTML/CSS)
- Don’t worry about those nasty IE bugs!
- Normalize your code/class base
Speeding up your development
For those who have intimate knowledge of the framework, I do believe the frameworks will speed up development. But for the average user, I think that the time required to understand the architecture of the framework far outweighs the menial task of coding it from scratch.
Over the past three years, I’ve built unknown dozens of layouts, with most of them being extremely visually complex. On average, it takes me about 8 hours to build out a Master design into a functioning bug-free template. Of that time, I would have to say that doing the basic layout & typography (framework material) takes less than 20 minutes. That’s less than 5% of development time.
You may save time, but the question quickly becomes how much time, and at what cost? We’ll cover that later. My point being that frameworks do not solve the hard problems in CSS — the ones that pop up when you’re knee-deep in HTML and suddenly the goddamn box doesn’t show up in IE6. These are the problems that take the majority of time when developing a website.
Don’t worry about IE bugs
Well, gee that sure would be a wonderful thing if that were the case, wouldn’t it? The truth is the frameworks do eliminate some bugs — but they’re the easy ones to pick off. The ones solved by a quick display:inline or height:1%.
The frameworks don’t solve bugs where none of the public hacks work. Or where IE inexplicably adds a 30px top margin to your element, but then dissolves in when you hover over your main navigation. It doesn’t solve the problems when IE displays the same HTML and CSS differently on two different computers.
It doesn’t solve the hard problems.
Normalize your code base
This is one area I think frameworks are great at: getting a large team of people all using the same code structure. But then again, I think this can be solved by an internal styleguide just the same.
Disadvantages of frameworks
There are a few pretty severe disadvantages of frameworks in my eyes:
- Familiarity with your code’s architecture
- Inheriting someone else’s bugs
- Not learning
Familiarity with your code’s architecture
This is the largest reason I’ve never built or used a CSS framework. By building a site from the ground up, you gain a knowledge of your site’s architecture that can’t be learned through any study or documentation. When a programmer asks you a question about restructuring the HTML, you can answer right away. You know where the CSS styles are (hopefully) and you know how the layout works.
This is increasingly relevant in today’s Javascript-out-the-ass world. Once you start manipulating the XHTML/CSS of your site through dynamic scripting: you better know how it’s laid out. Javascript-based effects are tied very closely to the CSS structure of the site. You’ll have to know when you can use float and when you can use position to lay out elements. Should you use line-height, margin, padding, or height to get that container to extend? It’s a very important decision: and laying out the architecture helps you achieve this.
Inheriting someone else’s bugs
At the end of the day, no framework is perfect. No design is perfect. But instead of fixing your bugs, you’re fixing someone else’s bugs. Do you know how much it sucks fixing your own bugs? It sucks 10,000x worse fixing someone else’s bugs.
Not learning
Again, on my mantra of why I wouldn’t recommend frameworks comes the lack of knowledge gained by fixing those problems frameworks solve. I’ve advocated before how important it is to build websites. I can guarantee you that if you keep building sites from the ground-up, you’ll learn new things each time. You’ll learn not only how to fix and avoid browser bugs, but how to make your markup more elegant. You’ll transform the act of building websites from a job into an art.
Conclusion
Hopefully this clears up a bit of why I don’t like CSS frameworks. It’s not that they’re bad — it’s just that I don’t think they offer enough value for the drawbacks. It all comes down to intelligently analyzing your situation before you jump head-first into someone else’s code.
The one “framework” I do use
On that note, there is one framework I do use. It’s the CSS reset — not that I’d even call it a framework. Here it is in all its glory:
/*------------------------------------------------------------------------------------
Global Styles
------------------------------------------------------------------------------------*/
* {
padding:0;
margin:0;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 0; }
li, dd { margin-left:5%; }
fieldset { padding: .5em; }
select option{ padding:0 5px; }
.hide, .print-logo, .close-button{ display:none; }
.left{ float:left; }
.right{ float:right; }
.clear{ clear:both; height:1px; font-size:1px; line-height:1px; }
a img{ border:none; }
What’s your take on frameworks? Do you use them? If so, what other benefits have you gained from using them?
47 Comments
Make a Comment
don’t be afraid, it’s just text
Warpspire is the place that web professional Kyle Neath writes about the web. More →
A word from the sponsors. Advertise with Warpspire
Hot Topics
-
2006 / Spotting a fake: “New apple design”
95 comments
-
2005 / Introducing Hemingway
87 comments
-
2007 / Wordpress community, we gotta talk
67 comments
-
2006 / (Re)introducing Hemingway
59 comments
-
2007 / 7 Flash Myths
54 comments
Feeds / Syndication
Choose your preferred method of syndication. All feeds are full-posts & ad-free. All feeds are protected under copyright and may not be redistributed without permission.
The Network
All my little projects that I leave scattered around the web. Some for profit, all for fun.
August 17th | #
I enjoy using most CSS Frameworks simple because it keeps my code standard. But then again I use my own framework.
August 17th | #
I agree completely. It takes me less time to build something from scratch than the learning curve of a framework is worth. Additionally, building from scratch usually allows for leaner code.
August 17th | #
The main reason I do not use frameworks is because I don’t work to just work or earn a paycheck, I work to learn. As you have said, not only does using frameworks remove the opportunity to learn what you REALLY need to be learning such as better code structure, it channels your learning towards something that you probably won’t be using long before a newer framework arises.
The “framework” I use is self built. It contains the file structure. Within the html, I have the basic doctype, head, title, and body tags (ect). Within the stylesheet, I have my CSS Reset and a basic comment that I can reuse throughout the CSS so I don’t have to retype all the dashes and slashes (I like big and fancy comments).
I enjoyed the post, thanks.
August 17th | #
Kyle: I’d suggest this change for a clearing div…
.clear { clear: both; width: 0; height: 0; font-size: 0; overflow: hidden; }
That will allow it to take up literally no space on the page, rather than throwing off a layout by 1px.
August 17th | #
I only used a custom reset and basic typography stylesheet until now, but I’m planning to give Blueprint a try and I think I’m going to like it. But we’ll have to see how much you really benefit in a real worl example. My default CSS file has been well worth the effort, because you really need the same old stuff all over again for each site - looks like the right place for a framework, doesn’t it?
August 17th | #
I do the same thing (whitespace reset), except I also have a couple more lines if I want to lay down a grid layout. Blueprint looked interesting, but for the same reason I don’t use the YUI css, it’s code I don’t know and is more than I need.
August 17th | #
There certainly are advantages and disadvantages to frameworks at any level (not just CSS). The bottom line, which you got close to in the someone else’s bugs section is this: if you want something to work for sure, you have to build it yourself.
Unrelatedly, check out http://webtypography.net/sxsw2007/ and setup your default CSS with a tasty vertical rhythm.
August 17th | #
I love the idea of frameworks for certain uses. Like as a base for blog templates and such. But for client work, I just can’t do it.
I might take a bit of a peak at the framework code and get some ideas or something, broaden my horizons. I’ve even thought about doing one. but you’re right, it’d only save the first few minutes of coding time.
For people who don’t want to have to care… yes, frameworks could be totally awesome.
August 18th | #
I tried to get along with Blueprint when it hit - but like yourself I quickly came to the same conclusions.
Compared with my normal system it felt slow and bloated. I don’t like the IE hacks living in the CSS file rather than being parsed out into separate IE conditional comment CSS files, and I don’t like the splitting out of the grid, typography, and reset files. Too many HTTP requests.
So instead I’ve simply re-visited my normal ‘empty’ templates, done a few nips and tucks after learning a few things from the implementations in blueprint and a few ALA and Eric Meyer articles, and I’m sticking with my own system. I work faster with it, and there’s less redundancy.
None of which is a slight against Blueprint or any other CSS Framework, which do exactly as advertised - I simply think that they are not for me.
August 18th | #
@Nathan: thanks for the tip. I actually hardly even use clearer’s anymore… but nice to know a way to shave off one more pixel :)
@Everyone: I’m glad to hear I’m not the only one with this viewpoint. With all the buzz around the internets lately, I was beginning to feel like a framework-less outsider.
August 20 | #
Kyle, you are not the only one. Being a what you might call self-taught professional , during the years I have developed certain habits in coding so I find it hard to adjust to someone else’s coding style. Further more, being a control freak I couldn’t imagine having foundations of my project built upon something that I didn’t code myself.
Btw, I linked to your article from my site :)
August 21st | #
I agree with you on “Inheriting someone else’s bugs” by using someone else’s framework. The question is, how many bugs do you have in your self-framework you don’t know yet but other might have stumbled upen? How long will these “bugs” prevail? Using an open source framework makes it really likely that another one has stumbled upon problem X in esoteric browser Y on plattform Z - and the probability is really high that he or another one who has stumbled upon the same problem will fix it and it makes into the next release. This is something you wil never have by writing
a) his/her “own” framework
b) not using any framework at all
. I don’t think that not-using any framework will make it any better, it will make it only worse.
August 22nd | #
Well, in fact, by looking into someone else’s bugs, you do answer some of your concerns here: you become familiar with your code’s architecture and you learn. It is an excellent exercise to learn from other people’s code.
I think that there are situations where the advantages outweigh the disadvantages, in particular in the field of CSS and in times of moving targets.
I am obliged to learn browser tweaks, but that’s really the one thing I would very gladly do without. I love learning any language, but I love much less to have to learn how to work around poor implementations.
If somebody does it for me, I’ll have more time for the programming and won’t have to worry that much about a new IE7 coming along and forcing me to get back into learning about all the new issues it carries with him.
All this said, I agree that, if you are a complete freshman in whatever language the framework is about, you should stay away from it until you get a firm grasp of the technology itself… and more often than not you’ll end up developing your own.
August 22nd | #
“Familiarity with your code’s architecture” - and what if you have to take over and adapt/modify the design of someone else? That’s where frameworks, for CSS or for anything else, score points! Perhaps not for a single designer, but certainly in large organisations with changing teams.
August 22nd | #
Andrea: How often to frameworks provide 100% of the CSS you’ll need for a full site design? You’ll need to learn browser tweaks if you work with CSS. Period.
August 23rd | #
Kyle, the answer to your question is: I don’t know. I’ve had to learn browser tweaks before any of these frameworks came out, and I’m not using any of them… yet.
I’ve only given the YUI (only the CSS part) a try once for a single page, and it seemed to do fine - although I had to tweak it a little here and there.
I haven’t invested any more time into it yet, but I have been thinking that I should. Maybe I’ll find out that you’re right and that it only solves the easy bits, but I would expect a framework with such a strong investment by excellent web designers and such a large user base providing feedback to be able to cover quite a lot of ground.
I guess that you tried a number of them and found otherwise. I’d be quite happy to learn about them (as I’m sure the people behind the frameworks themselves would be), but that would probably go beyond the scope of a response to a comment. Only as a suggestion, why not write another post to go into more details about what you found missing, and in which framework?
August 24th | #
I agree with your article, it’s more interesting to build sites from the ground-up and I can learn new things, tricks.
I use this CSS reset: http://www.tutorial.hu/node/1114
Harder
August 31st | #
What about documentation? One good reason to use a framework is that it is already documented. In an environment where you might have a predecessor someday, reliable documentation that you don’t have to write sure is a bonus.
August 31st | #
Dylan: Honestly, the complexity of any CSS framework/files are so simplistic… i do not believe documentation (beyond inline comments) is necessary. I mean… what are we to document? That a style like:
is 50px wide? CSS is a human-readable, visual language. It is documentation itself.
September 12th | #
I’ve never knew there was such a thing as “CSS Frameworks”. I just custom code all of my CSS using my own knowledge of browser quirks (especially … ie… cough … cough)
September 21st | #
[…] You need time to fully understand the framework. “For the average user, [..] the time required to understand the architecture of the framework far outweighs the menial task of coding it from scratch.” [Why I don’t use frameworks] […]
September 21st | #
[…] You need time to fully understand the framework. “For the average user, [..] the time required to understand the architecture of the framework far outweighs the menial task of coding it from scratch.” [Why I don’t use frameworks] […]
September 23rd | #
[…] You need time to fully understand the framework. “For the average user, [..] the time required to understand the architecture of the framework far outweighs the menial task of coding it from scratch.” [Why I don’t use frameworks] […]
September 24th | #
[…] You need time to fully understand the framework. “For the average user, [..] the time required to understand the architecture of the framework far outweighs the menial task of coding it from scratch.” [Why I don’t use frameworks] […]
September 26th | #
[…] You need time to fully understand the framework. “For the average user, [..] the time required to understand the architecture of the framework far outweighs the menial task of coding it from scratch.” [Why I don’t use frameworks] […]
October 2nd | #
[…] Why I don’t use CSS Frameworks? http://warpspire.com/features/css-frameworks/ […]
October 9th | #
Heh, nice post, enjoyed reading it.
Quite useful at this time in my life, where I have just spent a full saturday coding a design, and then porting it to wordpress. I was very tempted to go for a CSS framework as the development time was not paid, but in the end just used the basic reset which I had developed over the years. Indeed the effort to learn someone else’s code is greater than just trusting your knowledge.
On a side note, glad to find that my reset.css is pretty much like yours, but my .clearer is a bit diff, never noticed it going wrong, but let me know if you see anything wrong:
.breaker { clear: both; visibility: hidden; display: none; }
Cheers
October 9th | #
Sorry for the second post, but just saw that my .breaker class is bad. The “display: none” rule actually doesn’t let it “clear: both”.
Anyway, don’t want to turn this comment thread into a help thread.
Keep it up =)
October 10th | #
The CSS framework are just for the loosers, lamers, who cant make his own coding by his self. And then if you have a problem you just asking and asking on the discussion channels. Learn, and create your own “framework”. My experience is this one. HTML I am writing from the scratch. The CSS main decalrations I use just as body {colors, font,}, a {…} from my previous project, and other else i just write from scratch. What you dont know? Make a 3col layout? You just declare float: left and some width. Thats it and the layout are on the world. The others you have to declaring from beginining because another colors, another margins and paddings, and so on. I just laugh for the people who using something like css framework… Ok it is your choice, have a good time and be the professional webmaster.
October 10th | #
Hmmmmm all these people who dont use frameworks eh what a load of rubbish. What is the css interpreter if it isnt a programming framework. Do you also write the browser dlls for the M$ out there because if you dont understand the code in the dll how can you possibly write good code. What a load of nonsense programming in this day and age uses nothing but frameworks. Ever heard of the .Net Framework the Java framework oh but I guess all you people are using your own purpose written Os’s. A framework is just a helper piece of scaffolding to help you create work quicker. Yes its probably cleaner to write from acratch but if thats the case why you not creating code in 8086 assembler it doesnt get any purer than that lol :-)
October 13th | #
I totally agree, css frameworks have been popping up quite a bit lately on a few sites I frequent.
The only ‘framework’ I use is a bit of copy-paste code that starts as a basis which only cleans the slate (removes padding, spacing ect…).
Thinking back on a few of my latest projects, most of my time was spent fixing the little annoying cross-browser/platform things, which no framework could cater for because every design is different, unless you are popping out a hundred of the same sites a month.
October 18th | #
After spending the past day wrestling with the YUI grid framework, I’m realizing the point of this article. I thought I’d give it a shot and see if we’d benefit from the perceived efficiencies it offered. What I quickly realized is that if you’re o.k. with it’s limitations it’s great for what it does. If you’re trying to build a layout with true design flexibility for multiple skins/themes it may not be your cup of tea.
October 23rd | #
[…] argument against css framesworks. Good discussion thread below the main post. Personally, I’m still on the […]
December 4th | #
Ok it is your choice. My choice is to search for best css framework.
December 14th | #
[…] You need time to fully understand the framework. “For the average user, [..] the time required to understand the architecture of the framework far outweighs the menial task of coding it from scratch.” [Why I don’t use frameworks] […]
December 27th | #
I don’t think frameworks are “bad”, oftentimes they are helpful and I have used YAML on a few occasions.
It really depends on the project. If I need a layout that is really similar to something a framework already provides a base for, I’m not going to spend 1 day writing all the CSS (especially if it’s a half-flexible layout with min/max widths). Besides, it’s funny how on the one side reading into CSS is apparently simple, but learning a new framework isn’t.
To each his own. Any “standard” layouts can, imo, do with a framework while designs that are not the standard blog layout are best done from scratch (unless someone provides a “select the components you want” css framework).
December 27th | #
Samo: No offense, but does it really take you a full day to write the layout CSS for a project? It usually takes me around 20 minutes (because that portion of CSS really is simple).
I’m also intensely interested how YAML fits into the equation at all.
January 4th | #
[…] frameworks have grown in popularity recently, but there are many developers [ 1, 2 ] who do not think it is an ideal solution for presentation design but not without a […]
January 6th | #
[…] frameworks have grown in popularity recently, but there are many developers [ 1, 2 ] who do not think it is an ideal solution for presentation design but not without a […]
January 12th | #
[…] frameworks have grown in popularity recently, but there are many developers [ 1, 2 ] who do not think it is an ideal solution for presentation design but not without a […]
January 31st | #
[…] frameworks have grown in popularity recently, but there are many developers [ 1, 2 ] who do not think it is an ideal solution for presentation design but not without a […]
February 18th | #
[…] You need time to fully understand the framework. “For the average user, [..] the time required to understand the architecture of the framework far outweighs the menial task of coding it from scratch.” [Why I don’t use frameworks] […]
March 5th | #
[…] CSS Framework […]
March 27th | #
Well said! :D
April 2nd | #
[…] very useful CSS reset is CSS Global Styles Reset by Kyle Neath. A simple CSS Reset with some additional classes for better […]
April 20 | #
[…] Verwendung solcher Frameworks. Dirk Jesse, der Autor von YAML, ist kurz darauf in seinem Blog auf zwei exemplarische Posts, die einige Nachteile derartiger Frameworks aufzählen, eingegangen. Zu seinen […]
April 23rd | #
[…] Vous aurez besoin de temps pour comprendre le framework. Pour l’utilisateur moyen, […] le temps requis pour comprendre l’architecture d’un framework l’emporte de loin sur les menus tâches nécesssaires pour partir de rien. [Why I don’t use frameworks] […]