Search

Please do not Use CSS Frameworks

Posted: August 27, 2007 Comments(79)

Update: It’s become apparent to me that the choice of title for this article can be very misleading before reading the article itself. Please know that I am a huge fan of frameworks and truly support the hard work of CSS framework developers. This article is an opinion piece consisting of my thoughts, and some great responses from readers who feel the complete opposite. Please, read the article, read the comments, and share your opinion, I really appreciate it.

A bit of background information: A couple weeks ago, Blueprint was officially launched. Blueprint is “… a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a style sheet for printing.” As of this writing, Blueprint 0.4 is the most recent version.

The idea behind a framework is to make your life easier by streamlining some of the tedious repetitions we find ourselves going through on each and every project. The JavaScript libraries you’ve come to know and love (or hate) are frameworks which help writing JavaScript become a faster process with less speed bumps when it comes to cross-browser issues. There are many server side programming frameworks (such as CakePHP and CodeIgniter) which help make the process of writing Web applications much more rapid. They are also helpful in that many common functions are included by default. Not having to write these common functions from scratch can really come in handy.

The negative side to code frameworks

At their surface, frameworks seem like a great thing; unfortunately, that’s not the case. A big problem with frameworks is when up and coming developers attach themselves to a framework as opposed to the underlying code itself. The knowledge gained in this case surrounds a specific framework, which severely limits the developer. Beyond that, much of the code in frameworks can be considered bloat. Whether it be in a server side language framework or JavaScript library, there is often a large percentage of code that will never be executed. While not a major issue server side, this can greatly degrade the performance of a client side framework such as a JavaScript library. There are other issues attached to the use of frameworks, but I’d like to be clear in my support of the idea.

Where does Blueprint fit in?

A CSS framework is a different story entirely. To me, CSS can not be framed. While many of the concepts, techniques, and ideas of creating websites with CSS can be repeated many times over, in my opinion, it is impossible to create pre-written documents that will help you in your process. CSS and (X)HTML go hand in hand. (X)HTML is a language semantic in nature, which is difficult to wrap up in the style of a framework. Each and every project is unique in and of itself, right down to the document structure, classes, and ids. A CSS framework passively removes a great majority of semantic value from the markup of a document and, in my opinion, should be avoided. This lack of semantic value works against a big part of what Web Standards are all about; creating documents with rich semantic value.

On the other side of things, there are many people who argue that taking semantics to this level when speaking about HTML is superfluous. It’s not something I’ve got a strong standing opinion behind, but I’ll admit it is mildly bothersome. Call me a semantics dork, but it’s just an opinion of mine.

Further, the problem of ‘learning the framework’ would run rampant with a CSS framework. CSS should be well understood from the ground up, as should any language. Skipping this vital step could very well hurt you in the long run. A CSS framework will only take you so far, without a deep understanding, you’ll be stuck after you’ve created the basic site structure. It’s important to have the knowledge to many any adjustment needed when you’re faced with a CSS problem.

What I do reuse

I’ve written before about my templating and theming process and included my opinion about it helping me work faster, but what I spoke of was not frameworking. I do think it helps to have the folder structure I use and some empty CSS & (X)HTML files in the right place before I begin. The actual code in these files, however, is very minimal. The CSS files themselves are empty, simply to cut out the step of my creating them each time a project gets started. As far as any markup goes, the only thing included by default is a very basic document structure including a proper DOCTYPE, basic structural elements (html, head, title, and body), and style sheet inclusion. That’s it.

I have, however, recently started using Eric Meyer’s Reset Reloaded CSS by default when I begin projects (as will be the case with a redesign of this site). Having a method to globally reset all elements in an effort to establish a base from which to build makes sense to me, and Mr. Meyer’s expertise is well applied here.

If employing a reset stylesheet is considered using a framework, I’ve got to re-assess the definition of a framework.

In conclusion

