What is Digg?Sponsored by Travelzoo
All-time Low Fares for Thanksgiving, Christmas & New Year view!
travelzoo.com - Flights $52 and up. Nifty all-airline calendar identifies absolute cheapest dates to fly.
118 Comments
- KSUdesigner, on 11/12/2008, -2/+94#8: "We have to remember, the reason why we use technologies like CSS is because it should speed up development time."
No that is NOT the reason why we use CSS. The main reason for using CSS is to separate the content from the presentational markup. - wheezy360, on 11/12/2008, -0/+38Minifying css and js files doesn't minimize hits to the server. It just reduces the file size. 1 large CSS file takes as many requests to download as 1 minified CSS file.
- timmyblog, on 11/12/2008, -5/+41Great list. To take it one step further:
11. Not using a CSS reset
12. Not minifying your css and js files to minimize hits to the server
13. Not reusing CSS code and classes
14. Not commenting in your code
15. Not making your code readable for other developers - dxgg, on 11/12/2008, -1/+31Not using a CSS reset isn't a mistake. It's a choice. I've built many sites with and without a CSS reset, and I've honestly seen only a small convenience there.
- temsi, on 11/12/2008, -0/+24#11. Using big unrelated images to pad out an otherwise short list.
- johngf2, on 11/12/2008, -0/+21Which is why #4 is bad.
Your content/class names shouldn't reflect the presentational markup. What if you redesign the site and want that div to float left now? Things like class="left" is really no better that align="left" when it comes to separating markup from from content. - benologist, on 11/12/2008, -0/+21CSS resets aren't always necessary, and not to the extent that Yahoo and others go to either covering mammoth lists of just about every element when in my experience at least we only frequently use a very short list of elements.
GZIP compression makes removing unnecessary tabs / spaces / line breaks pretty pointless.... reducing the number of files is far more important.
Comments don't need to be left in the deployed versions of your JS and CSS, other developers are irrelevant in that context, and ditto for readability in the deployed versions. It doesn't matter if some guy doesn't understand the code powering a site, if he needs to understand it it's because he's working on / with the site, in which case he can access the understandable version.
On to the actual article there's some issues too.... catering for different resolutions is pretty much a hopeless goal. Pick a resolution and let the user's software decide how to display it. While it might be as simple as 800x600 vs 1024x768 vs 1280x768 and so on on conventional computers.... that overlooks the huge and growing number of mobile users running whatever crazy resolutions on god only knows how many devices. It's really an issue that browser vendors have to tackle, not us.
CSS frameworks to be honest are pretty stupid. CSS just isn't complicated enough to warrant a framework. If they give you a woody then use them but don't feel obliged to.
The rest of it I pretty much agree with. - mannypdesign, on 11/12/2008, -0/+20Some people have no sense of humor.
- steger, on 11/12/2008, -0/+20.rightright{float:rightright} - for when you want things to REALLY be on the right....right.
- EliteByDesign, on 11/12/2008, -5/+22Great metaphorical images of 'css disasters'
- Snoosy, on 11/12/2008, -8/+23I came here expecting Counterstrike: Source tips.
I was sadly mistaken. - dimethroxy, on 11/12/2008, -0/+14Using a CSS Framework ? CSS is so simple and fast to produce I don't understand why anyone should use a framework.
- inactive, on 11/12/2008, -4/+18no.
- FrogKermit, on 11/12/2008, -4/+161. Don't hold fire for too long, your shots get less accurate...
- Narcism, on 11/12/2008, -3/+1516. Not using single line CSS attributes like background, border, font
- neutronphaser, on 11/12/2008, -2/+12I prefer to make it a little more readable
- serif69, on 11/12/2008, -0/+9I only take issue with #2. The fact is, you're going to have a tough time finding anyone who still uses 800x600, as CRTs are dead and LCDs haven't come in any lower resolution than 1024x768 in years. Sure, some smaller notebooks have lower resolutions, but the percentage is still quite low. Most people also browse at full screen, unless they have a higher resolution. The concern should be if your site will have a large user base accessing from low-resolution mobile devices, in which case you should use a separate conditional style sheet.
- dxgg, on 11/12/2008, -1/+10Using CSS for layout doesn't usually speed up development time, but it's still the right thing to do. Once the layout is done, then yes, CSS really speeds up the process.
- AndrewMoyer, on 11/12/2008, -0/+8Yeah, that's like CSS 101. Name your classes to reflect the document object or its role, not its intended appearance.
A "Navigation" class is likely to remain such through a hundred redesigns, but a "Left" class would likely be right-floated/right-aligned in some version.
Naming classes after colors ("redtext" -- myspace, i'm talking to you!) is even worse. - MforMike, on 11/12/2008, -1/+8IM TIRED OF PEOPLE WHO DONT PLANT THE BOMB!!!
- lukasmach, on 11/12/2008, -1/+8Never... NEVER... never use classes like this:
.right {float:right}
Never. Because it's completely unsemantic. You shouldn't have to change HTML code when you want to redesign the webpage and the redesign just might include floating some of the sutff differently than before.
Using .right would be like returning to the 90's. I have to admit that I sometimes use .clear, but that's only because I'm lazy bastard. - Wuss, on 11/12/2008, -0/+5"Often times new designers will use oversized background images in their layouts. For example, using a 3,000px X 5,000px background image to account for any possible browser size. Instead of using a really big image, they could be using a really tiny repeating image with a touch of CSS magic. The difference is huge: Instead of loading a 200kb image, you could load an image only a few bytes in size and have the CSS repeat it across the background.
If you have a background image that is very large, you're losing two ways:
1. It means using unnecessary bandwidth
2. You're making the visitor wait longer for the image to load "
I just did a quick count of all the random images he uses in this post, and it's right under 1 MB.
Why do these numbered web-design do/dont lists always contradict themselves in at least one area?
Granted, they're not background images, but its still against his 2 points he mentioned. - benologist, on 11/12/2008, -1/+6The main reason to use CSS is so you have one consistent set of stylings in one location used by all pages because it speeds up development time.
Everything else is of lesser importance and seperating content from styling is pretty much irrelevant since on any decent sized site the content is already abstracted by a database anyway. It doesn't really matter that you've declared your stylings in some css file rather than in some page because both that page and that css file are only going to survive till the next version of the site.
CSS Zen Garden has led a lot of people to believe giving websites an overhaul only involves CSS changes and that is just incorrect in the real world. It's never a case of "we just want a pretty new layout!" and always a case of a list of crap they either don't want anymore, want changed, want expanded, want added etcetera. A new website never comes down to just editing the CSS file from the old website. - hantata, on 11/12/2008, -2/+7Yes, all the time.
- zdislaw, on 11/12/2008, -0/+5While I agree that too many files can become hard to manage, I would never put all my styles in one sheet. I have the following in any site I code: reset.css, styles.css, navigation.css, ie.css, ie7.css. If the navigation does not involve DHTML, I'll move that into the main styles.css.
I'm also considering separating type and color out from the structural css as outlined in the recent alistapart article: http://alistapart.com/articles/progressiveenhancem ... and would be interested in thoughts. - teleporter, on 11/12/2008, -0/+411. Reading an article called "Are You Making These 10 CSS Mistakes?"
- wolfing, on 11/12/2008, -0/+4buried for the unnecessary image bandwidth waste
- elementop, on 11/12/2008, -0/+4As long as you never have to maintain or modify your site *and* you are only using a single page on your site, using tables and font tags is probably quicker. However, if you ever decide to redesign your site while keeping the existing content, or if you ever have to build a multi-page site that has a consistent look and feel to it, CSS will pay you back big time.
My very first "large" web site, a web-based aircraft scheduling project for a fictional flight school (my senior project in college) was completely hand coded using tables and font tags because I didn't know CSS even existed. It took forever to code and was horrendously large because I used tables and font tags to lay everything out. I could rebuild that entire site now using CSS and it would probably half as big and 1/10th as complex.
Seriously, just take the time to learn CSS. You will be glad you did...and so will anyone else who ever has to maintain your legacy projects. - lukasmach, on 11/12/2008, -0/+4Now I see that the list actually criticizes using inline styles (yes, that's bad). In this case, this "generic classes" ***** is also hypocritical since defining .right class is conceptually the same thing as writing style="float:right"... maybe it looks a little bit better to a shallow mind.
- tribtal, on 11/12/2008, -0/+4Why has "gotchas" become the catchphrase of 2008? It is everywhere now.
- blinktude, on 11/12/2008, -0/+4all the pictures made me think using the firewall is the mistake....
- zdislaw, on 11/12/2008, -1/+5Don't worry about it not fitting tight. Size isn't everything.
- Colindean, on 11/12/2008, -1/+5If you don't use valid CSS, you will get pregnant, get syphilis, explode, and die.
Here's a text editor. - ostracize, on 11/12/2008, -0/+4I have been burned by #2. Developing a site for idiot users who:
1. use 800x600, not because of vision issues, but because they don't understand they can get more screen real estate if they just increase resolution (as if they could possibly know how to do that)
2. Click on a link and think it isn't working because the webpage still shows the 500px banner image at the top. I have to kindly tell them to just scroll down a little bit and they will see that the link does work.
Also, I don't know anyone besides myself who browses at full screen and many of them don't even realize what F11 does (or any of those function keys for that matter). - smackjack, on 11/12/2008, -0/+3I think serif meant to say that most people have their browser maximized. Not necessarily "full screen"
- inactive, on 11/12/2008, -0/+3you're doing it wrong if you need an ie, ie7, etc hack stylesheet. how big is your font css going to be? a new file for 3 lines? and take anything from alistapart with a grain of salt. they've been wrong many times (but they delete their articles when they are, like Zeldman telling everyone to use pixel layouts.) Many of their writers are professional speakers and professional bloggers, not professional developers/designers (I'm looking at you Zeldman.)
- Jektal, on 11/12/2008, -1/+4Why? Design in the more standards-compliant browser, and then implement fixes/hacks to get it to work correctly in non-compliant browsers like IE.
It's future-proofing 101. - marcus1060, on 11/12/2008, -0/+3"8. Using CSS For Everything"
I disagree with the statements he makes in this point. Its never OK to use tables, even for "complicated" layouts. Learn to do it in CSS, and it'll only take you a long time the first couple times. Semantics people! Use tables for organizing "tables" of information, and use the other tags where they are meant to be. - crodulfo, on 11/12/2008, -0/+3its pretty much the same concepts that used to be looked at html back in the days but applied to css. . .
guess nothing has changed, and people keep making same old mistakes - TheSabre, on 11/12/2008, -1/+4Re: 9. Using Inline CSS
If you separate business logic from the view using MVC, like you should, then you wouldn't have that problem. You can template your site and change 1 or 2 HTML files in addition to your CSS files. Therefore, with proper development techniques, inline CSS is perfectly fine.
Oh that's right, most "CSS gurus" are just web designers that can slice a Photoshop image and make something look pretty without understanding the fundamentals for proper software and web development like MVC. - mannypdesign, on 11/12/2008, -1/+4Oddly enough, the images contradict the article's message.
- centran, on 11/12/2008, -0/+3If you are getting a lot of mobile users then perhaps it is time to make a a handheld CSS for mobile users.
- svivian, on 11/12/2008, -0/+3This guy uses the phrase "often times" too much.
- rilian, on 11/12/2008, -0/+3Good comments about CSS but the photos spliced in and around them had zero to do with the article and while they did not appear to be ads for anything, detracted mightily from the article
- kurrent, on 11/12/2008, -1/+4"I'm a major offender of this. I'll sometimes design the site in Firefox and forget about checking in IE until after it's done!"
With all due respect, the author lost a lot of credibility only a few sentences in with this statement. Who the hell forgets to check their CSS in IE and also carries the qualification to give me 10 CSS tips??
and designing for firefox first is like asking for an eventual mental breakdown. - serif69, on 11/12/2008, -0/+3< link href="url" rel="stylesheet" type="text/css" media="handheld" /> is your friend.
- jerang, on 11/12/2008, -1/+4Same goes for the CSS frameworks - it's a choice to use them! I personally prefer to write my own.
- Jektal, on 11/12/2008, -0/+3Try setting the margin of the inner object and the padding of the outer object to 0px on all sides.
"margin: 0px;" will work in FF, but you'll need to use "margin: 0px 0px 0px 0px;" for IE. - shinkou, on 11/13/2008, -0/+3I strongly disagree with #4. Using simple generic classes like
.left {float:left;}
.right {float:right;}
.clear {clear:both;}
is both pointless and inefficient. CSS classes are meant to be used in a sense of aggregation for operation and/or maintenance efficiency. That said, it makes perfect sense to use classes like
div.title {float:left;font-weight:bold;text-decoration:underline;}
div.icon {float:right;padding-right:5px;}
div.separator {clear:both;height:2em;}
MVC is a PRINCIPLE to manage your work for higher maintainability, but using it blindly only makes you an oxymoron. - greeniemeani, on 11/12/2008, -0/+3Same old typical top ten CSS article. Buried as lame.
Why not mention something useful like separating color/fonts from layout/alignment (which by the way is something you should really do). Too many people mix the two in the same class. -
Show 51 - 100 of 121 discussions
Browsing Digg on your phone just got easier with our enhancements to the 
© Digg Inc. 2009
— Content created and posted by Digg users is