digg

Join DiggAbout

Discover the best of the web!
Learn more about Digg by taking the tour.

10 CSS Tips from a Professional CSS Architect

72dpiintheshade.com — When newbies get started with CSS/XHTML based web design, most of their work is focused on just getting the page to look like the Photoshop comp. While this translation is important to keep the client happy, considerable thought process should be involved in creating the semantic markup and marrying that with CSS. CSS is not a collection of hacks..

Bury
show profanity settings
expand all
  • TomP, on 10/12/2007, -16/+6My tip is dont use Possition:fixed its such a pain!
    • SteaminTmann, on 10/12/2007, -1/+14how about position:absolute?, it's bailed me out of alot of cross browser issues in the past.....
    • podgey22, on 10/12/2007, -2/+17There's nothing wrong with absolute but there is something wrong when a "professional CSS Architect" uses a plain old WP template.
    • hello2usir, on 10/12/2007, -1/+22"Professional CSS Architect" gave me a good laugh... until I realized he was serious.
    • msgyrd, on 10/12/2007, -1/+25Same here.

      I was like "CSS Architect", wha??? I think I'm going to call myself a Procrastination Engineer.
    • phatvolvo, on 10/12/2007, -0/+9The trick with position:absolute; is that it's absolute to the parent element if the parent element has positioning set. Otherwise, it's absolutely positioned on the page body itself.

      This article needed more technical tips like this one.
    • kyledavis, on 10/12/2007, -1/+23"Architect"!?! My, my, aren't we full of ourselves. Seems the software industry just gets more and more full of ***** every year.

      In the early days of software, we were all "computer programmers".

      Then the guys who write in "real programming languages" wanted to distinguish themselves from the "script kiddies", and they suddenly started calling themselves "Software Engineers".

      Now even if you write a little bit of style sheets for Wordpress, suddenly you're a "Professional CSS Architect!!!"

      What's next? Is any jack-off who can type in a URL gonna start calling himself a "Master Application Artisan".
    • actionscripted, on 10/12/2007, -0/+23You know for a "CSS Architect" he could've avoided having 34 XHTML validation errors and kept his bold treatment consistent on his numbered list headings using classes.

      But what the ***** do I know, I'm not a "CSS Architect".

      http://validator.w3.org/
    • DJSdotcom, on 10/12/2007, -0/+7A "Professional CSS Architect" who uses a nearly completely default Wordpress theme? How incredibly lame.
    • Yarnage, on 10/12/2007, -0/+5For such a "Professional" his website doesn't even display correctly in all browsers AND it doesn't validate.

      ***** him
    • Niten, on 10/12/2007, -0/+2@actionscripted: Come on now, don't be so hard on him. He never claimed to be a Professional XHTML Architect, did he?

      Yeah, I thought the inconsistent font weight in the section headings was funny too.
    • iffypop, on 10/12/2007, -0/+0He's got as much clue about code as the 'Architects' in my company.
  • Noize, on 10/12/2007, -12/+1front page 88 diggs and no comments :O

    scratch that, thanks TomP :P
  • Razster, on 10/12/2007, -17/+3Joomla is the only tool you need.
    Editing CSS from there on to match your needs is a breeze.
    • toughice, on 10/12/2007, -2/+5I don't think Joomla is as easy as advertised. It may be able to do what you need, with some serious CSS hacks - but you can tell that it was built by programmers, not web designers.
    • Vironex, on 10/12/2007, -5/+9Joomla is absolutely awful.
    • msgyrd, on 10/12/2007, -1/+4All content management systems are written by programmers. Good ones bring in designers to make it marketable.
    • toughice, on 10/12/2007, -3/+4Really good web apps are designed first - programmed second. Until a programmer knows how a designer is going to use what they are building - there is no sense in building it. In this case - with the customization that is needed for a cms driven website - you have to be able to write clean code that is easily adaptable.

      Joomla can get you there - but it sure would be nice if it could get you there a lot faster. So tomorrow, I am going to spend a large portion of my day trying to hack somebody's code to get poorly designed boxes of stuff to act and work in a way that I want.

      I'm just bitter.
    • yeskia, on 10/12/2007, -0/+2Agreed - but if you check out what they're doing with Joomla 1.5 you'll see it looks great. They've worked really hard and it looks all "Apple-ly" and utilities AJAX well.
    • pezholio, on 10/12/2007, -0/+2Agreed, 1.5 is really impressive. I think it's the final nail in the coffin for Mambo, which looks really dated in comparison...
    • dogshaft, on 10/12/2007, -0/+1If you guys thing Joomla sucks, you should check out dotnetnuke. That thing is a P.O.S. and a half.
  • KillerJ59J, on 10/12/2007, -2/+7Nice article. Didn't care for some of the points made.
    • nogChoco, on 10/12/2007, -2/+3I found the text to be almost unreadable because of the font and linespacing that he used - I had to lean back to see the actual words - not really what I'd expect from a professional.
    • wintermute0, on 10/12/2007, -1/+2It wasn't that hard to see... An unreadable page would have been great irony.
    • koonkii, on 10/12/2007, -0/+3would of been more helpful with an example for some of the shorter points
  • coldfusion055, on 10/12/2007, -1/+2These are some generally good guidelines. Although he seems to go a bit overboard with the separation of css documents.
  • astatine, on 10/12/2007, -1/+16"Architect"? Is "Designer" not good enough these days?

    Edit: Also, if you can't put the apostrophe in the statement "The clients brand is important.", I may not take anything you say seriously on matters of appearance. Sorry.
    • BobbyOnions, on 10/12/2007, -0/+5"Fuehrer" is now the preferred terminology. He's obviously a lamer.
    • BobbyOnions, on 10/12/2007, -0/+4"visual queues", heh? Evidentally, visual cues aren't enough.
    • mink78, on 10/12/2007, -10/+1"astatine"? Is "grammar nazi with a stick in the ass" not good enough these days?

      You even had to edit your comment related to a damn apostrophe missing from a random sentence that one can easily determine what the meaning is. I may not take anything you say in person seriously without first kicking you in the teeth.

      Damn grammar nazis.
    • justinvt, on 10/12/2007, -0/+6Anyone who writes CSS professionally DEFINITELY cares about grammar and spelling as well, and this dude clearly spent about 8 seconds proofreading his article. You can't be insanely anal about writing CSS and then act like the content itself is trivial - that's just silly.
  • gbacci, on 10/12/2007, -2/+6There’s mention of “the many structural elements to achieve layout” but no reference to what the heck those are. This is the problem with an article like this, it’s not all practical. It’s all theoretical advice. Then there’s a statement like: “This may not matter to your client but it matters to your colleges or future employees who might edit your documents.” Once again, what does business have time and budget for?? Making the CLIENT happy. Showing the constant disconnect between tech and business. How crucial is a transparent PNG for my fellow co-workers? Really?
    • esquilax, on 10/12/2007, -0/+2yeah seriously, just keep a vector file of the logo around. i don't know what a raster file of a logo is good for other than for the web page it's already embedded in.
  • TimTim, on 10/12/2007, -4/+1Cool! Just what I need! I'm getting ready to update my site from Web 0.001...really I'm not kidding! I barely know html and have not had the time to read anything about website construction so my site is pathetic and embarrassing!
  • mikefitz2, on 10/12/2007, -17/+6i dont get it everytime i make a page i use frontpage2000 that came with my pc and just upload the files to my servers. this article is lame dugg down.
    • justinjacobs, on 10/12/2007, -1/+11You're kidding... right?
    • wintermute0, on 10/12/2007, -1/+10Sarcasm, please?
    • kyote, on 10/12/2007, -0/+9I think he's serious. If it was sarcasm, he'd have said Frontpage 98.
  • tomgibbons, on 10/12/2007, -0/+9I didn't find the article too interesting.

    I've been using extensive CSS in customer websites for years too, does that make me a Professional CSS Architect?
    • ear1grey, on 10/12/2007, -0/+4No, because you have to be be crap grammarization like me.
  • KeefTM, on 10/12/2007, -1/+6Question: Web Designers still worry about IE4, IE5 MAC and Netscape 4? If so that is an insane waste of time.
  • NanoStuff, on 10/12/2007, -0/+11I am a Class A technomechanical CSS architectural engineer. I'm also qualified in excel.
  • tdmedia, on 10/12/2007, -1/+11The page doesn't even validate! How professional is that?
  • greyfade, on 10/12/2007, -0/+3Geez, the grammar and spelling is horrible.
  • timsco, on 10/12/2007, -0/+5CSS Architect?!? HAHAHAHAHAHAHA
  • moneysaver67, on 10/12/2007, -0/+2I've see worse Top X CSS lists from Digg; however, this was a decent write up. I agree (to a degree) with some of the points made.

    9. Hook, line, and sinker.
    Once you have your CSS and sections in place start considering where your selector "hooks" will live by using structural hooks in your mark up. This is your saving grace for future editing and maintenance of the site. This will also give you strength in your document.

    Elaboration on Point #9, such as an example, would have been nice. Surely an architect wouldn't forget something so crucial--especially if it is my "saving grace."

    I do not understand the "" tag after the IE6 conditional comment either:



    • moneysaver67, on 10/12/2007, -0/+3Sorry, forgot you can't post markup!

      ...I do not understand the "code" tag after the IE6 conditional comment either:

      [!--[if lte IE 6 ]]
      [code][link rel="stylesheet" type="text/css" href="css/iebugs/ie6.css" /]
      [![endif]--]
  • timwright12, on 10/12/2007, -4/+2good css resource: http://www.csskarma.com
  • negativeview, on 10/12/2007, -0/+9Since this will likely not be unmoderated, I will spread my evil comments here as well: (Note that it DID work in Opera, finally)

    Your page does not validate, even though it is explicitly stated as xhtml 1.0 transitional. It’s difficult to mess up transitional!

    Semantic markup requires you to use ol for your ordered lists. Also, be consistent with your strong tags. The first two bold the entire line, while the rest only bold the number. Actually, what you should probably do is set a style on your first-level ol li tags to automatically bold it. That keeps tags to a minimum.

    You should URL encode your urls. Putting spaces in URLs is discouraged and if you do, you must use in the a tag, not a literal space. When using & in the a tag, you need to use & (I hope that you are converting HTML entities. If this is broken, you should view source or do the equivilent to see what I typed).

    If you’re using xhtml, even transitional, you must terminate your img tags with either the strange closing tag, or use the specific syntax for tags that need no content.

    You twice close a tag which was not open.

    These are serious errors that would take two minutes to fix, probably. Even if you are using a template (which makes tracking these down more difficult) you cannot generally get away with this stuff if you’re a true “Professional CSS” anything.

    And please, please stop using the term “Architect” to make yourself sound important. Pointless titles that are not descriptive but only given to make someone feel important or sound important are annoying to say the least.

    Your form also won’t submit in Camino but I didn’t feel like investigating what is killing what looks like a simple form. Fail gracefully! It also doesn’t work in FIREFOX! The up and coming browser that virtually all geeky people are starting to use — the very people that you’re trying to get with a CSS article. A geeky article that doesn’t work in Firefox is beyond insane.

    Actually, since it wouldn’t work in IE 5.2 for the Mac EITHER, I dug through your source. WHY serialize a form in javascript and submit it via Ajax? Are you trying to keep out as many of your audience as you can? It’s a good thing that I am a web developer because, unlike Professional CSS Architects, I have multiple browsers installed.

    Let’s try Opera…

    – A programmer who does some web design when writing web applications and is a stickler for standards compliance and a lover of CSS.

    Your comment is awaiting moderation.
  • rocketryguy, on 10/12/2007, -1/+3I found it poorly written, and generally kind of lame. Buried for lameness, as better references exist in plenty.
  • bertram, on 10/12/2007, -1/+2"Currently, I use a Plam Treo to access all my mobile online content." -- I hear "Plam" (sic) is going to release a new model soon.
  • gnatinator, on 10/12/2007, -0/+4I concur with rocketryguy, there were a couple of semi-decent points made, but for the most part I found it to be a poor article. This ending up on the front page with 500+ diggs surprises me.
    • kyote, on 10/12/2007, -1/+1over 1,000 digs now. people would digg a blank page if it made to the front page anymore.
  • hermes369, on 10/12/2007, -0/+1I try to practice separation of content and presentation; but css will always rely on hacks as long as IE is the most popular browser.
  • jeff303, on 10/12/2007, -0/+3The best CSS tip I ever found: zero out everything. I once did this at the top of some stylesheet I was working on and instantly all my cross-browser rendering problems went away.
    http://webdesign.about.com/cs/css/qt/tipcssmargins.htm
  • michaelGregoire, on 10/12/2007, -0/+5"CSS Architect"?

    What the web developer doesn't write any other code? He only designs css. WOW. Super-importance is a beautiful thing.
  • rationalist, on 10/12/2007, -1/+4"Images that reside in the content flow should be allowed stability in that structure. This includes the logo or any supporting images in the document. I really enjoy right clicking an image, especially a logo, and receiving a nice whole transparent PNG. Deciding up front is detrimental to keeping the integrity of the design and brand. Even the markup. This may not matter to your client but it matters to your colleges or future employees who might edit your documents"

    I'm sorry, but given the name "Ryan Parr", one can assume that English is this person's native tongue - or, one should say, something approximating English.

    That is not even taking into account this abortion:
    "What about IE 6? Their are many techniques to relieve IE6 of it’s transparency bug."

    At least if the tips made sense, one could forgive the illiteracy. But this self-titled "professional CSS Architect" bases his nonsensical recommendations on the fact that he "really enjoys" right-clicking on images and receiving a "nice whole transparent PNG"? And what does " Deciding up front is detrimental to keeping the integrity of the design and brand. Even the markup" even mean?

    And "This may not matter to your client but it matters to your colleges or future employees who might edit your documents". Is this a joke? Was this article produced by inputting random web dev terms into a blender and pasting what comes out?

    "A designer knows what’s best for the client and the user and will make specific decisions about where structure shall live, where the logo will be, where the primary call to action will live, etc."

    That is the kind of arrogant, know-it-all engineer's attitude completely inappropriate for design-related professions, and it gives actual professional web developers a bad name.

    What an embarrassment that anyone here would be fooled to think that this is an authoritative source. let alone a "professional" one. Do yourself a favor, whether you are a beginner or aspire to learn CSS, ignore that site and those recommendations. Go to A List Apart and check out the design articles there and see what actual practicing professionals do.

    And check out sites that impress you the most and view the source. Download the webdeveloper plugin for Firefox and the sourcechart plugin and do some homework. Don't listen to the amateur crap on the site dugg above.
    • Niten, on 10/12/2007, -1/+1My gut reaction to this article was that this must be a joke, some sort of trick to see how many diggs an intentionally-botched article on web development can pull in. Nobody who calls himself a Professional CSS anything should mess up his section header styling so badly, right? I mean, the first two section titles are bold, whereas the subsequent ones are not. The class attribute is one of the first things you learn how to use when you start doing work with CSS, and this guy just doesn't seem to know what it's there for.

      If I cared enough, I would probably start poking around on this guy's site to try to get a feel for whether he actually exists...
  • dotnetnoob, on 10/12/2007, -1/+2Jesus Chirst! how and when did writting CSS became CSS Architect? does this mean HTML is now a programing lanauge? CSS Architect, that's like calling MCSE paper cert. admin is really a engineer!
  • teleporter, on 10/12/2007, -1/+3I don't know about anyone else, but hacks like this are keeping many of us who actually know what we are doing from landing our dream job. Christ. Write a blog, add some CSS "tips", call yourself a CSS architect, and you're off to Web2.0CompanyXYZ for a ridiculous amount of money.

    Notable:
    "Keep content images whole."

    In the real world, 1) not everyone is on a broadband connection; a 30KB+ image is just unacceptable; 2) Does the average user really right click on an image? Did I miss the update from the CSS Architect's Society that damns user experience? CSS based layouts should not preclude image optimization.

    More rubbish from yet another self-proclaimed professional.
  • HigherLogic, on 10/12/2007, -1/+2What a load of *****. This site doesn't even show up properly in IE6, and this guy wants to give out tips as a "professional CSS architect." I'm sorry, but if you're going to call yourself that (or if you're going to design in general), your site needs to show up in IE6, IE7, Fx, Opera, and Safari and look nearly the same (less the minor pixel differences that each browser outputs).

    Practice what you preach, eh?
  • danggit, on 10/12/2007, -0/+1Sweet tips :) thanks for sharing. While I didn't agree 100% with everything posted; I did walk away learning a new trick or two. Diggers need to learn to take information from personal blogs a little less personally :p

    Personally, I try to keep my designs hack-free. This may mean that my site won't look exactly the same from browser to browser; but as long as the design isn't broken, I'm learning to live with that for the time being. One thing that frustrates me is trying to accommodate MSIE. I'm always learning though, since I'm self-taught. I can't knock a free source when I learn SOMEthing from it; because it's thanks to these free sources that I've managed to learn what I did thus far.

    What I do notice is that I'm starting to develop an eye for practical/sound coding practices; I'm more selective about which tips I agree with, and the ones I disregard. I think that's a good sign personally; I'm actually learning, which is encouraging because I don't have an actual teacher/mentor looking over my shoulders.
  • xstephx, on 10/12/2007, -1/+1As a professional digg stories reader, I didn't really find this article useful. And I've been 'working' with diff for many years now ...
  • Nurjle, on 10/12/2007, -0/+1Buried as Inaccurate.

    The tips are useless, and he evidently is not a professional. A hacked copy of Dreamweaver doesn't make you a web standards guru.
  • dustyBottoms, on 10/12/2007, -0/+0I think the role fits very well with our strategy as an interactive agency. Here is a great article outlining the inspiration for the front-end architect role.

    http://www.garrettdimon.com/archives/the-time-is-now-for-front-end-architects
  • sensibledriver, on 10/12/2007, -0/+1Professional? Please don't tell me anyone has paid that hack a dime.
  • stevecole, on 10/12/2007, -1/+1I've been waiting for an opportunity to make a comment like this...

    I'd like to see the digg Comment system heed:

    5. Keep containers to a minimum.

    Maybe then it wouldn't take 30-60 seconds to display a comments page. I know avid digg readers who never read the comments simply due to the excruciating load times.
  • dugem1, on 01/20/2008, -1/+1That's great find
    http://www.nasavo.com
    http://www.nasavo.com/acne
    http://www.nasavo.com/forex
    http://car.nasavo.com
    http://www.jurugan.com
    http://health.jurugan.com
    http://www.vrid.net
    http://laptop.vrid.net
    http://projector.vrid.net
    http://tire.vrid.net
    http://hyip.ej.am
    http://car.ej.am
    http://health.bryansoft.com
    http://hyipnews.freehostia.com
    http://hyipnews.freehostia.com/hyip
  • theadvinci, on 07/01/2008, -0/+110 CSS Tips from a Professional [CSS] Front-End Architect... Nice...
  •  

    Login or register to add a comment

    Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.


© Digg Inc. 2008 — Content posted by Digg users is dedicated to the public domain.
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.