I don’t think mean to say there will ever be a place for frameworks when it comes to CSS. I just hope they’re used properly. Since the launch of Blueprint, there have been some spin off pseudo-frameworks such as Tripoli which claims to be a “… generic CSS standard for HTML rendering. By resetting and rebuilding browser standards, Tripoli forms a stable, cross-browser rendering foundation for your web projects.” While the site documentation attempts to explain what sets it apart from other frameworks such as Blueprint, I can’t see how such a large foundation to work from could be of much use when it comes to putting it in actual production. For me personally, each project I work on is too unique and requires a higher level of attention.

I give the authors of CSS frameworks credit for making an idea a reality, but I hope the use of CSS frameworks is limited to testing environments and projects that can truly benefit from them, including when you’re under the gun as far as turn-around time is concerned. I don’t mean to step on any toes or anything, it is just my personal opinion — I’d love to hear yours.

I realize the title to this post was a bit sensationalist, but please take the article for what it reads, not the title I gave it.

Related Content

  1. Closing this Chapter on CSS Frameworks
  2. Why I Like (and Use) Reset CSS
  3. Improving Your Process: CSS Techniques Part 2

Categories

Categories Design, Development, Opinion

Tags

Tags , , , , , , ,

Get my newsletter

Receive periodic updates right in the mail!

  • This field is for validation purposes and should be left unchanged.

