Hi everyone. I just needed an input on my CSS coding process and practices.
Heres my process…
Am I doing this right? Any advice? Anybody do it a different way?
this is my basic process. These are not, by any means, all the steps involved.
You have three steps just to complete your css. Why dont you just write clean commented css to begin with? Do it right the first time around.
It sound to me you are doing fine… is hard for me separate the process as I work more as a single issue… anyway… yes…
I’d agree with toejam. If you write your styles without having them organized from the git-go, you’ll end up just throwing stuff at the wall to see what sticks. You won’t easily be able to take advantage of the cascade part of css, and end up way over-specifying each ruleset, leading to having a lot more rules than necessary. Remember, unplanned code results in a tangled wad of brain cramping confusion.
Always, always format your stylesheet for human readability. Those white spaces have a negligible effect on bandwidth. Separate each ruleset with a blank line. Align the selectors left, and indent the property/value pairs, each to its own line. Indent only two or three spaces. Do not tab; use spaces. Tabs show up in most viewers as eight spaces, entirely too much space for easy reading.
cheers,
gary
thanks Gary… very insightful advice… I use to do it exactly like how you described… but Ive learned (from myself anyway) that doing it that way sometimes leads to overaanalyzing each and every selector and eventually led more time to do it… The reason I did this post was an experiment to expedite the whole process and cut down on the CSS coding by hours. (note: CSS )
I understand that having a good semantic XHTML code is paramount before CSS (Knowing what elements you’re working with makes it easier) but then again that wasn’t the topic here.
Anyway the end result is the same as before… only faster… but thanks to you Gary…maybe its the wrong way to go.
By the way .I have another question… You know when you go to “View CSS”
on websites… How do you get rid of the extra space or “tabs” on the code itself:).
I KEEP GETTING THIS…NOTE TE TABS OR SPACE IN BETWEEN
#logo {
width:913px;
margin:0 auto;
padding:27px 0 25px 0;
}
I WANT THIS… NOTE THE SINGLE SPACING…NO TABS
.section_article{
margin: 135px 0 0 1000px;
float: left;
width: 1000px;
position: absolute;
z-index: 2;
}
Hm, in my browser I don’t get those spaces when viewing CSS, but I get them when copying CSS (if I’m copying from a browser to a text editor).
So I think those spaces you see are actually in the css file itself, and the author has copied that at one point, where the copying mechanism added the spaces.
http://stommepoes.nl/furn.css should show no spaces between every line. Now copy it and paste into some text editor. You might well get a space between every line.
It can depend upon the server platform and how the CSS file was transferred via FTP as to whether you get additional carriage returns/linefeeds. Modern text editors generally recognise all flavours of CR/LF newlines and allow the user to convert between the different standards. I don’t think Notepad does.
^it bloats your HTML until it looks like Uncle Fester : (
Use it with discretion.
why would you think that? the only thing you add to the markup is class names.
nasty nasty nasty classnames. Why nasty? Too many of them, and they have no meaning (yes, I read the blog by John-whoever who explained that when these classes are for arbitrary page positions, there often aren’t any decent names the template-writer could possibly think up). I would not want any code of mine to look like this:
Blueprint:
<div class=“span-11 prepend-2 feature-home-text”>
960 (seems to be coupled with wordpress so it’s even worse):
<body class=“wordpress y2010 m01 d28 h04 home page pageid-18 page-author-matt page-template page-template-home-php”>
<div class=“container_12”>
<div class=“grid_7 prefix_1”>
<div class=“grid_2 alpha”>
YUI:
<div class=“yui-t5”>
<div id=“yui-main”>
<div class=“yui-b”>
(I’m also religiously against Yahoo’s reset, it’s a lot like Meyers’)
Yaml:
<div class=“subcolumns”> <– this one’s great, I know what it is!
<div class=“c50l”>
<div class=“subcl”>
Drupal (isnt using a grid yet, though they intend to include at least one gridded template in D7):
<div id=“block-comment-0” class=“clear-block block block-comment”>
(I’ve seen worse with at least 7 different iterations of the words “block” “clear” and “comment” in it. And people complain Perl is write-only : )
I’m not saying these aren’t time-savers (they obviously are esp for people who either can’t code CSS easily or, as the 960 guys put it, when one needs to spit out a bunch of similar sites in a very short time). As Stubbornella says:
I’m just saying there’s no way in hell I’d allow butt-ugly code like that in my HTML just to save time. But I have the freedom to say stuff like this: I’m a hand-coder and don’t have to kowtow (currently) to any templating systems making my life harder.
The original point of CSS was to make individual HTML pages lighter and I think grids move back to the ages of align=“center” in some respects.
I am aware of one person who found the extra, unreadable class names such a problem that they modified one of the popular grids so as not to add those classes… I ran into it while looking at “oocss” once, but dunno where it is now.
I guess instead of telling someone “just use a framework” I’d tell someone to look long and hard and decide if they are willing to go into the dark ages of divitis and classitis just for easier CSS. Sometimes it may well be totally worth it, and other times, just another way for the maintainers who come after you to lose a lot of hair. I certainly never liked the idea of 5 wrapping divs just for what may be a single line of actual content.
I’ve been building sites now for 15 years and am a master CSS designer. I’ve hand-coded huge sites (just finished a site for a national grocery store chain) and I’ve also used frameworks. What you’re failing to mention is that with any framework you can customize it, change any names you don’t like and remove all of the class definitions you didn’t use. The beauty of frameworks like BP is that everything is floated correctly, cleared and simple, so you have many, many fewer tweaks to go back and do.
What’s wrong with a class like this?
<div class=“span 14 append-1 last”>
That is very informative, you know it’s width instantly, it’s margin instantly and that it is cleared… it works very well when there is more than one person on a project.
I supposed I could use:
<div class=“a”> which would save a hell of a lot of space, but now, what was “a” again?
<div class=“span 14 append-1 last”>
Yeah, I would NOT want to see this crap in my code. You cant just think of yourself when you code. Maybe you have trained yourself to read and understand this garage, but a fresh set of eyes would not, unless they too have trained themselves.
Or unless you work on a team who uses the framework every day and knows exactly what it means. A quick scan of the style sheet tells you exactly what it means. Even YOU know what it means, you’re the one who brought it up, so what does that say for it? LOL
Just like anything, if I took over a site you built two years from now, I’d have to figure out what all of your class definitions means, so why not use a naming convention? have you ever built a national brand site with 10 designers on a team?
what? i didnt bring it up. I understand the need for a naming convention, and totally agree that one needs to be in place. Lets develop a universal one that everybody understands, not just your team.
As simple as css is, rather than customize, rename, and delete unwanted stuff, just write the stuff to begin with.
The beauty of frameworks like BP is that everything is floated correctly, cleared and simple, so you have many, many fewer tweaks to go back and do.
Odd, I never have a problem floating elements correctly, and I rarely have any need to go back and tweak anything I’ve written. Use of a crutch that doesn’t bring anything substantive to the table will only retard your progress toward css mastery.
What’s wrong with a class like this?
<div class=“span 14 append-1 last”>
That is very informative, you know it’s width instantly, it’s margin instantly and that it is cleared… it works very well when there is more than one person on a project.
Uh, it contains an invalid class token? Maybe because it tangles presentation elements into the structure? All in all, an example of poor practice.
I supposed I could use:
<div class=“a”> which would save a hell of a lot of space, but now, what was “a” again?
That’s a specious argument. The token is completely non-semantic, and is the same kind of stupidity that Dreamweaver brings to the table. The class and id tokens should clearly state what the element is. It should not reflect its presentation, or be some meaningless “code”.
cheers,
gary
I’m sure, through your 15 years of CSS mastery of course, that you already know this, but a class named .14 wouldn’t work.
it should have .span-14
BTW we use the ID to describe most DIV’s as thats what we reference with PHP and jQuery.
Take a look at some of the better agencies out there like Happy Cog, Blue Flavor, 37 Signals and you’ll see them using frameworks. I guess i shouldn;t use CodeIgniter or Zend for PHP either because it’s a “crutch”?
This site is full of pros!
Back to the OP:
Find the workflow that works for you and run with it. I happen to think that on soe projects, at least for mock-ups, framworks speed things up considerably. There’s nothing to say you can go back and change the names of all the framework classes definitions or, better yet, make your own framework. but writing them off as junk is retarded at best.
Here’s a few interesting blogs from Jason Fried (37 Signals) and Jeff Croft (Blue Flavor)
http://jeffcroft.com/blog/2008/jun/04/why-we-dont-skip-photoshop/
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).