CSS coding process

[Stomme_poes]

Oh! Berliner! You found the guy I was talking about! Not John, it was Jeff Croft!

He has somewhere a blog page which, while the article itself is about what he meant in his Zeldman comment, the comments below go all into the classnames in the frameworks etc. I found it very interesting to read (though I still don’t personally have any use for frameworks).

[berliner_kindl]

@Stomme_poes

I agree that a team working on something will have (ideally in a local wiki) the class names all defined and well-understood, and you also have a point that, once a site gets large and complicated enough that the inevitable descriptive names start weaseling in, they’re going to take any new guy some time to learn.

I should go try to find that John guy’s blog where he describes why blueprint/960 has descriptive, positioning-based classnames. Uh, it’s a brown blog with yellerish text, the guy’s name is John and he is one of the writers of I think 960, and he had a post once where everyone jumped down his throat because he said something like “don’t listen to Zeldman” (I guess all the people who pounced on him didn’t understand what he meant… don’t blindly do what Zeldman says Just Because he’s Zeldman).

All those aside, and the fact that you as a 15-year experienced web dev aren’t using frameworks due to lack of CSS knowledge, I still would not recommend a framework to someone struggling to understand CSS, get it under their belts, and especially not when the rest of us are still sorta fighting for the semantic web (unreachable utopia that we know it is).

span-14 is an awful class name, one I’d only use out of desperation. If it were part of some system I was forced to work in (for time constraints or because the company I worked for just Did Things That Way) then I’d deal with it, but it’s gritting your teeth and accepting some garbage to get the job done. I’d say the same about using something like Drupal: it has so many other advantages, people find good reasons to use it, but without HTML/CSS knowledge (or the time to dick around with such a system), you get Cetaceous Bloataceous steaming piles. That makes working with them harder… someone, I thought it was Gary but might be deathshadow, likes to say
the more code there is, the more code there is to break

There’s an advantage to minimal, semantic markup. Frameworks don’t have those advantages. They do have other advantages, but not generally ones I would choose to use nor what I would suggest to guys like the OP. (similarly I’m learning Javascript and refuse to latch onto any of the libraries at this point… that’s for later, when I’ve learned how to build wheels and can then look at any given project and choose if it’s better to use pre-built wheels and faster development from jQuery/Prototype/whatever.)

This is all just my opinion, and I have not been working in the web area anywhere near as long as you (only a few years).

Who says frameworks have to be bloated or not semantic? I mean, you can write your own framework as a starting point and then tweak it for each project. For example, having a standard CSS reset block, typography block and forms block to start with saves hours upon hours. Sure you can go in and tweak it, but I love starting with at least those three blocks. Most n00bs have no clue what a css rest is or why you would use it, but frameworks like Blue Print teach that from the get go.

You want to know what the bottom line is though? I made $50,000 in 2008 on 5 projects. I made $110,000 on 15 projects in 2009, 10 of them were on frameworks, the others were custom. Using codeIgniter, BluePrint CSS and jQuery makes all smooth and fast. I’d like to think my code is clean, human readable and not bloated. Sure there are maybe 20-30 lines of CSS in my screen style sheet I didn’t use (say, span-17 or append-4) but so what, I haven’t heard the annoying sound of a modem in over a decade and 30 lines of code slows down a site by like 0.0000001 seconds LOL.

One thing I love about BluePrint is coming back to it in 12 months for updates, for one it all makes sense since I know the framework and I don’t have to remember what .blog-photo-left was, AND if I need to add a new row of content, which I do often on news sites, I can add in a few of those spans, height: auto and be done with it, in like a half hour.

The semantic thing, i agree, I wish, but not real world. The real world is deadlines, updates and paychecks.

[berliner_kindl]

@Stomme_poes

Oh! Berliner! You found the guy I was talking about! Not John, it was Jeff Croft!

