What is Digg?85 Comments
- eggsovereasy, on 08/19/2008, -1/+28"Full CSS layouts have always been a compromise. The current CSS specifications were never designed to create the visually rich and complex interface layouts that modern Web demands. The current methods — floats and positioning — were never intended as layout tools. "
That's what they said about tables too... when the hell is someone going to make something that IS designed for laying out a page. Wtf, w3c? - woofers07, on 08/19/2008, -0/+27new idea:
I'm gonna start loading my conditional IE CSS files with images just to make the file huge. If every web developer would start doing this eventually people would start switching to a "ridiculously faster brower". - GregFD3S, on 08/19/2008, -0/+25Shorthand is a really useful tip that allot of designers don't know about.
Although I find it easier to have my css elements on multiple lines instead of one line. - cubicledrone, on 08/19/2008, -1/+21I love optimized CSS. It's even better when IE urinates all over it with a big *****-eating grin on its face.
(BELCH) "Guess it's back to tables for you, nerd." (ASS SCRATCH) - spdorsey, on 08/19/2008, -1/+17Although I believe that this is an important article for its tips, I also think that it goes too far. I truly believe that using efficient HTML code is going to save your page LOTS faster than trimming your CSS.
I'd rather have slightly bloated CSS that is 3k larger, than code that is more difficult to decipher or is poorly formatted because the developer took every opportunity to trim code. - jggube, on 08/19/2008, -1/+13Overall, some great tips for clean/optimized code. #1 - use shorthand is key. Shorthand notation is easier to read (based on personal preference of course) and reduces the your need to scroll. I've even begun writing attributes:value pairs for selectors all in one line. I code in a widescreen monitor and in this set-up, I think the code looks cleaner, is quicker to write (less return/enter/shift+tab'ing), and easier to scan.
Here's an article by Steve Smith on Ordered List about "Single Line CSS" that explains the concept more fully: http://orderedlist.com/articles/single-line-css - robrohan, on 08/19/2008, -1/+13All these are good accept for: 3. Use whitespace wisely
Readability is far more important than “page weight” seeing that you can add gzip compression and several other techniques after the fact. I wish people would stop encouraging people to write CSS like in that example - all on one like - it’s barely readable, and a pain to maintain.
You'd be beaten with a large blunt object if you wrote code like that (even javascript) for the same reasons it's not a good idea to do it with CSS (unless everyone on the team is using some sort of WYSIWYG CSS editor)
Aside from 3, they are good tips. - jchrome, on 08/19/2008, -0/+10I recommend uncompressed BMPs for *every* image on the page. :D
- feshmania, on 08/19/2008, -1/+10even if he has no life, who cares? this is a good article. burying simply because of submitted it is asinine.
- billbugger, on 08/19/2008, -0/+9Think of it like a clock.
- tastynuggets, on 08/19/2008, -0/+9I think Mr. Baby Man is actually several men and / or a botnet.
(Despite that - I do like clean CSS) - serif69, on 08/19/2008, -1/+9They actually forgot the number one principle of clean and optimized CSS: combining commonly reused style elements. If, for instance, every div on the site will float left (they often do, if you work like I do), create a style:
div {float: left;}
instead of repeating the same style on every class and/or id. Or, if the same style is repeated on multiple classes/ids, list those classes and ids on a single style, like:
.class1, .class2, #id1, #id2 {display: block;}
That keeps the same style from showing up multiple times in the document and taking up unnecessary space. - Chalks777, on 08/19/2008, -0/+710KB x 10,000 page loads ~= 100MB
That's not insignificant, and if you have a lot of different bloated things (js, css, markup, etc), optimizing them all can certainly help your server load. - jchrome, on 08/19/2008, -0/+6It's called CSS 3 and it's not well supported by any major browser yet. :(
It's true that floats where not intended as a layout tool per-se (more as a content-layout manipulation tool), but positioning? That seems like a pretty wacky statement to me... - jchrome, on 08/19/2008, -0/+6I develop a web-based application in an embedded environment and every kb counts. Besides, even for a standard web page why not optimize code and attempt to minimize bloat?
You're not a developer, are you? Oh, you are? Ah, at Microsoft. Now it all is becoming clearer. :) - WebmasterNeal, on 08/19/2008, -0/+5after awhile you just remember what they are, trust me
- GregFD3S, on 08/19/2008, -0/+5Here's a good CSS compressor:
http://www.sabiadesign.com/blog/php_css_compressor - Chalks777, on 08/19/2008, -0/+5I have just recently begun separating my positioning css from my style css. Let me tell you, it makes a _huge_ difference in how easy it is to update and maintain the page. I will never go back to combining them.
- gcauthon, on 08/19/2008, -0/+5I think number 7 (use compression) really supersedes number 3 (trim whitespace). If you're going to run your css through a compression utility before uploading to a web server, there's no reason to sit there and manually trim away whitespace. You can have the best of both worlds, a nicely formatted css file on your hard drive and a highly compressed css file on the web server.
- demondg1, on 08/19/2008, -0/+4Oh, another good one for the amateurs out there is:
body{display:none;} - billwild, on 08/19/2008, -0/+4Hahahah. Nice. Im on it...
- tapeworm77, on 08/19/2008, -0/+4The HTTP spec only accommodates for downloading 2 files at a time, all others are queued. You'd be better off using 1 CSS file with comment delimited sections.
- dazparkour, on 08/19/2008, -1/+4I love optimized CSS when it's valid.
http://jigsaw.w3.org/css-validator/validator?uri=h ...
No, his page doesn't validate.
23 errors including: "Value Error : color orangered is not a color value" - diznang, on 08/20/2008, -0/+3The article states that whitespace shouldn't be sacrificed.
"It’s still important that you write in a way that is readable to you (and hopefully to others), and if that includes using whitespace for formatting, so be it."
I think you are probably more in agreement with the author's tip #3 than you realize. - Nicoon, on 08/19/2008, -1/+4The thing is, if you're serious about this profession, you should already know all of these things.
- jchrome, on 08/19/2008, -0/+3@Tapeworm, hmm, well the first stylesheet is calling the other two files (always seems to work, haven't seen any issues with this) and the iExploder's sheets are fed conditionally of course...
- billbugger, on 08/19/2008, -0/+2font-family:"Consolas","Bitstream Vera Sans Mono","Lucida Console","Courier New",courier,monospace;
Check out the "Firebug" plugin for Firefox. Major help! - svivian, on 08/19/2008, -0/+2Definitely. All to often I see HTML code where every tag has class="..." on it. Nearly every time the code can be cleaned up by just using a class on a parent element (for example, a table) or wrapping everything in a blank div. This generally results in both cleaner HTML and CSS.
- lonniebiz, on 08/19/2008, -0/+2I agree. I made this to do tabbing automatically:
http://www.lonniebest.com/FormatCSS/
It also alphabetizes the CSS properties automatically. - billbugger, on 08/19/2008, -1/+3I think readability is better, and i go further by also tabbing in my CSS. It makes it easier to scan over.
Example: http://www.billbugger.com/css/layout.css - Matt2k, on 08/19/2008, -3/+5It's like reading a programming blog. Except even more smug and unimportant. Let me summarize the points for you
Minimize file size with shortcuts
Use whitespace liberally
Eliminate unused declarations to reduce filesize
Duplicate declaration to increase maintainability
Compress the whole thing
If you're worried about the 10K css file that gets gzip compressed and downloaded to the browser once, my hat is off to you, as you clearly have nothing better to waste time with. - jchrome, on 08/19/2008, -0/+2I've messed around with many different approaches, one I like:
styles.css (contains all stylesheets)
style.css (all styles)
layout.css (layout/positioning)
iexploder6.css (accomodate Satan)
iexploder7.css (take care of Doofus, son of Satan)
I used to use a separate typography.css file but that ended up being overkill. - jchrome, on 08/19/2008, -0/+2Well, at least we have conditional comments now to deal with the neanderthal.
- billbugger, on 08/19/2008, -0/+2I agree.
- buckrogers1965, on 08/19/2008, -0/+2That which has no life, cannot die! Babyman forever!
- TrellSaracen, on 08/20/2008, -0/+2For number 2, that has already been proposed.
http://disruptive-innovations.com/zoo/cssvariables ...
As to how long it might take for that proposal to actually get into any of the W3C drafts...who knows. - MtheoryX, on 08/20/2008, -0/+2Astonishingly, I was dugg down for saying the exact same thing way above.
Digg == a fickle emo sometimes. - billbugger, on 08/19/2008, -0/+2Or using one for the layout and another for the colors. That way if you wanted to change the colors (or different colors for different themes), it makes it easy to just switch them out, or even them parts of your site differently.
- falafelkiosken, on 08/19/2008, -0/+2no, I mean in the picture right below the title
- buckrogers1965, on 08/20/2008, -0/+2Why do so many web sites have the "Click here for print version" if everyone knows this?
- Chalks777, on 08/19/2008, -0/+2tapeworm, could you show me where you found that spec? I have a few sites that use more than 2 css files, I might combine them if it makes a difference.
- miralize, on 08/19/2008, -0/+2does anyone ever wonder why graphic design posts on digg are so popular but so rare
- shanos, on 08/19/2008, -1/+3Indeed, if you are a web designerdeveloper you should know this already
- stutimandal, on 08/19/2008, -0/+2I wish they would come up with at least two things in CSS:
1) Alternative, co-ordinate system for layout (rather than float this with this much width on this edge).
2) Defining color constants so that colors can be defined once and reused everywhere else. - altf4me, on 08/19/2008, -0/+2Bill Bugger is a very bold name for your software. :o
- seantubridy, on 08/20/2008, -0/+1That's brilliant.
- inactive, on 08/24/2008, -0/+1clssic you can optimize CSS for filesize and readability to say the least.
- chesterjosiah, on 08/19/2008, -0/+1Shorthand for color is something I find not a lot of people know. This article fails to mention it, but the 2nd article he refers us to mentions it.
Basically, instead of using six hex digits, you can use three. ie, instead of #FFFFFF, just use #FFF.
The 3-digit notation translates to the 6-digit notation by repeating each digit twice. So when you specify #369, that's the same as #336699. - ThisCommentSux, on 08/20/2008, -0/+1It looks like Monaco 9pt (OS X's default fixed-width/sans-serif font).
-
Show 51 - 87 of 87 discussions
© Digg Inc. 2009
— Content created and posted by Digg users is