CSS Frameworks...?

HTML & CSS
1

Okay, this was kicked off by a deviation in this thread, where jaguarz asked this:

At some point, a suggestion was made:

A CSS Framework is a sort of set of pre-written CSS instructions (a library) that developers can use to “plug in” and start whipping out sites at a faster pace. It may come with things like a CSS reset (what is a “CSS reset”? Let me Google that for you), “default” containers that are commonly used (setups like a centered main container with one or two sidebars, main content and a footer for example), and chunks of seemingly random code whose purpose is to have the developer start out fairly cross-browser (depending on the setup this may be something like a separate IE stylesheet where [url=http://www.satzansatz.de/cssd/onhavinglayout.html]Haslayout is triggered on many elements, or clearing classes in anticipation of floats, etc).

Frameworks are getting very popular and I’m often mixing them up with CMS’ (like Drupal which is both a framework in the usual sense and also a Content Management System) which often have a lot of characteristics of CSS frameworks (esp since they are based on templating systems) and something called “OOCSS”.

No, that’s not a joke. Object-oriented CSS. Yes, CSS is NOT a programming language. Yes, CSS does not actually have objects, object classes, or object inheritance… but there are people who like the idea of “code reuse” as you have with Object Oriented programming (make objects (chunks of code or data) with certain properties and use variations of them all over the place instead of writing new, specific bits of code for everything). CSS does have inheritance and the Cascade; however the point of OOCSS is to make these reusable bits of CSS code “location independent”. I’m of two minds about that: I use location to reduce my code often, trying to let the defaults and container settings trickle through as much as possible. But this may simply be the Wrong Way with something like a template where users can move boxes around anywhere on the page.

To me, the result is messy, bloated HTML. Both with regular HTML template frameworks like Drupal and actual CSS frameworks, you get a lot of nonsensical-sounding class names, classitis, divitis, and 15 containers for a single line of text. Okay I’m exaggerating, 5 containers for a logo.


<body id="page_bg" class="color_green bg_green width_fmax">
<a name="up" id="up"></a>
<div class="center" align="center">
	<div id="wrapper">
		<div id="wrapper_r">
			<div id="header">
				<div id="header_l">
					<div id="header_r">
						<div id="logo"></div>
					</div>
				</div>
			</div>
			<div id="tabarea">
				<div id="tabarea_l">
					<div id="tabarea_r">
						<div id="tabmenu">
						<table cellpadding="0" cellspacing="0" class="pill">
							<tr>
								<td class="pill_l">&nbsp;</td>
								<td class="pill_m">
								<div id="pillmenu">	
								</div>
								</td>
								<td class="pill_r">&nbsp;</td>
							</tr>
							</table>
						</div>
					</div>
				</div>
			</div>

...

(that’s from a Joomla page used by a guy with a nice little site who does not write HTML or CSS himself… it is not a page using any particular CSS framework, but is a template which, regarding CSS, does share a lot of characteristics with css frameworks).

I really would hide my head in shame if any site of mine had that. I don’t care that it might be faster to get a site in the air (and I’m lucky I don’t have clients or bosses that insist on such things… and I realise not everyone has that luxury); that’s just… disgusting. Ew! Ew! Kill it with fire!

The Web Standards Evangelical Movement has been working hard for the last decade trying to get the web… semantic. Not only meaning from HTML tags themselves (with 91 elements, a bunch of them totally not relevant to 90% of web pages, this often means there isn’t quite the right element for the data you’re marking up) but also with id and class names. This is partially for developers, to help them remember the meanings. <div class=“a”> or <span class=“span-14”> means a lot less than <div class=“sidebar”> or <span class=“logofont”>.

However, this is seen by many as a sort of “dream” or HTML Utopia that, while nice to try for and certainly a goal for developers, in the real world, when both robots (templates) and non-technical users (clients who ordered a website from you, blogs, visitor comments, …all of which often easily make carefully crafted code invalid quickly) are manipulating web pages, is simple Not Practical.

When developing a template, for which you have no idea what the end users will determine which content goes in what box, it’s damn near impossible to know what’s going in span-14, but for your users you’re going to give it a style they can choose based on how they want the page to look like.

I thought the comments on Jeff Croft’s article here were terribly interesting (as with many bloggities, the comments are often more valuable than the article alone). What kind of a class name could you possibly come up with for a blue box who always sits on the lower-right-hand side? You have no clue what it will hold, you only know its presentation.

Or, you need to develope a bunch of sites quickly (one of the reasons BluePrint was created… like jQuery for Javascript, developers found themselves rewriting the same code over and over again). Deadlines can be the enemy of valid, semantic code (not that this is a good excuse or anything but it’s how it is in the Real World), and having a decent starting point that at least is valid and works cross-browser can make a project possible.

The question for me isn’t whether people should use CSS frameworks. I personally don’t, but I don’t make websites as complicated as Drupal. My largest CSS file so far is 38kb and a total of 2038 lines (non-optimised, so whitespace included). I have the freedom to hand-code and I like to think I’m pretty fast at it. But my side also has control over the content. The boss, or visitors, simply aren’t allowed to add <font> tags.
There are professionals in the front-end who care about semantics and valid code and do use frameworks. In fact, css frameworks are mostly built by these people.

The question for me is, is a framework something css/web NEWBIES should start out with? Or even look at? Esp. newbies are are coming from the back end, or programming in general? (these would be the people who have the most trouble with CSS, in my opinion).

Stubbornella (Nicole Sullivan-Haas) says this:

Current methods for writing CSS require expert level ability just to get started. To become a CSS expert, you need to spend couple years coding away in your basement by yourself before you are remotely useful.
[ bold is hers; particular article is linked in her name above ]
This is partially the argument for the need for “OOCSS” (and frameworks as well)… that someone has to spend all this time learning CSS… I’d argue it’s pretty much the same in any programming language as well, and I believe if you DIDN’T spend years coding away in your basement before offering your code to the world, you don’t know what to do when something breaks, because instead of leaning French you learned the phrasebook via Babelfish. I don’t want more people running around in my profession who can say “the cheese is old and moldy, where is the bathroom” but don’t know how to say “the bathroom is old and moldy”.

Are newbies unnecessarily re-inventing the wheel when writing out their float clears and triggering Haslayout the first gazillion times? When some pre-written code they can just add will do it for them and they can concentrate on other things? This same question holds for Javascript libraries, really. At what point is someone able to say “This is not a black box doing my job, but a tool that simply makes my job faster”? My opinion is, if you want to learn the language, then learn it first, before engaging in things like libraries and frameworks.

Second, when we’re trying shove web semantics down newbies’ throats, is introducing them to class=“block clear-block block-clear clear-clear-block-clear-block” going backwards? Or is it the future as sites become simply too user-interactive (the users/visitors, not the web devs, are manipulating and adding the content of the sites)?

Are we encouraging bloat when presenting frameworks to newbies? I continue to see newbies and not-so-newbies using the Meyer CSS reset, or older versions of the reset, or the very similar Yahoo reset. Removing padding etc from deprecated elements, removing borders from elements who never have them to begin with, and the two that really bother me… removing outline from focussed elements with a cute little note afterwards telling people not to forget to add it back in (guess what? Just about everyone forgets) and the little note I keep seeing about how cellpadding or cellspacing is still necessary to add to tables in HTML. This might be from an older reset but I see it in brand-new pages. And if you don’t have any tables on the site? Yeah, one line of code isn’t going to break anyone’s modem or server, but why keep bloat? No, why introduce it in the first place?

Should visitors be downloading a stylesheet for resets, a main stylesheet, a typography stylesheet, an IE stylesheet (or three), and whatever else, just to visit a page? What about One GET Request To Rule Them All? (not that any framework would stop you from goobering all those separate styles together into one file, but sites seem to have several stylesheets because they started out that way)

Okay, rambling over, here are some links I ran into back when I first heard of these things, lawlz:

Basic intro, quick list of pros and cons, and then a seemingly exhaustive list of frameworks… really I’ve only heard of Blueprint, YUI, 960grid and the OOCSS…
http://www.w3avenue.com/2009/04/29/definitive-list-of-css-frameworks-pick-your-style/

Semantics and OOCSS? Or, CSS “macros”? Lord knows, among our wishlists for ponies and other css goodies, some of us have wanted variables.
http://memerocket.com/2009/03/28/oocss-sass-fewer-classes-on-your-elements/

Yeah, I called them abominations, mostly because I can. I do believe they are useful, valuable tools for many developers, and we all know visitors never look at a site’s underwear (only web devs do that). But I don’t want my code to look like that, be organised like that, and I don’t want newbies’ codes to smell like that, but I have the freedom to avoid framesets and not all newbies intend to learn CSS or front-end web development, but instead are just trying to get a decent page in the air for the boss.

Anyway I’d like this thread to be a collection of yea’s, nay’s, and examples of when you guys have used or considered CSS frameworks, OOCSS, and the like. What one did you use and why?

2

Personally, I really don’t like the idea of them at all, and have avoided them so far… I don’t like the idea of having to have my code conform to whatever standards a framework might require - and I would hate it if my code ended up like the example you pasted above!

I don’t know much about them in terms of making CSS easier to learn - we all managed without them before these kinds of framework existed so it can’t be too hard to learn about it!

I do think CSS needs to evolve a bit though and add certain ‘programmatic’ elements to it, such as variables/constants, nested selectors perhaps, and regular expression selectors - which would allow back-references to be inserted into the properties/values of that rule. I know there are some third party apps that do things like this already (nested selectors etc) - but the trouble comes when trying to use generated stylesheets in conjunction with something like Firebug - all the line numbers get messed up and it’s quite hard to debug!

I have, for some sites, developed my own CSS ‘framework’ for want of a better word - just some pre-defined class names to help the site owner (who is technically minded and knows HTML etc but just needed some help with the site build) lay boxes and images out on the site, with a simple grid system.

3

I don’t have a problem with CSS frameworks (in the current, code snippet sense) as long as they are written by the person implementing them. We all know well what reliance on third party components does to our code (just look at the issues Flash causes) or being dependant on something which may cease development at any stage. I firstly have a problem with them being called frameworks, they are NOT a framework, they are nothing more than a library of reusable components. CSS Library is the correct terminology, CSS Framework implies that the code provides some kind of structural backbone to continue coding further… this isn’t the case, in CSS what you add overrides the default, inherited or existing values. No such symbolism of frameworking exists. I do think CSS Libraries give us a role model for why browser-wide, well written and optimized code can present us with a much more agile and less problematic existence, but it has to be said. Using someone else’s code in such a fashion is basically the same mistake being made as cut-and-paste JavaScript from the 90’s, it’s allowing people to depend on other people rather than learning how to produce what they need as they need it (and thereby increasing the potential for ignorant coding and unnecessary bloat).

4

I had to build 5 templates for a site last week based on the 960css framework at a clients specific request. I’d already discussed why I didn’t like using frameworks but was of course prepared to do what the client wanted as ultimately they pay the bills (and thought it would be fun anyway).

The reasons they had for using the framework was so that the team could follow a documented structure and understand how things were placed and how to change and add elements and columns in a consistent manner. Whether this does in fact helps them remains to be seen as they are working with it now and I will let you know what the outcome is.

From my point of view the initial construction using the framework may be of interest to you. Obviously this was my first stab at using it so there would obviously be a learning curve to take into account.

Bearing that in mind the first template took me 3 days to complete when normally I would complete it in a day. Some of that time would be in learning how to use the structure and investigating the proper techniques needed but most of my delay was in trying to place content that lay outside the grid.

Although the client specifically designed the site based on the grid template dimensions they did not take into account shadows and erroneous overlapping elements. Therefore 50% of the elements could not fit into the grid as the shadows lay outside the grid and I had to create another grid outside of the grid so that I could add shadows to the grid elements.

There were very few tutorials available and the ones I found were pretty simple and showed nothing more than a few square elements floated across. There were no real in-depth tutorials or if there were I didn’t find them.

In places where the design matched the grid then work progressed quote smoothly but because everything is floated every section needed to be cleared with div style=“clear:both” in the html which is messy. IE gets very cranky if you don’t have a hard clearer where multiple floats are concerned and indeed if you have uneven height columns you have to have a 100% wide clearer to make sure everything starts on the next row.

I soon got used to the structure and adding alpha and omega classes and adding up grid_16 and grid_8 so that it fits into grid_24. However, after a while I had real problems locating the elements in the page I wanted to work with.

The page was a very long page with multiple elements like a newspaper and simply searching through the html became a nightmare because there loads of grid_8 elements and they were nested within other grid_elements. Therefore I had to go back and add extra classes to the grid elements so that I knew what they were for. This of course is introducing redundancy as one class would have sufficed from the start.

In the end I only used about half a dozen different grid elements so that means that 90% of the grid code is redundant and kept in place just in case someone wants to add another sized grid later.

When I had finished I tried to think what use the grid had been and what job was it doing that could save time. In effect all it does is makes you use elements of a set width or a width divisible by the framework you are using and then floats them across the screen for you. Something you would normally do in your sleep.

For beginners it may be useful in that it handles clearing and the double margin bug and makes sure that things actually fit. We often see in the forums broken layouts because an author simply can’t add up correctly and the grid should help avoid this.

The defaults and resets obviously give beginners an even start also but most experienced coders have their own set of defaults anyway.

My conclusions are that if the design is made to fit the grid then beginners or intermediate could use the grid quite successfully but as soon as something unexpected crops up (or the design deviates from the grid) they would be lost and find it difficult to resolve.

For my own part I still can’t think of a reason to use it as it’s not doing anything that I can’t set up in ten seconds anyway. It may be useful for wire framing a project quickly but how long does it really take to code three floats across the width of an element.

There may as yet be unseen benefits form the clients perspective though and these may outweigh my reservations but only time will tell.

5

Interesting to see your thoughts on it Paul… I always saw CSS frameworks as unnecessary, and basically a result of trying to apply something that is useful in programming (eg PHP frameworks) to something that works differently, and doesn’t need one.

6

Maybe it’s just something in my brain or whatever, but I like CSS frameworks. I find them easy to understand and easy to use. I also don’t have a problem then refactoring the code to remove any extra unused stuff.

So many CSS expert types don’t really have an understanding of the visual or typographic grid. Yeah, great that you can make floats do their thang. Pity your website looks like it was slapped together by an East German architect.

It would be remiss of me not to point out Kevin’s talk on this topic. I’ve seen it a couple of times and it’s pretty good.

7

Some time ago I posted this uri for others to watch:
http://www.stubbornella.org/content/2009/03/23/object-oriented-css-video-on-ydn/

I’m currently working in a blueprint css environment, and from this experience I can say it ‘constrains’ designers to unify their process (no edge cases).

Essentially, frameworks adhere to a unified out of the box pattern.

8

Thanks for the link, Raena. It answered some of my questions. Still, though, I will steer clear of CSS frameworks. CSS is one of the few things I can understand (more or less) and write myself (along with HTML)—as opposed to things like jQuery and the PHP behind CSMs etc. The last thing I want to do is have someone write the CSS for me.

As Alex said, though, it does make sense to develop one’s own frameworks for repeated use. Maybe my views don’t count, as I mainly do simple layouts, but even something like a 960-type grid I’d rather code myself, from the ground up.

My two razoos worth, anyway.

Off Topic:

Hey Raena, out of interest, why do some users’ online status indicators—including yours—sometimes appear red and indicate that the user is “invisible”?

9

Was that quote was directed at me?

10
Off Topic:

Ralph: because you can suddenly see when people are invisible, due to your new status as semi-god. Me, I want to know what the * after some names mean.

So many CSS expert types don’t really have an understanding of the visual or typographic grid. Yeah, great that you can make floats do their thang. Pity your website looks like it was slapped together by an East German architect.

I think this might be true. I absolutely do NOT think in grids (now I’m also absolutely NOT an artsy-fartsy person but frankly I don’t see those people as thinking in grids either… they are weird artsy-fartsy people because they don’t think in boxes!) and I like that I can take (not create) ANY design and just build it in CSS. If I had to wrangle a framework… I’d prolly go hire some 12-year-old whiz to do it for me, because I don’t see the point of the extra work. I’d die dealing with <div style=“clear: both”> every 7 lines. Oh wait, I have: Magento. Terrible! I hated every minute of wrestling that alligator.

Raena, does my site look like it was slapped together by Komrade Heilmann? Yesh I can makez teh floatz does their thang. As a non-designer, it looks like a bunch of boxes. But I still doesn’t use a grid system. It would not help.

*edit: I have to say, it’s very good that you added that link, Raena, because it links also to other CSS framework articles that I did not know existed (I never bothered to do a search! Didn’t occur to me). So valuable to others in that way as well (I don’t have Flash so I can’t watch the video unless I go turn on Windows).

Your site looks clean, not Communist. : )

11

I was wondering who the “you” referred to, but then realized it was a generic you.

No, my graphic designer colleague judges everything by eye, definitely.

Off Topic:

Stomme poes: Me, I want to know what the * after some names mean.

Hmm, I’ve never even noticed that.

12

I’m more of a geriatric “you” :slight_smile:

13

Hmmm, you’re not suffering grand natal depression, are you Paul? :wink:

14

blush Sorry.

But if your website looks like East German architecture, feel free to take it on :wink:

15

I was ready to take the hit :slight_smile: (I can mark it up but I can’t tell red from green)

16

I’ve never used a CSS framework. I am still not sure whether or not they are a good idea on principle. The idea behind it is good, without question. It’s the way these things are written that bothers me and all that unused code… I don’t know. One could argue that CMSes aren’t any better or that most of us use no more than 20% of an application’s functionality anyway.

Non-bloated, efficient, smart, and reusable CSS…I don’t think this has to be from the realm of Utopia. Baby steps.

17

Yeah. I can’t even claim to use 10% of my brain, either. Sigh. :-/

18

The main problem with frameworks is very easy to remedy, you have all your most used source code in a huge library that’s well indexed, then you copy and paste all the components you want to make use of in each design. That way everything is agile, well documented and you don’t have bloat issues as you only plug stuff in as you need them. Most developers re-use stuff all the time, it’s just 3rd party dependency I have issues with (we don’t need a cut-n-paste era again) :slight_smile:

19

Whenever I have gotten a request from a client for frameworks because they want to easily modify, I find that simply commenting the code clearly and telling what does what does what they want.

I tried to do a framework for a friend (back when I first started CSS, I didn’t feel good enough to ask for money) and it was a horrible experience to be honest. Now that I’m proficient with CSS I still am a bit hesitant to do a framework but if someone requests it I guess I’ll give it a shot :slight_smile:

20

Aaaaaah replicating code everywhere has potential for disaster unless you try and prevent someone from changing it. Otherwise you have fifteen different copies of the same thing.

I have a big fat girly love for Less CSS as it lets you use variables and such. So, for example, if I like the idea of one ‘column’ being 30 pixels, and I want to use that sort of construction, I can define these as variables and then blend them into a handmade CSS file. It’s the bomb.