10 May 2008

Yes, I'm CuSS'ing

I spent the day converting CrimLaw from html tables to CSS. The claim is that it will make the blawg download faster. I can't tell a difference, but maybe it will help one of ya'll.

As to CSS itself, I'm not impressed. It struck me as just being a highly stylized, longer-winded, more formal way to do everything I'd already been doing in plain jane html. The only thing which provided even a little more flexibility was "float" and even that was limited. Of and by itself, it wasn't worth it.

Of course, I wouldn't want to tell that to the author of the book I bought to teach myself CSS. Parts of the book read like a proselytizing religious tract. Thou shalt not use tables or these commands. Thou shalt use blocks and those commands. The only two rational reasons given were the aforementioned increased speed of page loading and improving the ability of programs for the blind to read the page. I'm not too moved by either. I'm not seeing much greater speed - maybe a little, but the page design had to be dumbed down to fit within CSS's parameters (smaller video, removal of bar with credits in it, only one block for cites), so it should be faster. As for the problems with programs to read for blind people, that's a flaw in that program, not in html tables.

I suspect it's like most things. What evolved was messy. There are always people who don't like things messy. These people will put together something that is more formal, trading 50% of their flexibility for 5% improvement. Thus, when I was in high school and everyone was using Basic all the computer wonks were pushing Pascal as a "better" language. I guess some things never change.

As you might suspect by now, I got frustrated doing this today. I'm not satisfied by the blawg as is. Part of this, I'm sure, is that the book I used limited itself to basics (telling me to go buy this or that book for more advanced CSS applications) and I'm frustrated that I don't know the tricks which will allow me to do the things I want to in CSS. I'll learn and hopefully the layout will improve.

7 comments:

KG2V said...

The HUGE difference is that done RIGHT, you totally seperate the "content" of your web page from the "Layout" of the web page

Then you can start getting fancy (I don't) - for instance - detect which browser the person is on, and feed them different CSS based on Browser or personal prederence (if they have a login)

Like I said, the main idea is to seperate content and layout. It gets even more interesting is you get to the point of moving your content over into xhtml, and you can start using "descriptive" tags for your data. For instance, tags that say, "this is a Federal Cite" vs "This is State" etc - and you can then tell the CSS "format those differently"

Excuse any poor typing tonight - it's 3:15am - been up in pain since 2:45, waiting for my pain meds to kick in enough to go to sleep

Anonymous said...

You're missing a "home" button. Maybe make the logo clickable?

Ken Lammers said...

kg2v,

Yes, I see that and if the layout were going to be multiple use, across a variety of pages, it would make more sense. And you've confirmed my suspicion that there more advanced functions which can be tapped into because of the separation.

However, for first time user me this translated into a lot of checking the preview, seeing an error, and then returning to the layout page and scrolling back and forth between the top and bottom of the layout trying to figure out what I screwed up. Still, as I said in the post, I've been using tables since 2003 and am extremely comfortable with them. 5 years from now I'll probably feel the same about CSS.

Next step: javascript.

Ken Lammers said...

Gideon

Sorry, I meant to link to the logo. I'll fix it.

Windypundit said...

Probably one of the most useful CSS bits for me has been defining and using classes. It allows me to flag different types of content and control their appearance from one central location. (I see you have already defined classes ".commenthidden" and ".commentshown")

You could also use classes with elements, such as defining CSS for "blockquote.blog", "blockquote.court", and "blockquote.statute". Then you could add 'class="statute"' to a blockquote element when quoting from a statute and use the CSS to style each different quote source slightly differently. Or not.

Also check out all the margin, border, padding, and background CSS. They offer a lot of careful control of appearance.

I'm not convinced of the evils of table layouts, but I've switched to CSS layouts just because everyone else is doing it. CSS helps separate content from layout, but to do it in the real world you have to use a templating engine, like Blogger or MovableType or Wordpress.

You mentioned Basic and Pascal: The original Basic programming language was fine for small programs, but it became harder and harder to use on larger programs. Pascal solves some of that. All modern computer languages include Pascal-like features (including Javascript, PHP, and Visual Basic). I've worked on 200,000-line programs maintained by teams, and you really begin to appreciate modern language design under those circumstances.

A lot of these kinds of computer wonky things make a lot more sense when used on large-scale projects. If us bloggers were instead maintaining 50,000-page e-commerce sites, we might appreciate CSS a lot more.

Finally, if you're going to switch to more formal web development, you might find it helpful to try to get your site to generate 100% valid HTML. The combination of valid HTML and CSS is supposed to make your page display much more consistently across different browsers, and advocates claim it helps with search engines.

According to the site validator.w3.org, your page has 2156 errors. That's not as bad as it sounds because your page has about 80 posts on it and each HTML problem can produce 3-5 validation error messages, meaning that fixing a single template problem can remove 300 validation errors.

Then again, validation maybe oversold: Google isn't valid (64 errors) and neither is MySpace (148 errors) or Amazon (1397 errors), yet they seem to be enjoying some success.

Windypundit said...

Sorry, man, I went all geek on you...

Anonymous said...

Ken, I don't care one hoot what you do to your site and how you do it. Just as long as it is there when I want to read it and something new and interesting is on it. What am I saying, it is always interesting.

Now after this, do I get that special plea, if I ever should need it? :)