Comments

  1. Hmm.. I’ve only experimented lightly with BluePrint CSS, but I like it. I think you’re correct in that a developer DOES need to know the underlying code, but with the use of additional tools like “Dust-Me” http://www.sitepoint.com/dustmeselectors/ (the firefox extension that finds unused selectors), BP still has a place in web development. It’s new for sure, but there are already forks and other supporting development that will hopefully further this and continue to make it better. I suggest, let it grow for a bit and see what happens – hey it’s only weeks old. Give it a chance. 🙂

  2. @Kel: I agreee – Blueprint does have its place for sure, and I absolutely look forward to keeping up on the development. In my personal opinion, with all of the sites I’ve built, I can’t think of how something like Blueprint could save me time as well as allow me to create the most semantic document.

    Structural CSS is one of those things that gets easier with each site you create; using a framework to create these structures can hurt more than it can help in my opinion. Even moderate experience with CSS can allow you to create basic site structures quite quickly.

    I don’t want to sound like I am unappreciative of the time and effort that goes in to CSS frameworks, I do give the authors due credit for the work they’ve done. If my article sounds like I’m putting down the work, please don’t take it as such.

    Thanks for taking the time to offer your opinion on CSS frameworks – it will be interesting to monitor the work being done on that front!

  3. I just coded a small one pager project using blueprint, and I have to agree with you in a sense. Any code that made any real difference for me was heavily modified, most of the other code went untouched (thereby creating useless bloat) and I really didn’t see the real point. I’m looking into tripoli, will give that a test, but I’m thinking that I have to agree here – although I would like to see as solid solution in this regard…

  4. I would agree on your point about the semantic value of CSS, but I would argue that there’s no reason why you couldn’t have semantically rich css and still use Blueprint.

    I’ve been playing with Blueprint a bit and found that adding another .css file with custom styles for certain situations creates a nice blend of standardization and customization.

    I think it’s nice when you can have a div named “leftcolumn” I think it gives you a good definition as to how that element is behaving, but I don’t see much loss when the element is renamed to “column span-6” you still get a good idea of what that div is doing.

    I would make one more point about using something like Blueprint in a team environment. One of the downfalls about having alot of freedom in naming id’s and classes is that the method tends to make more sense to the author, what is nice about Blueprint is it’s generic and documented so everyone can “get on the same page” in a sense, when it come to working on templates.

  5. Hi, I never used such a CSS Framework but looking at the idea behind it, I believe it has potential. Not as a framework to use in a regular work basis, but still the ideas behind it can be used in several places.

    Since now, I always started from scratch and after a short time ended up doing almost the same every time to get a layout done. BP in my opinion is just a intelligent bunch of css rules you apply to your html to get what you always got before after putting your code together 🙂

    Maybe its purpose is not to just use it without using your brain, but to use it and try to learn from it…

  6. I agree with the main point, that frameworks like Blueprint restrict both the developer’s understanding of CSS and the semantic value of the code. (I don’t think bloat is a significant CSS issue… unless done extremely poorly). I also agree that most will end up using it more as a crutch. However, I do believe that it will be valuable for wireframe work. I can see myself using it (as a crutch) for non-production code. That’s one place where I want to get up and running as fast as possible, and don’t need to care about the details.

    Prototyping is where most frameworks shine. Ruby on Rails allows the writing of generic scaffolding code. No, that code is not nearly ready for production. However, its presence lets developers lean on that code, enabling them to work on other aspects of the application. It is on the developer to go back and ultimately replace the crutch with a solid structure (i.e. re-writing the scaffolding). Blueprint will allow developers to work the same way, allowing people to focus on parts of their design, while going back and replacing that code later.

    Personally, I would rather re-write from scratch than replace framework code (for CSS at least) to avoid all of the dependencies. But the ability to move chunks of decent code from a wireframe would be greatly beneficial in speeding up development time.

  7. I think a CSS framework is a good idea, for working on an internal team. What the guys at Lawrence have done is standardized their practices cross-the-board for their own company. This is a smart move, especially for companies which have the same general look and feel across multiple pages and mini-sites (Fortune 500 companies, etc). I’m sure this is the reason the YUI grids came about, out of necessity to maintain consistency.

    That being said, I think that trying to shoe-horn a unique project into an off-the-shelf CSS framework would be a grave mistake. You’d spend more time re-writing code than actually getting work done.

    For what it’s worth, Blueprint is very well thought out. If I ever need to put together a news oriented website on a 14 column grid, it’d be a great stating point. However, I’d rather let the overall requirements of a project dictate whether or not a framework is used, as opposed to forcing a square-peg / round-hole scenario.

  8. @jive: Thanks for offering some detail on your experience with Blueprint, I haven’t had a chance to personally develop a project with it, I’ve just been able to look it over and read about it thus far.

    @Nick Dominguez: To me, referring to a div as ‘leftcolumn’ isn’t fitting. If this div were a sidebar, I would be much more apt to name it as such, in an effort to be as semantic as possible. Naming a div ‘leftcolum’ merely describes the position of the element. What do you think? You bring up a great point about using something like Blueprint in a team environment. This isn’t something that had crossed my mind. While Blueprint may not be fitting for each and every project, coming up with a framework on a per-project basis would be a great way to keep teams in line.

    @Georges Jentgen: Definitely take a few minutes to check it out. If nothing else it will get your mind thinking about the idea of CSS frameworks and the pros and cons surrounding them.

    @Eddie: Yes, I can see where the benefit comes in when it comes to putting a structure together very rapidly for testing purposes. I too would rather write CSS from scratch than worry about any sort of dependency issues resulting from a framework.

    @Nathan Smith: Both you and Nick had mentioned the idea of using a CSS framework in a team environment, and as I had mentioned, that hadn’t really occurred to me. After thinking about it, however, I work in a team on various projects, and knowing the document structure before beginning work on it could really help save some time and headaches when I pick up where someone else left off.

    I absolutely agree with what you wrote about trying to shoe-horn a project into a framework, you’d be doing far more work when the day was done. Further, you’re completely right when you stated that project requirements should dictate whether or not a framework be implemented.

    Thanks so much for offering your input, everyone!

  9. @nathan I would also echo your thoughts on letting the project decide whether or not a CSS framework should be used. FOr example if the custom .css file I mentioned, ends up overriding most of what the framework is doing than it’s probably not worth using it.

    @jon I used “leftcolumn” as just an example, but again semantic naming runs the risk of only making sense to the author, the trick is generizing names so that everyone understands it, but does generizing the names dilute the intended purpose? not sure, just some thoughts.

  10. I think the problem is that CSS as a programming language is not suitable for frameworks. You need a higher level of pre-processing to achieve a semantic and logical CSS setup for building advanced grids, or else you end up with bloated class names and non-semantic markup.

    As the author of tripoli, I just want to highlight the fact that it’s core purpose is to attempt a cross-browser rendering foundation for HTML tags. It shouldn’t interfear with the exisitng or non-existing HTML markup for each single project – that’s why one of the examples is an already published document from w3 with tripoli injected into it.

    Tripoli tries to simulate a default browser style – except that it does it more consistently and hopefully with an enhanced user experience.

  11. @Nick Dominguez: Absolutely, ideally, your semantic naming should indeed be explanatory enough should another developer need to use your markup. I understand your point, however.

    @David: I appreciate you clearing things up around Tripoli. I hope I didn’t come off as unappreciative of your work and I hope you continue investing time in it. It seems as though your intentions are spot on and I look forward to continued development. Thanks very much for taking the time to leave your thoughts.

  12. I’d have to agree with mostly everyone else. I’ve written my own framework for doing work, which is basically a default XHTML file with the Doctype, Header info, and the Body tag, with a few elements inside that that I use all the time.

    My frameworked CSS is pretty much browser resets, font sizing and using the 62.5% font size and then sizing fonts on EM, and having that all out of the way. I never thought about releasing because it’s how I do things and I figured everyone else already had their own personal frameworks.

    I’m not a big fan of these CSS grid files, I find them bloated. I’ll write my own css for positioning. I do however appreciate the work going into them. Currently I find Tripoli very useful as it isn’t really a framework or full of features I won’t use.

    Anyway, that’s my two cents.

  13. I completely disagree with this article and most developers who think along these lines.

    The whole point of a CSS framework is to not create lisp for up and coming developers. CSS is not completely cut-off from being a DRY process either. I’ve been doing CSS for close to 8 year therefor I appreciate greatly a framework/library like Blueprint CSS simply cause I can get things done faster.

    Also, you have know CSS pretty well in order to even understand why the something does what it does.

    This post is nothing short of a closed-minded rant of why you don’t like change.

  14. @Derek: It’s sounding like I need to take a deeper look at Tripoli — thanks very much for including your thoughts.

    @Arik Jones: I’m going to assume that this is the first article you’ve read on this site. If you take a look around, you’ll find that I’m anything but closed-minded. I welcome change. Your opinion has every right to be expressed, but this article is merely my opinion on the topic at hand. Perhaps you can provide some examples of how Blueprint has changed your development significantly, in an effort to help future readers have an opinion to read from both sides of the fence.

  16. I agree with you on the whole. I definitel agree that programmers need to learn the underlying language before learning a framework on top of it. Ruby and Rails is a good example. There are lots of Rails programmers out there but many couldn’t write a simple Ruby script to save their life or their logs…

    In regards to Blueprint I prefer something a little simple, say like Tripoli. Instead of giving me a lot of bloat in the form of a layout framework it simply gives me what I really want which is cross-browser consistency in my typography. I’ll deal with layout on a case by case basis but Tripoli solves the consistent typograph problem that plagues every site I do.

    The issue is focus. If the framework allows you to focus on what you need to get done then it is a handy tool. But keeping focus at the expense of bloat isn’t good and should be avoided.

    I’m a fan of the download model for MooTools as a Javascript framework since it lets you select just the units of functionality you need for a given download and does compression for you to. This kind of thought on the part of the developers in connection with the distribution of MooTools is a great step in a more promising direction for frameworks.

  17. I love Frameworks, I’m sorry. They are a gift to the coder.

    Yes, we have the problem of too many frameworks, but that’s a problem I’m willing to live with.

    I see things like CakePHP and JQuery doing what for PHP and Javascript what Visual C++ has done for Ansi C (well to that extent, but you know what I mean).

    Yeah, if you wanted you could write an entire OS in C or Assembly for that matter, but why? PHP and Javascript were not created to do the the things we’re doing with them right now.

    I feel that a team of people working on a framework can do much better than I’d ever do. Yeah, a lot of the code won’t get executed, but who cares?

    Don’t get me wrong though, I’m not talking about not understanding underlying code. It’s all about getting things done.

  19. If the ‘pro’ argument boils down to “no, it’s good”, you’re doing little to convince anyone.

    I would never use one because if it takes me 20 minutes to knock out a site layout in CSS, then I expect to take another 20 minutes to fix rendering problems (usually weird IE bugs). Time spent not doing either of those things is a result of me changing my mind (I guess I wanted that on the left, instead of at the bottom, etc.). Frameworks won’t make me change my mind less often and it most certainly isn’t going to stomp out rendering inconsistencies, especially for the weird things IE does. The rest of my time, I consider well spent and a framework would do little to make it faster.

  20. A framework is a base for structure and a starting point. I personally don’t have a problem in a multi developer or designer environment in using them BUT I have seen in the Blueprint Forum at Google Groups people who are just getting started with CSS using Bluprint as some sort of template. It is not it is a starting point for people who know what they are doing. Who know how to control the box model and know how to ensure the design is not a clone that doesn’t deviate from the type, spacing or other defaults of the “framework” that is lazy.

    I too use a set of skeleton files but it seems ridiculous to have empty css if all your designs have key elements and certain content types will exist in 99% of your sites to retype them every time.

    I would say that before you use someone elses framework, build your own or learn the basics no matter what language or markup you use.

    An example: I think Ruby on Rails looks like a fast way to develop web applications but I don’t know method one in ruby so I am not going to try and write an entire app in it until I know Ruby. You don’t know where you’ve gone wrong or why you can’t get things to do what you want unless you have the basics. Debugging is as much a part of designing and developing as any other element and cannot be done by a framework.

  21. @James Thompson: It seems as though we feel the same way regarding frameworks in general. I too am a fan of the MooTools download process, but we’re different in that many developers see it as awkward.

    @Baz L: Please don’t mistake what I’ve written as me disliking frameworks. I think frameworks are completely great, and in general, they have sped my development considerably. What I was trying to say is that I don’t feel CSS belongs in a framework. To me, each project is far too unique to strap down to predefined classes and ids. I completely understand that frameworks can really help to get things done, but the application to CSS doesn’t seem fitting to me. What do you think?

    @Jermayn Parker: It’s not that you shouldn’t use it, it’s that you should take the time to see where it’s going, develop an opinion about it, and if circumstances fit, go ahead and let it help you. My main fear here is that up and coming developers will use CSS frameworks to structure each and every project they work on, therefore learning the framework as opposed to CSS itself.

    @c. s.: I will have to agree with you mostly, but I think that is because I’ve been writing CSS for some time, and I’ve got a process to writing it. It goes very fast for me, but for those learning CSS (myself included when I was learning) — things too forever. I think if I were just starting to work with CSS, something like a framework would be very attractive to me, what about you?

    @Jay Gilmore: Beginners attaching themselves to Blueprint was the basis of this entire article. Some other comments here, including yours, have shown that a framework could be assisting in controlling various elements of a site design, but that framework itself needs to be more-or-less written from scratch and then distributed to the team.

    Thanks very much for leaving your opinions, everyone. I truly appreciate it.

  23. For what it’s worth, I am currently using the reset.css file from Tripoli on a project. I opted not to use the generic.css or ie.css that are included with the “framework.” The rest of the CSS after resetting browsers is custom, but having those 15 or so lines of global resets really came in handy. I don’t think this is the intended usage of the “framework,” but I did appreciate the time savings and the additional thought applied to the elements being baselined. It goes well beyond the * { margin: 0; padding: 0; outline: none; } rule where many people end their resets.

  25. Ok really stupid question, is the following from Mr Meyers – http://www.webassist.com/professional/products/productdetails.asp?PID=135 a CSS framework or a plugin to a WYSIWYG environment. For me it’s both.

    From the looks of it you can design semantic and accessible CSS code without being an expert, and lo and behold you may even be a beginner, as with blueprint. It’s intended audience is captured here in a review by another industry CSS expert Mr Zeldman – http://www.zeldman.com/2007/08/23/eric-meyers-css-sculptor/

    IMO these highly respected CSS industry leaders are showing that CSS can be put in a logical framework. So where is the issue with blueprint?? Even for beginners.

    Blueprint is a very young open source version of a CSS framework, it may not work every time but still deserves it’s place in the dev toolbox. It has got everybody talking and thinking CSS again, and yet it’s flamed. Let me take 2 of the headlines for this post – stylegala – “No CSS Frameworks” and from above – “Please do not Use CSS Frameworks”.

    Other comments have mentioned there is no fast track to learning the web development art, and I agree 100%, but please let every type of framework or plugin continue to develop and flourish to spread CSS and learning of the art before making rather bold statements as in your headings. The industry does not need it.

    As you say “I don’t think there will ever be a place for frameworks when it comes to CSS.” and that is your opinion. The industry is moving fast and we need tools / frameworks / skeleton layouts, that we can rely on to get the job done. I am 100% sure blueprint and the pick and click version from Mr Meyers will help 1000’s of developers to do just that, experts and novices.

    Time to pack away notepad only design, life’s complicated enough. Long live the framework, and especially for CSS.

  27. The concept of sematic classes and ids is odd and pretty irrelevant, especially when coupled with the ‘maintain HTML purity’ riff.

    Why attempt to ‘semantically’ describe a document via ids and classes when the purpose of them is to provide hooks for css so pour machine can create a *visual* representation of a document ? Nothin’ semantic in a visual respresentation.

    Semantics is about giving *content* structure and meaning.

    If you have ever used an extra element so a visual design works, then surely such a practice blows a hole through any semantic class and id argument and related semantic html purity argument?

    I can’t see how frameworks limited ‘uniqueness’ -western music is made with by rearranging 12 notes and most web sites are pretty much rearrangments of less than 12 patterns.

    More importantly – inventing ids and classes for each and every site you build must hinder code reuse and portability? If you don’t have reuse and portability issues, then you are probably using a framework of your own making 😉 be it a collection of templates, snippets, whatever.

    (Note, the use of ‘you’ above is used in the general sense, not to address an individual)

  28. @Gr8-Ideas: You are absolutely right in questioning my opinion — there are plenty of very respected people in the industry who feel CSS frameworks are definitely a step in the right direction. I do see the value behind CSS frameworks as described in this comment thread as well as other posts written entirely on the subject. I do fear, however, that CSS frameworks will be used in the wrong way by those just starting to work with CSS-based layouts an semantic HTML.

    I certainly hope that development continues with Blueprint, and I’m beginning to fear that the headline choice for this particular article could have been better written.

    Thanks very much for taking the time to include your thoughts, I appreciate it very much.

    @Terrence Wood: I honestly do believe that there can be semantic value applied to both classes and ids. Naming a sidebar ‘sidebar’ as opposed to ‘leftcol’ or ‘rightcol’ makes more sense to me. Your classes and ids are still present in your markup, and therefore do not effect the visual representation of your document. They provide a link to the CSS which acts as our presentation layer. I can absolutely understand where you’re coming from, but I think we see things differently when it comes to this issue.

    When I put together a website, I use classes and ids in an effort to add longevity to the document, not lock it into a design. I try to do this by using meaningful identifiers when it comes to elements as opposed to visual identifiers such as ‘leftcol’ and ‘bigRedHeading’

    Again, I’m so very appreciative of the quality of comments on this article. While the title alone has skewed many opinions, the blame can be placed only on myself for choosing a poor title. I absolutely support the presence of these frameworks and I truly believe good will come with them.

  31. THIS IS A RE-COMMENT :: Originally commented when commenting was broken.
    ————-
    I really agree with this article. I feel deluged with “frameworks” of all types, not the least of which are the CSS variety. Blueprint, Triploi, YUI Grids, etc… it can be overwhelming.

    And not overwhelming like, “I’m so humbled by all these better ways of doing CSS.” More like, “How would I ever have the time to master several other people’s best practices for coding style?”

    I truly think that a developer operates best in his or her OWN framework. I, like many others, have my own little selection of CSS classes that I include in every project I do. I use them constantly and consistantly. They may not have as many column selectors as Grids, and may not have the same grade of hierarchal headings as Tripoli, but they work well enough for me… without bloating my CSS.

    Seriously, I find myself constantly coding new CSS classes as I design… mostly because what I need only takes 25 seconds to type out myself as I need it, and usually it specialized enough that a framework wouldn’t have handled it.

    Also, frameworks don’t really allow for adherance to semantic naming as they should. For instance, “col25” doesn’t help me when I need to change all sidebar “navigation” to be wider and aligned differently… and if your framework allows for such granularity than it’s a good bet that your class attribute is filled with six or seven classes… why not just write all your CSS rules locally for each selector, then?! 🙂

    Now, I’m overgeneralizing in some areas in the interest of time… but I really agree that better than a full framework is a small core set of a developer’s favorite homegrown CSS classes (which you could argue is a framework, but if you compare what I’m talking about with Tripoli or any fo the others, it’s not).

    A great general once said that plans are useless, but planning is indispensible. In this way I think coding is similar to battle, and frameworks similar to plans.

    Just my two cents.

  33. Semantics are an important part of the standards movement, but there are several key things to keep in mind:

    * The word “semantic” refers to meaning of any kind, it does not exclude presentation per se. This confusion arose because the early web was dominated by presentational code soup… but it still had semantics.
    * There will always be at least a small amount of markup that is purely for presentational purposes. In this case names like #leftcolumn are perfectly appropriate. If the element exists only as a CSS hook, then tell it like it is… don’t try to look for a higher abstraction.
    * Using the full array of HTML tags and attributes (and to a lesser degree microformats) is where the most bang for you buck is semantically. These things with agreed upon meaning are what allow search engines and other automated tools to make semantic sense of the content.
    * ids and classes are of semantic value primarily to the editors of the code. The name should be whatever is most useful to the programmer or designer, whether it be descriptive of the content, presentation or behavior.
    * The standards movement arose out of the need for sane web development practices, not some mythological benefit of semantic purity. Go look at some code from dot-com websites of the late 90s to understand how truly bad it was.
    * Semantic information about a document can never be complete. If you try to be too specific with class and id names you create the opposite problem of what we had in the 90s–you create a ton of classes with “semantic” names that all do the same thing–CSS soup.

  35. […] Esa es la pregunta que me hice tras el último Cadius Granada, me hablaron de unos frameworks para CSS y al verdad es que no terminó de entusiasmarme la idea, prefiero la labor artesanal de crear un CSS para cada proyecto, aun cuando mucho código lo reutilice de un proyecto a otro con pequeños cambios. Pues hoy he leído en Ajaxian que se hacían esta misma pregunta, y me quedo con la respuesta de Jonathan Chistopher en su artículo“Por favor no useis Frameworks de CSS”: […]

  41. I think there is a place for frameworks – especially in-house, possibly OSS – but they need to be semantic.

    Starting from scratch with every project is not efficient. It means that every time you go back to a project to make changes, you have to figure out what you did and how you did it and every time you want to add a new general purpose feature/hack you need to manually deploy and test it for each project you want to upgrade.

    On the other hand, a framework can only take you so far. We’ve come up with our own in-house approach that we’re placing with. We have found that looking across hundreds of projects we often have some subset of header, primary navigation, secondary navigation, tertiary navigation, primary content, secondary content and a footer, Obviously things like primary navigation could be across the top or a left or right hand sidebar – we treat that as a secondary level of information as we focus on the semantics of the content rather than the semantics of the presentation when developing our names (where possible). This means that in any given project primary navigation may be in completely different places or orientations, but it always serves the purpose of providing primary navigation. We then define “pods” which fit within a given content or navigational area and are specifically named for a give project (perhaps “Testimonial list” or “recommended products”) and we allow the pods (which are unique) to have a style (which can be shared) so if you have a pod in the right hand area which shows featured products on one page and testimonials on another, you can have two semantic IDs using the same class and have the option but not the requirement to customize the CSS for one or the other if necessary.

    We’re also working on pulling the meaningful data out of the css files and generating them so that in the future we could change our underlying CSS templates and then just regenerate them using project specific metadata so the intent of our presentation isn’t mixed up with the encoding into CSS to work with a particular version of CSS and set of browsers.

  45. First of all, I think you’re confusing the terms “Web Standards” and “best practices”. A site can conform to the (X)THML 1.0 guidelines while still using a table based layout, which wouldn’t be considered a good practice.

    Furthermore, I think you’re missing the point of Tripoli. It’s actually a great idea. What it does is that it resets ALL browser styling and replaces it with it’s own so that that all unstyled HTML4 elements will look exactly the same in every browser. You can check out these examples to get a better idea of what it does:

    The W3C styled document: http://monc.se/tripoli/examples/w3_w.html

    The unstyled document:
    http://monc.se/tripoli/examples/w3_u.html

    The resetted document:
    http://monc.se/tripoli/examples/w3_r.html

    The finished document
    http://monc.se/tripoli/examples/w3_f.html

    This should provide a much more “stable” scaffold to build your site upon. The downside is that it’s quite big in file size if you’re supposed to add your own CSS to it as well. It’s not a framework — it’s a reworked reset style sheet.

    However, I do agree with you on the point that a lot of CSS can’t be automated — but I’d like to make the claim that a lot can. Navigation, forms and typography are things that have very similar CSS and markup in every project, so streamlining that development process to speed up the development of those areas of a site, is in my opinion a great thing. You could even write your own “framework” (what a buzzword it’s becoming) with your own, more semantic class names for this, if you feel that the current frameworks aren’t up to par with your standards.

  46. @Steve: Thanks for your supportive comment; you and I seem to be on the very same page when it comes to CSS frameworks. The hard work of the developers shouldn’t be disregarded, it’s just that writing markup and style is definitely something which deserves a solid effort to truly grasp. The semantics are also something I take into consideration when looking at the picture as a whole. Thanks for taking the time to write so much 🙂

    @Gabe da Silveira: Your points are spot on. The topic of semantics is a breeding ground for opinion and great conversation. Many people feel that taking semantics to the level of CSS classes and ids is simply overzealous. Your points are well received, and thank you for including them!

    @Peter Bell: Indeed. I think at the end of the day a happy medium is to have a [fairly generic] template from which to base a project. Starting from scratch definitely gives you a bit more work to do that may not be completely necessary every time, but you’re right; a framework will only take you so far. At the end of the day, you’ll still be writing quite a bit of CSS even if you are using a framework. Thanks very much for your thoughts, and taking the time to write them here.

    @Fredrik Wärnsberg: You’re absolutely right — Web Standards and best practices should be separated for what they are.

    After giving Tripoli a closer look, I did note that it seems to have a better end-goal in mind as opposed to some of the other CSS frameworks popping up. Having a stable foundation does seem like a better idea to me as opposed to trying to solve every edge case and layout configuration at once.

    I agree with you in that certain aspects of design can be streamlined, and I do have a very limited structure with which I begin nearly every client project. I think at the end of the day, we feel similarly about the subject. Thanks very much for continually providing well-written and well-thought responses, I appreciate it!

  53. […] ” At their surface, frameworks seem like a great thing; unfortunately, that’s not the case. A big problem with frameworks is when up and coming developers attach themselves to a framework as opposed to the underlying code itself. The knowledge gained in this case surrounds a specific framework, which severely limits the developer. ” Do not use CSS Frameworks […]

  75. I agree with this post and with the majority of the comments. I personally have never used a css framework because I know how to code css and I know how to do it fast enough. When something needs a modification and change I know the underlying structure of it and what needs to get changed. I can spend my time learning a framework for css but why would I do that when I can learn the core of css which again relates to your opinions. If I look at JavaScript for instance I know that jQuery is mapping down to plain JavaScript and getting a function to find an element by its class name across multiple browsers is about 10-15 lines of JavaScript when in jquery its one single line. It’s good to know what is going on but, in the end I’m saving time writting those extra 9 -14 lines of code. In this particular case I think it does make more sense to use a javascript library. For CSS lets keep it out of the grid and let the creativity flow…. in my opinion.

  76. I know this is an old post, but I believe Blueprint framework has been overpassed by newer technologies such as SASS and Compass CSS Frameworks. Those I believe are really revolutionary to the way we think about CSS.

Leave a Reply

Your email address will not be published. Required fields are marked *