What is Digg?107 Comments
- iSnooze, on 08/26/2008, -3/+69I disagree with N.2, multiple lines are allot easier for me to read, specially if they are indented. Than I compress the entire CSS file to one line before exporting it to the site.
But maybe it's just me... - qbitus, on 08/26/2008, -2/+40I don't usually comment on Digg, and even less on the "10 things you should read so I can put ads on my site" kind of posts.
This being said I'm a professional webdev who does code reviews of frontend code regularly with some of the best in the industry, so I can't let this go past without a few quick comments:
* no article on some random blog network will ever replace you reading the spec. This is your bible: http://www.w3.org/TR/CSS21/
* not all 10 points are valid: there is no consensus on having CSS declarations (if you're really worried about whitespace: minify your code) in one line and clearing floats (it all depends on the situation)
* I don't quite see what the doctype bit has to do in there. A doctype defines the grammar used in the markup, it's not really stylesheet specific. You should never use quirks mode, even if you're not using CSS.
* there is bullocks in there: margin:auto doesn't work in IE6, a doctype actually doesn't need a URL to trigger strict mode rendering etc.
Some quick references on topics mentioned:
* a summary of the situation on clearing floats: http://www.ejeliot.com/blog/59
* John Resig's post about doctypes after the IE8 debacle: http://ejohn.org/blog/html5-doctype/
So it's note the lamest list of CSS advice in the world, but it's not that awesome, regardless of the people mentioned, and it's clearly link bait. No digg from me, soz. - killfish, on 08/26/2008, -1/+20Agreed, I find it not only easier to find properties but I also like it for grouping... e.g.
div.wrapper {
.............some-property: some-value;
.............}
.............div.wrapper ul li {
..........................some-property: some-value;
..........................some-property: some-value;
..........................some-property: some-value;
..........................}
..........................div.wrapper ul li a {
.......................................some-property: some-value;
.......................................some-property: some-value;
.......................................}
All the elements are targeted within the same class, general to specific.
/* Sorry about the periods, formatting didn't hold */
- Wuss, on 08/26/2008, -0/+19Am the only one who thinks writing all your css in one line is harder to read the breaking all your css in seperate lines?
Not really sure where the logic is in having to scan an entire line for one attribute when you can easily put it on its own line and see it immediately. I can live with the .0000000000002 kilobytes that the extra spaces add to a css file. - Ksimir, on 08/26/2008, -3/+17One rule in web design : don't ever write in light gray on white, the blockquotes in this article made my eyes bleed :(
But this is a good article ! - davidmihm, on 08/26/2008, -2/+14I loved #4 from Jonathan - setting container widths with no margins or padding & stating the necessary spacing on their internal elements and and #5 from Trevor - sacrifice an empty clearing div in your markup, it'll make your life a lot easier. Great article, Muhammad, thanks for bringing this to everyone's attention.
- Daniel591992, on 08/26/2008, -1/+12Such spammy comments...
- electrichead, on 08/26/2008, -0/+10exactly, and there's always ctrl + F
- paulhlusko, on 08/26/2008, -3/+12I disagree with tip #2. White space is good on the eyes, and the bytes saved from taking it away is negligible. If it isn't negligible look to tip #1.
- Narcism, on 08/26/2008, -1/+10the *****?
- Natealus, on 08/26/2008, -0/+9CSS is an art form. An art form that sometimes doesn't work in IE6.
- WiretapStudios, on 08/26/2008, -1/+7I was making fun of his redundancy.
- Quizboy, on 08/26/2008, -2/+8So to summarize: use basic CSS knowledge that most web designers should already know.
- theblt, on 08/27/2008, -0/+5I do the same as well. Actually, I also have use a Table of Contents and Color Palette at the top of my stylesheets as well.
Example:
----------------------------------------------------------------------------------------------------------------------
/*
===========================================================
........TABLE OF CONTENTS
===========================================================
........1. GLOBAL
........2. STRUCTURE
........3. HEADER
........4. NAVIGATION
........5. BODY
........6. FOOTER
........7. UTILITIES
................7.1 Clear Fix
===========================================================
........COLOR PALLETE
===========================================================
........#BEDBAE - Light Green
........#98C282 - Green
........#415338 - Dark Green
........#CCCCCC - Header/Footer Text Grey
........#595959 - Main Text Grey
........#363636 - Background Grey
........#262626 - Header/Footer Black
*/
/*********************************************************
1. GLOBAL
**********************************************************/
* {
........font-family: 'Lucida Grande", Arial, Helvetica, sans-serif
}
----------------------------------------------------------------------------------------------------------------------
You'll notice above that there is a lot of space used for these comments, which does in turn create larger files. But fear not. Use Yahoo's YUI-Compressor: http://developer.yahoo.com/yui/compressor/ . It does a great job of compressing CSS. It converts longhand into shorthand (including sizes and colors), strips out comments, and reduces everything down to one line. You can use it to compress and obfuscate JavaScript as well. Just make it a part of your build process! Try using something like Apache Ant for example. - TriplePlay2425, on 08/26/2008, -7/+12I just tested these, they didn't help me get any more frags than I usually do. I call bull.
- serif69, on 08/26/2008, -1/+6As opposed to the bright, shiny, awesome, deprecated < font > tag and ***** of embedded tables?
- Asianwaste, on 08/26/2008, -0/+4The bell didn't save him this time.
- nubnub, on 08/26/2008, -0/+4Mutltiline is easier to read and edit. Learn to tab over.
h2 {
........font-size:18px;
........border:1px solid blue;
........color:#000;
........background-color:#FFF;
}
(tabs do not show up in comments) - jggube, on 08/26/2008, -5/+9I like single-line especially if you have a widescreen monitor. It's easier to read and write them. But code formatting is a matter of preference so there's no right/wrong on single-line vs. multi-line formatting.
- kraetos, on 08/26/2008, -2/+6Yeah, rule two on this list is goofy, and the only one I really took issue with. Splitting declarations across line-breaks makes the markup much easier to read in the future. Every web developer I know goes with multi-line declarations.
There is something to be said for shrinking the stylesheet for loading purposes, though. There are any number of utilities out there that will optimize CSS code once you're done writing it. - Narcism, on 08/26/2008, -1/+5CS:S
- stutimandal, on 08/26/2008, -0/+4This should go up. Digg him up guys. I did my bit.
- Frost9999, on 08/26/2008, -0/+4The world suddenly seems strange when David is using everyone elses first names.
- inactive, on 08/26/2008, -0/+3I'm actually going to adopt this method hahah, thanks.
- jessehadden, on 08/26/2008, -0/+3I'm down with everything here except for the "principle" of condensing CSS declarations to a single line.
FTA: "Not only does this approach help with quickly scanning your CSS, it also helps in keeping your CSS file smaller by removing unneeded spaces and characters."
I think multiple lines are much easier to read than a single line. And, after being in this industry for about a decade, I really don't bother with removing carriage returns from documents as a means of "compression." - Noncentz, on 08/26/2008, -0/+3Good comment..... informative and satisfying
- inactive, on 08/26/2008, -0/+3Needs more cowmemes?
- spdorsey, on 08/26/2008, -1/+4I've just about had it with gurus demanding that people make CSS as small as is possible. I understand that smaller is better, but CSS is often (usually) the smaller part fo the web page, after counting HTML page size, images, and possibly video.
CSS is very insignificant in terms of overall page size, so let it be a little bit bigger in stead of sacrificing readability for the holy grail of "smallest CSS document".
------S - ajames01, on 08/26/2008, -1/+4Definitely. I have to work with other peoples code all the time and it can be very aggravating to have to go through everything set in a single line. I find myself organizing and splitting it up before i even begin.
- MtheoryX, on 08/27/2008, -0/+3I think the point is that on an article about CSS and design, you shouldn't have to do that just to read the text.
- ajames01, on 08/26/2008, -0/+3You'd be surprised how many people I've worked with who have done this for awhile and don't comprehend the very basics.
- thePTS, on 08/26/2008, -0/+3"I mean, I could have just said "Needs more memes!", but what fun would that have been?"
How fun would that have been, indeed. But the real question is, can it run Crysis? - decker12, on 08/26/2008, -1/+3"Street cred in the design world". That statement is why I buried this article.
- K4emic, on 08/26/2008, -0/+2Snook is recommending that people keep their CSS declarations on ONE line instead of making the damned thing readable.
I'm having a hard time taking this advice serious.
Damn canadians. - rowjimmy, on 08/26/2008, -1/+3agreed. especially if you are using a gui to look at your code, everybody i know uses multi-line css declarations (in the same way that a big hash/associative-array declaration would be multi-line). usually i won't even bother compressing the stylesheets, as the efficiency gained is almost always very minimal.
- dood, on 08/26/2008, -0/+2Totally agreed. That's awful.
Speaking of Firebug (from another post), this can be "easily" fixed. Open Firebug, go to the CSS tab, pick "style.css" (it's the last of all of the stylesheets loaded) and then find the blockquote definition. Disable the "color" and voila, the text is instantly readable. - serif69, on 08/26/2008, -0/+2I do the same. It's way easier to find things when they're organized that way, especially when the code gets long.
- MtheoryX, on 08/27/2008, -0/+2***** you! Two of my friends died needing more memes!
/i suck at this "humor" ***** - Misanthrope, on 08/26/2008, -0/+2Eh...the in-line declarations are hard as ***** to scan through. I'll take the "unneeded" white-space any day.
- akphidelt, on 08/26/2008, -0/+2I have never seen this style before. Definitely going to start using it. Thanks!
- dood, on 08/26/2008, -0/+2Yeah, I think he was way off there. Spaces and tabs make it easier to read. That "Good" line is terrible.
But if you end up using it because someone insisted on it (ugh), you can easily parse it with Firebug (a Firefox extension). With it, you can go to its CSS tab, and see the CSS all nicely formatted. You can turn on and off specific CSS lines, add new ones, and change the values to try different layouts, without having to reload the whole page. It'll let you work with any of the CSS files loaded by the page as well as CSS embedded in the page's tags.
Actually, I recommend Firebug even if your CSS is nicely laid out to begin with, because of the above mentioned features. - uruururr, on 08/27/2008, -0/+2margin auto works fine in ie 6
- DuMbGuM, on 08/26/2008, -0/+2And heres me thinking I was about to read something about Counter-strike: Source, for shame!
- Whitey07, on 08/27/2008, -0/+1Dugg for CSS.
- shutaro, on 08/26/2008, -1/+2@drmangrum: Actually, no... I was expecting, and intending, to get dugg down... I just felt that this thread failed to meet the minimum meme requirement for Digg. I mean, I could have just said "Needs more memes!", but what fun would that have been?
- gdonald, on 08/26/2008, -0/+1You don't even have to do that, most web servers and browsers support inline compression and decompression, have for some time now.
http://httpd.apache.org/docs/2.0/mod/mod_deflate.h ...
http://betterexplained.com/articles/how-to-optimiz ... - sdub86, on 08/26/2008, -0/+1i wish i could digg you more than once for that awesome link. i am laughing my ass off.
- kevisazombie, on 08/26/2008, -0/+1I loved all the old samurai paintings in that article.
- CasaMan, on 08/26/2008, -1/+2Maybe CSS is not a interesting subject for everybody but it is one of the most important basic building blocks for the modern web. Without CSS there wouldn't be a accessible rich Internet for you to experience.
- thePTS, on 08/27/2008, -0/+1the demoscene wasn't beautiful, it was groundbreaking and impressing. How easy is it to create groundbreaking and impressing products nowadays? Not very.. ;P
/elitist and proud of it -
Show 51 - 100 of 107 discussions
© Digg Inc. 2009
— Content created and posted by Digg users is