Comments on: 5 Ways to Instantly Write Better CSS http://teddy-o-ted.com/blog/2009/02/25/5-ways-write-better-css/ Design of a minimalist, content of a maximalist Mon, 06 Feb 2012 12:52:48 +0000 hourly 1 http://wordpress.org/?v=3.2.1 By: teddY http://teddy-o-ted.com/blog/2009/02/25/5-ways-write-better-css/#comment-64619 teddY Sun, 01 Mar 2009 16:41:43 +0000 http://www.teddy-o-ted.com/?p=3176#comment-64619 @abdusfauzi: Hah, same here! Sometimes I get a pain in my wrist because I've been resting it on the wrong thing (e.g. edge of the table instead of some supportive pillow which I am yet to get one). Sheeesh. I'm worried about getting carpel tunnel syndrome! Haha. @abdusfauzi: Hah, same here! Sometimes I get a pain in my wrist because I’ve been resting it on the wrong thing (e.g. edge of the table instead of some supportive pillow which I am yet to get one). Sheeesh. I’m worried about getting carpel tunnel syndrome! Haha.

]]> By: abdusfauzi http://teddy-o-ted.com/blog/2009/02/25/5-ways-write-better-css/#comment-64618 abdusfauzi Sun, 01 Mar 2009 14:08:44 +0000 http://www.teddy-o-ted.com/?p=3176#comment-64618 a comprehensive post teddY. for me, i'm using multi lines for every class or IDs. So far, it looks good, but i figure out that, this is one of the reason im having severe injury on my right hand wrist and arm. hahaha. too much scrolling i think. hehe. <abbr><em>Check out abdusfauzi’s latest blog post » <a href="http://feedproxy.google.com/~r/abdusfauzi/~3/Zk-8X6j_hd4/" rel="nofollow">A Very Quick Post : Dedicated to AisyahKama</a></em></abbr> a comprehensive post teddY.
for me, i’m using multi lines for every class or IDs. So far, it looks good, but i figure out that, this is one of the reason im having severe injury on my right hand wrist and arm. hahaha. too much scrolling i think. hehe.

Check out abdusfauzi’s latest blog post » A Very Quick Post : Dedicated to AisyahKama

]]> By: teddY http://teddy-o-ted.com/blog/2009/02/25/5-ways-write-better-css/#comment-64563 teddY Thu, 26 Feb 2009 05:12:04 +0000 http://www.teddy-o-ted.com/?p=3176#comment-64563 @NoktahHitam: Thank you! I believe in breaking down the selectors into their respective placement on the page - such as header, footer, content and etc. I do have a more complicated organization for the content part because I'm taking care of the typography, image alignment, coding, comments and etc. Single liner are very neat, and pleasing to the eyes as well. Just like what you've said, it eliminates the need to scroll madly in search for a certain selector, and if you're familiar enough with your style sheet (of course you are) it's easy to locate them without much scrolling. In the past I design my layouts based on the abstract concept I had in mind at that particular moment, resulting in rather inconsistent appearance and constant editing of previously decided styles (something like being flicker-minded). It was only until the few recent layouts that I pen what I want on paper, and then do some research on CSS frameworks (like <a href="http://960.gs/" title="960 grid system" rel="nofollow">960 grid system</a>, <a href="http://www.blueprintcss.org/" title="Blueprint CSS" rel="nofollow">Blueprint CSS</a> and etc). I am yet to develop a habit of creating a Photoshop mockup of what I want though. I did all the calculation on paper and then directly export the ideas into notepad (handcoding is more fun!) and then do the graphics later :P @NoktahHitam: Thank you! I believe in breaking down the selectors into their respective placement on the page – such as header, footer, content and etc. I do have a more complicated organization for the content part because I’m taking care of the typography, image alignment, coding, comments and etc.

Single liner are very neat, and pleasing to the eyes as well. Just like what you’ve said, it eliminates the need to scroll madly in search for a certain selector, and if you’re familiar enough with your style sheet (of course you are) it’s easy to locate them without much scrolling.

In the past I design my layouts based on the abstract concept I had in mind at that particular moment, resulting in rather inconsistent appearance and constant editing of previously decided styles (something like being flicker-minded). It was only until the few recent layouts that I pen what I want on paper, and then do some research on CSS frameworks (like 960 grid system, Blueprint CSS and etc).

