What is Digg?Sponsored by Guitar Center
When Heavy-handed Hints Fail--Guitar Center Wishlist Posters view!
guitarcenter.com - Cool personalized designs send a friendly reminder that a new Stratocaster would rock, thanks.
73 Comments
- dartman111, on 10/12/2007, -6/+46"Keep a library of helpful CSS classes. Since you can use multiple class names (i.e. ...), make use of them for your markup.”
This is blatant circumvention of the purpose of css. Content in the html document should be semantic -- the class "floatLeft" or "alignLeft" is no different than using font tags. Presentation should be left out of html.
Doing things like this just make it a challenge to change a site's design later. - ElMoselYEE, on 11/13/2007, -4/+41you know you're a huge nerd when you know CSS experts by name
- pizzatsf, on 11/13/2007, -12/+41My favorite trick is *{ margin:0; padding:0; }
- swhite1987, on 10/12/2007, -1/+18You and everyone that's replied to you so far is ignoring the very next line after "Keep a library of helpful CSS classes." It goes on to say: "Useful for debugging, but should be avoided in the release version (separate markup and presentation)."
Note how he says "should be avoided in the release version (separate MARKUP and PRESENTATION.)"
You were so quick to call him out, but you failed to read the entire idea. - PhrosTT, on 10/12/2007, -6/+19finally a GOOD css article.
- newsheatdotcom, on 10/12/2007, -2/+16@dartman111
I'm not sure why you're getting dugg down. The point of CSS is to be able to organize a page and make it easier to modify that page's design without modifying the code of the page. If you label a tag in an html page with "alignLeft", but then decide you want that object to be aligned to the right, you would have to change every occurrence in the html. - bfaulk04, on 10/12/2007, -3/+16That is one loaded article.
Looks like a great resource though. - shifty2, on 10/12/2007, -0/+11any code/language/text/scribble-dribble that is interpreted whether its a compiler or a web browser, translated into binary for a CPU to crunch and outputted/calculated or whatever is CODE!
GET OVER IT! - shifty2, on 10/12/2007, -1/+11chadu's logic = no sense
since you're on the topic of deciphering acronyms... HTML "L" is for Language, C++ is a language, .cpp files contain C++ code.
CSS is a seperate file of nothing but variables with values assigned to them to be called up by another file. similar to any programing or scripting "L"
yes, CSS is used for variables that dictate how things are displayed when rendered, so...by your logic, cout < < "you are a stupid head"; is not code - HigherLogic, on 10/12/2007, -5/+13That's a horrible trick. It completely destroys form elements and you can't bring the styling back on that. There's other reasons why you shouldn't use it, but that's the main one.
- voxel, on 10/12/2007, -1/+8I blame society. and microsoft. but mostly microsoft
- satterfield, on 10/22/2007, -3/+10It is a really good read if your into CSS. I had to bookmark it, too much info for one sitting.
- ZergyPoo, on 10/12/2007, -0/+7What definition of the word "code" are you using? I see no definition that says: "No logic= not code."
HTML is code, sorry to burst your bubble. - RogerH, on 10/12/2007, -1/+6@daroot
Read the article again buddy. It says only to use classes like "width75" for debugging.
FTA:
"Useful for debugging, but should be avoided in the release version (separate markup and presentation)." - weters, on 10/12/2007, -2/+6I completely agree. The whole idea is separate code from content. This article ignores that fact on many occasions.
- jazzviolin, on 10/12/2007, -3/+7More basics of CSS by Smashing Magazine........ "Adsense adsense adsense!!!"
- andreasblixt, on 10/12/2007, -1/+5I've been a web designer/developer for about as long as you, and I agree -- there are not a lot of people (except the CSS-fanatics like me, of course) today who appreciate a semantic CSS design. This is generally not because they think using a table layout is better, but because they are not aware of the benefits of structured HTML with a separated design. And they do get benefits: a properly designed website that does not use table layouts will be more responsive to the user, use less bandwidth and will work on more mediums.
Having done a lot of jobs that involve things such as CMS-enabling existing designs, I can tell you that it's considerably more expensive for the companies that have a website with poor HTML structure with the styling spread all around the place. - Yggdrasil42, on 10/12/2007, -1/+5It's still bad practice to separate the test and release versions in this way. You'd have to modify the site when you upload it to your production environment. What if you forget to change something? The idea behind a test environment is to simulate the production environment as much as possible, so you can fully test the site and copy is (without changes) to production.
- Bamborzled, on 10/12/2007, -0/+3"HTML is markup"
Markup, eh? But that markup isn't in regular English. You have a special vocabulary of words that you have to use and remember, kinda like a CODE! - wfbnadador, on 10/12/2007, -0/+3I have never had any problems with form elements, and I've been using the universal clear padding / margins for years now.
- ZergyPoo, on 10/12/2007, -0/+3How do you then define interpreted?
Is not reading it and displaying it interpreting it?
And anyway... who gives a crap?
Some elitists on here feel the need to belittle people by saying things like "technically they're not code." or "it's not really programming, it's scripting." - daroot, on 10/12/2007, -2/+5dont use classNames like "floatLeft" or "width75" thats stupid.
and the BEST TIP EVER (i should blog about it and post it here) is to use Firebug.
if you call a class "redFont" and want to change the color of this class to blue.. well.. rename every classname to blueFont? clever! - SlpingInsomniac, on 10/12/2007, -2/+5http://validator.w3.org/check?uri=http%3A//www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/
- HigherLogic, on 10/12/2007, -0/+2I like to indent only child elements and label main sections, e.g.:
/***** Header *****/
#header {
...
}
>>>> #header #navbar {
>>>> ...
>>>> }
Never was a fan of indenting actual attributes though, it's not like programming where you would indent code inside of a for loop or something. - stockjones, on 10/12/2007, -1/+3css this way, no css that way. Sometimes tables still get the job done better and faster. I think its still better to have a mix because if you follow these type of strict rules and your website is commercial and visited by tons of customers on all sorts of browsers you'll tear your hair out. so digg me down.
- onkelcommy, on 10/11/2007, -0/+1Great article and i agree that one of the best ways to learn CSS is to get inspired by other designs check out http://www.screenalicio.us it has more than 8500 screen-shots of CSS designs.
- buckrogers1965, on 10/11/2007, -0/+1The thing that amazes me is why isn't css markup in xml format too? Are they planning to fix this in the future? I see it as a serious flaw needing a second format to parse xml documents into html presentation.
- MrMax182, on 10/12/2007, -0/+1Very nice article, for debugging css the web developer extension for firefox is sooo nice: https://addons.mozilla.org/es-ES/firefox/addon/60 only if i can have somethong similar to debug in IE :(
- pizzatsf, on 10/12/2007, -0/+1Hrm, never thought of that. Good point. But it can be easily adjusted to other things.
- weters, on 10/12/2007, -1/+2http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.smashingmagazine.com%2F2007%2F05%2F10%2F70-expert-ideas-for-better-css-coding%2F
An expert CSS article has a number of CSS errors. hahaha. - purplegenie, on 10/12/2007, -0/+1It's not about "developing for Firefox" or "developing for IE." It's about developing for web standards. You can do that and still look good in IE. In fact, it's the only way to stay forward compatible with IE itself.
- Ngai, on 10/12/2007, -2/+3this is a good article, for a beginner like me...
- glowfood, on 10/12/2007, -1/+2Damn right.
- andreasblixt, on 10/12/2007, -0/+1There are some good tips in this article, but some of them are bordering to bad practices and others are just plain overkill, or don't work in more than a handful of browsers. I've buried this as inaccurate because I doubt it'll make someone not experienced with CSS any wiser.
- weters, on 10/12/2007, -1/+2Um. Many of this tips do not work in IE. I understand Firefox is much easier to develop for, but IE still has the largest audience. ::after pseudo-class does not work in any version of IE, and they neglected to mention that the numerous times they've used it. I hate IE, but I understand that we still need to develop for those people. Don't blame the people that refuse to switch, it's not their fault.
- xaxxon, on 10/12/2007, -4/+5I was coming to post exactly this and was pleasantly surprised to see that you already had. Thank you!
- Bdog2g2, on 10/12/2007, -0/+1Why would I want to do it twice?
"Measure twice, cut once" != "Code CSS twice, production once"
If you need two separate versions to debug, then your CSS is either too verbose or not well thought out.
Edit:
Get Firebug and do it once - tizz66, on 10/12/2007, -3/+4Indent your CSS code is my best tip. This is obvious with other languages, but people don't seem to bother with CSS. It makes it much easier to read and find child selectors:
.some_class {
>>>> font-size: 11px;
}
>>>>>>> .some_class .child_class {
>>>>>>>>>>>> color: #f00;
>>>>>>> }
.some_other_class {
} - DonCarcharo, on 10/12/2007, -3/+4I've been a web designer since about 1995 and I was slow to adopt the "pure" CSS workflow of giving up table based design. I'd been using CSS for several years but always with tables for my site's framework and its easy to get set in your ways. Even now I still lean towards the div here and div there approach to form my site's framework (though I try to allow most tags to remain pure where possible). All in all it's taken me a while to learn this new approach and I'm still not as productive as I should be. I can bang a table based CSS enabled design out in about half the time of pure CSS template.
And I guess that's my problem with the "zen of CSS". It's held as a revolution in web design (and it truly is) however things don't work as well as they should. I mean in order to get things to work universally in IE and the rest of the world often involves hacks, non-standard markup, filters (PNG) or at the very least multiple style sheets. And I fail to see how slapping in dozens of divs is really that much better than marking up with tables with CSS.
Moreover as someone who makes a good portion of their living designing templates for development companies, plenty of people don't want my CSS. Time and time again I'm told to use tables. And I've yet to see a single one of my competitors taking this approach to design except me. Sure I see Digg articles on cool things you can do with CSS yet I never see anyone in the wild actually doing it except the linked examples. Heck, I know more people making a living building websites in Front Page.
It makes you wonder how much of the CSS movement is substance and how much is fluff. Me, I like CSS and I won't go back. But to suggest you can't make a living with table based designs in the "era of CSS" is absurd. - shepherdog, on 10/11/2007, -0/+0Too much of a good stuff isn't necessarily good cos I'm suffering from design tips overload. ;) Excellent compilation of CSS design tips, no doubt! Keep it up!
- phervers, on 10/12/2007, -1/+1Weeeelll some of those are great tips, but some are completely not practical because markup they use is not supported in ie6 so you cannot really use them in rl scenarios... Css is great stuff but because of small browser differences it becomes a real pain in the a**. I really really tried to remove tables from my layout, but after two days tweaking, and having my css grow beyond reason i turned back to old good top level table.
- gmalonzo, on 10/11/2007, -0/+0oh, pleaaase! humor me. i beg to differ. while this is all good i find the information useless nevertheless. i can't find any information on how to setup or keep 6 columns lined up within 3 nested tables in multi-framed iframes containing contents from satan himself. in 2 years all these brush metal look will become like these earth-toned colored houses in our neighborhood. don't tell me you still live in pastel colored neighborhood.
p.s. we all know 80% of diggers don't have sense of humor. you'll know why that is as soon as you disagree with me. - Moby22, on 10/11/2007, -0/+0@purplegenie,
By saying that, you are still being exclusionary. You are eliminating compatibility with anything that does not follow the standard.
Complicating this is the fact is that not all browsers render the same standards in the same way. Ironically, this kind of interpretation is even allowed by most standards.
Of course, the real hacks are necessary due to lack of standards compliance, but that gets back to my point above. If you want your result to look perfect (not just "pretty good") on all platforms, you have to develop for all platforms. - weters, on 10/11/2007, -1/+1I completely disagree. I design websites for a University and tables are not accessible. CSS is much cleaner and much more efficient. It's not hard to code CSS cross-browser at all. The only problem is, this tips don't allow you to do that.
- weters, on 10/12/2007, -3/+3Why are people burying comments that simply point out errors in this CSS article? I don't understand it one bit. Half of this article are tips that aren't feasible because they don't work cross-browser. Forget cross-browser, they don't work in the world's most popular browser. And when people point this out, they are getting buried. I'm almost speechless.
- rssvihla, on 10/12/2007, -1/+1http://www.microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en
see above - Frost9999, on 10/12/2007, -2/+2Folks, your basic debate starts with definitions of the moot. Let us say the moot is "CSS and HTML are not code". I suggest that definitions of CSS and HTML are self explanatory so let us define 'code'. Code is a shortened version of 'source code'. A quick google search for definitions of 'source code' brings up many results against the moot, it is easy enough to see that chadu is talking from a hole other than his mouth.
- slapthemonkey, on 10/12/2007, -2/+1Good tips...
- CameronHigh, on 10/12/2007, -5/+4Smashing Magazine approach
1) take bits of information from other developers without checking the validity or usefulness of the info
2) get tons of diggs from people who are happy to have the info, but don't know if it is useful or valid
3) get adsense money - rasko, on 10/12/2007, -3/+1Me too.
-
Show 51 - 73 of 73 discussions
© Digg Inc. 2009
— Content created and posted by Digg users is