He has somewhere a blog page which, while the article itself is about what he meant in his Zeldman comment, the comments below go all into the classnames in the frameworks etc. I found it very interesting to read (though I still don’t personally have any use for frameworks).

I know Jeff personally from events here in Seattle. He’s written several articles on how to use Blue Print.

I’ll be at An Event Apart in April, i am sure this will all be discussed, it’s interesting.

[AcklenX]

@gary_turner

Tabs show up in most viewers as eight spaces, entirely too much space for easy reading.

Tabs sure do make for easy editing and alignment though. And most editors allow you specify the tab size, but not the space size… So if some people prefer 2 space indents or 3 or 4 or 5 or 8 they can have it the way they prefer if you DO USE TABS.

I worked in a pair programming (XP) shop where tabs were required just because of that. It was funny because up until that point every single one of those developers preferred spaces (just different numbers of them) for indents.

[Stomme_poes]

I think he meant, don’t tab this:

#element {
        float: left;
        jump: right;
        hoola: hoop;
}

Though it doesn’t look too bad to me (I like 2 spaces which is screwing with typing JS). I do use my tab (in my editor it’s set to 8 \s, not 1 \ ) for related elements:

#element {
  foo: manchoo;
}
        #element a {
          coo-coo: ca-choo;
        }

However it generally doesn’t get further indented than 3 or four levels… after that, it’s as Gary described… not helping me read it.

[gary_turner]

@AcklenX

Tabs sure do make for easy editing and alignment though. And most editors allow you specify the tab size, but not the space size… So if some people prefer 2 space indents or 3 or 4 or 5 or 8 they can have it the way they prefer if you DO USE TABS.

You can specify the tab size for your editor. The problem arises when someone else has to view the source, and finds that nested elements only a few deep run the text half way across the page. See this from html 4.01:

The horizontal tab character
The horizontal tab character (decimal 9 in [ISO10646] and [ISO88591] ) is usually interpreted by visual user agents as the smallest non-zero number of spaces necessary to line characters up along tab stops that are every 8 characters. We strongly discourage using horizontal tabs in preformatted text since it is common practice, when editing, to set the tab-spacing to other values, leading to misaligned documents. [emphasis added]

I worked in a pair programming (XP) shop where tabs were required just because of that. It was funny because up until that point every single one of those developers preferred spaces (just different numbers of them) for indents.
Those developers had the right of it. Whoever was running the workshop was either working in a homogeneous shop, or just didn’t know any better.

@Stomme_poes

I think he meant, don’t tab this:

#element {
        float: left;
        jump: right;
        hoola: hoop;
}

Though it doesn’t look too bad to me (I like 2 spaces which is screwing with typing JS). I do use my tab (in my editor it’s set to 8 \s, not 1 \ ) for related elements:

#element {
  foo: manchoo;
}
        #element a {
          coo-coo: ca-choo;
        }

However it generally doesn’t get further indented than 3 or four levels… after that, it’s as Gary described… not helping me read it.

Mostly true. I feel that two or three spaces is sufficient for any nesting indents. I would not treat your ‘related elements’ as you do, but there is certainly a rationale for your method. There is nothing wrong with using tabs, if they are converted to spaces on save. I have configured both Emacs and Tidy to make the conversion.

cheers,

gary

[Stomme_poes]

There is nothing wrong with using tabs, if they are converted to spaces on save

Mine are converted upon typing. Instead of making a real tab, it inserts 8 \s instead, so hitting the backspace immediately has me going back one space at a time, not back to the being of the tab.
That’s in gEdit, I haven’t actually looked in vi and instead have been just typing spaces, lawlz. one of those secret :settings I never bothered looking up.

[SpikeZ]

***All off-topic posts have been removed, please keep the thread on topic from now on ***

[dnordstrom]

I use 2 spaces, it’s just my personal preference for readability.

Can easily be set up in TextMate by selecting “Soft Tabs: 2” at the bottom of the editor.