I am yet to develop a habit of creating a Photoshop mockup of what I want though. I did all the calculation on paper and then directly export the ideas into notepad (handcoding is more fun!) and then do the graphics later :P

]]> By: teddY http://teddy-o-ted.com/blog/2009/02/25/5-ways-write-better-css/#comment-64562 teddY Thu, 26 Feb 2009 05:06:00 +0000 http://www.teddy-o-ted.com/?p=3176#comment-64562 @Jeff Starr: Thank YOU for sharing the CSS resets back then, Jeff ;) They're one of the reason why I've decided to embrace CSS more - in the past, my efforts to design were trumped by the different default styles each browser applies to the elements. I don't really think alphabetizing is important (since usually they won't extend beyond 10~15 lines for each selector) but it's the perfectionist inside me that instructs me to do it that way. Heh. Your style of organization is interesting! So each of your selectors will take on this 'sloped' look. Cool! You're welcome about the linking! It has changed me experience with designing so much that I am ought to share it. @Jeff Starr: Thank YOU for sharing the CSS resets back then, Jeff ;) They’re one of the reason why I’ve decided to embrace CSS more – in the past, my efforts to design were trumped by the different default styles each browser applies to the elements.

I don’t really think alphabetizing is important (since usually they won’t extend beyond 10~15 lines for each selector) but it’s the perfectionist inside me that instructs me to do it that way. Heh.

Your style of organization is interesting! So each of your selectors will take on this ‘sloped’ look. Cool!

You’re welcome about the linking! It has changed me experience with designing so much that I am ought to share it.

]]> By: NoktahHitam http://teddy-o-ted.com/blog/2009/02/25/5-ways-write-better-css/#comment-64560 NoktahHitam Thu, 26 Feb 2009 02:41:14 +0000 http://www.teddy-o-ted.com/?p=3176#comment-64560 Nicely written Teddy. I don't think Alphabetize would work wonders. For me the break down is Header, Content and Footer. Key CSS like font style will always be at the top. Personally, my favorite is a single liner. Some call it the Pro's way, but I personally think it depends on the coder. I don't like scrolling a million miles south. Afterall, beauty lays in the eye of the beholder, that includes perfection as well ;) If Travis warns about touching CSS before Markup, let me warn something else. *Dont you dare touch those keyboard if you haven't drawn anything on a paper!* <abbr><em>Check out NoktahHitam’s latest blog post » <a href="http://feedproxy.google.com/~r/NoktahHitam/~3/5ih3ufsjayY/utusan-does-it-again-twist-twist-twist.html" rel="nofollow">Utusan Does It Again, Twist-Twist-Twist</a></em></abbr> Nicely written Teddy.

I don’t think Alphabetize would work wonders. For me the break down is Header, Content and Footer. Key CSS like font style will always be at the top.

Personally, my favorite is a single liner. Some call it the Pro’s way, but I personally think it depends on the coder. I don’t like scrolling a million miles south. Afterall, beauty lays in the eye of the beholder, that includes perfection as well ;)

If Travis warns about touching CSS before Markup, let me warn something else.

*Dont you dare touch those keyboard if you haven’t drawn anything on a paper!*

Check out NoktahHitam’s latest blog post » Utusan Does It Again, Twist-Twist-Twist

]]> By: Jeff Starr http://teddy-o-ted.com/blog/2009/02/25/5-ways-write-better-css/#comment-64555 Jeff Starr Wed, 25 Feb 2009 21:44:01 +0000 http://www.teddy-o-ted.com/?p=3176#comment-64555 These are excellent tips, teddY -- thanks for sharing. I like to keep things neat and tidy, but have yet to discover the joys of declarative alphabetizing. Instead, I prefer to organize my declaration blocks according to the number of characters contained on each line, such that the result looks like a nicely formatted chunk of code with consistent right text edges. I have been ridiculed for doing it this way, but I don't care because I think it looks clean, crisp, and complete. Anyway, just wanted to thank you for sharing these great reminders with us. And thanks also for mentioning my article on CSS Resets -- much appreciated! :) <abbr><em>Check out Jeff Starr’s latest blog post » <a href="http://perishablepress.com/press/2009/01/19/time-for-a-new-design/" rel="nofollow">Time for a New Design?</a></em></abbr> These are excellent tips, teddY — thanks for sharing. I like to keep things neat and tidy, but have yet to discover the joys of declarative alphabetizing. Instead, I prefer to organize my declaration blocks according to the number of characters contained on each line, such that the result looks like a nicely formatted chunk of code with consistent right text edges. I have been ridiculed for doing it this way, but I don’t care because I think it looks clean, crisp, and complete. Anyway, just wanted to thank you for sharing these great reminders with us. And thanks also for mentioning my article on CSS Resets — much appreciated! :)

Check out Jeff Starr’s latest blog post » Time for a New Design?

]]>