SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29
  1. #1
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face CSS coding process

    Hi everyone. I just needed an input on my CSS coding process and practices.
    Heres my process...
    1. I have my XHTML markup , then code my CSS.
    2. After the CSS is done, I take my unorganized and unoptimized CSS code
    to cleancss
    3. After cleancss, I put on the final touches on CSS with comments.

    Am I doing this right? Any advice? Anybody do it a different way?

  2. #2
    SitePoint Enthusiast CupidsToejam's Avatar
    Join Date
    Jun 2009
    Location
    TX
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is my basic process. These are not, by any means, all the steps involved.

    1. gather content
    2. organize the content into meaningful, semantic, valid xhtml or html5.
    3. design prototype (in Photoshop or Fireworks)
    4. Design with css.

    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.

  3. #3
    SitePoint Zealot ArtphotoasiA's Avatar
    Join Date
    Dec 2009
    Location
    Italy
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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..
    More by Corrado Prever... visit www.corradoprever.com
    Porfolio... visit www.500px.com

  4. #4
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  5. #5
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    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;
    }

  6. #6
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

  7. #7
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try starting with a framework, it really speeds things up: www.blueprintcss.org

  9. #9
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    ^it bloats your HTML until it looks like Uncle Fester : (

    Use it with discretion.

  10. #10
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    ^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.

  11. #11
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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:
    Quote Originally Posted by nicole
    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.
    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.

  12. #12
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  13. #13
    SitePoint Enthusiast CupidsToejam's Avatar
    Join Date
    Jun 2009
    Location
    TX
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <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.

  14. #14
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by CupidsToejam View Post
    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?

  15. #15
    SitePoint Enthusiast CupidsToejam's Avatar
    Join Date
    Jun 2009
    Location
    TX
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by berliner_kindl View Post
    Even YOU know what it means, you're the one who brought it up, so what does that say for it? LOL
    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.

  16. #16
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by berliner_kindl View Post
    <snip>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.
    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
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  17. #17
    SitePoint Zealot
    Join Date
    May 2004
    Location
    Jersey
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by berliner_kindl View Post
    <div class="span 14 append-1 last">
    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.

    http://www.w3.org/TR/CSS21/syndata.html#characters
    Matt Daly

  18. #18
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  19. #19
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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://37signals.com/svn/posts/1061-...skip-photoshop

    http://jeffcroft.com/blog/2008/jun/0...kip-photoshop/

  20. #20
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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).

  21. #21
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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).

  22. #22
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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.

  23. #23
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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.

  24. #24
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gary.turner View Post
    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.

  25. #25
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I think he meant, don't tab this:

    Code:
    #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 \t) for related elements:

    Code:
    #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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •