net.tutsplus.com— Sure, anyone can write CSS. Even programs are doing it for you now. But is the CSS any good? Here are 5 tips to start improving yours.
Feb 18, 2009View in Crawl 4
Most people keep a production and a development copy. My development copy is not neat, has comments everywhere, I use both single and multiple line decelerations etc. But when css tidy time comes around I magically follow all of the rules in the article.
CSS is awesome but I don't get all crazy and use it like most folks do. I used to be a software tester and never enjoyed doing browser compatibility testing when all it takes is restricting yourself from using the latest and greatest version of CSS or whatever. That's why I still use Tables as my primary layout structure and then I put in CSS, my websites look the same on all browsers and I was tired of having style sheets that were larger 1000 + lines. Thank goodness for Firebug but seriously tables solve a ton of the IE problems everyone cries about.
Great article. Thanks you all. I would however recommend to use dreamweaver which has an excellent css resources. Import your home page index file into dreamweaver and create a stylesheet.css file in your directory and then apply whatever you want to. Besides, you see right in front of you whatever changes you have made. Once you're sure you liked what you did, just upload the new homepage replacing the old one.If your websites contains header.php and footer.php do the same with dreamweaver.It's a great software. I got it for free anyway.
Well, there is a slight dilemma when your rules refer to nested elements. I guess you could alphabetize on the target element.I kind of like to nest based on containment.You have to be really careful. The position of rules in the style sheet is a tie-breaker for precedence.
Good point. I think this is because, as has been stated by the HTML designers since back in the 1980's: HTML is _not_ a page-layout language. HTML presentation language. It is supposed to be higher level, and some emphasis on semantics in the structure of the content.If you want pure page-layout, grab an XSL-FO spec (with an eye on what actual translators do), or PDF or PostScript spec.
You have to be careful about alphabetization "across the board" since order--in-stylesheet affects rule precedence. That is certainly something that matters a lot, and has impact. Alphabetizing is just organization.Grouping related things, and having some comments in the file, makes it nicely structured for maintainability.I would submit real-world and even quick-and-dirty style sheets have some or many rules referring to nested elements. "Forcing" alphabetization and ignoring structural relations is probably going to make an incomprehensible PITA style sheet.You cannot, and should not, get away from the fact that these are rules - not just words. So, while alphabetizing works great for organizing dictionaries and lexicons, it is not so hot for organizing rule sets.Simply by sorting the lines/rules in a CSS file, you can break the behavior of the style sheet due to the precedence rules. Look them up in the CSS spec, if you want clarification of what I am talking about.
Since posting this comment back March I've made the painful switch to tableless design. It did take a while to develop a solid frame work that works well with IE, Firefox and older browsers but thanks to <a class="user" href="http://browsershots.org/" rel="nofollow">http://browsershots.org/</a> I can test pages a lot faster. I agree with your point on table nesting, I never was a fan of doing that since I like HTML that validates. While it's true that IE is not perfect it is the most popular browser and as web designers we have to make sure everything works in IE first then worry about everything else. I spend a lot of time looking at my clients access logs and IE dominates them, it's unfortunate but that's the way it goes.
Having Edit CSS add-on in Firefox really took me to the next level because I could see the effects of my changes in real time.Reading the CSS and HTML (or whichever document type you are working with) spec, and having some good books is really essential both before and after messing around that way. At first, you cannot possibly pick up all the fine points of the rules and their implications. But bore long, when you are doing more complicated stuff - you had better.Validating stuff that you have written is important too, as someone pointed out.But, yeah, I agree with you - jumping in and just using it experimentally is super vital at when you his certain "plateau" point(s) in your learning curve. Going back and for the between that and the spec is super helpful and really learning CSS fast/well.
I've seen the href code used before. Does it work in every system? There's actual coding and then there are these software systems to generate things automatically for you. Do any of you have experience with xsl-fo? Here's a site if you want to check it out, http://www.ecrion.com I'm curious what people have found when they use it.
threddenFeb 19, 2009
<a class="user" href="http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html">http://haml.hamptoncatlin.com/docs/rdoc/classes/Sa ...</a>
ajcatesFeb 19, 2009
Most people keep a production and a development copy. My development copy is not neat, has comments everywhere, I use both single and multiple line decelerations etc. But when css tidy time comes around I magically follow all of the rules in the article.
xupermastiFeb 20, 2009
Great share thak you buddy i am finding it lots of time but got it here
Closed AccountFeb 25, 2009
Most common ones that I use that it is helpful with is font, background and border.
archaxisMar 13, 2009
CSS is awesome but I don't get all crazy and use it like most folks do. I used to be a software tester and never enjoyed doing browser compatibility testing when all it takes is restricting yourself from using the latest and greatest version of CSS or whatever. That's why I still use Tables as my primary layout structure and then I put in CSS, my websites look the same on all browsers and I was tired of having style sheets that were larger 1000 + lines. Thank goodness for Firebug but seriously tables solve a ton of the IE problems everyone cries about.
rush340Mar 17, 2009
Same here, I had never heard of resetting before this. I agree with, and mostly follow, the rest of it.
refmisterMar 21, 2009
Great article. Thanks you all. I would however recommend to use dreamweaver which has an excellent css resources. Import your home page index file into dreamweaver and create a stylesheet.css file in your directory and then apply whatever you want to. Besides, you see right in front of you whatever changes you have made. Once you're sure you liked what you did, just upload the new homepage replacing the old one.If your websites contains header.php and footer.php do the same with dreamweaver.It's a great software. I got it for free anyway.
findhostcouponsMar 22, 2009
thanks jaybol for all top 5 tips provided in the story you submitted
spacer1337Jul 17, 2009
Really good Article with good points, never thought of alphabetizing my selectors and such, great idea. And simple resets are good.
johnnysoftwareDec 28, 2009
Well, there is a slight dilemma when your rules refer to nested elements. I guess you could alphabetize on the target element.I kind of like to nest based on containment.You have to be really careful. The position of rules in the style sheet is a tie-breaker for precedence.
johnnysoftwareDec 28, 2009
Good point. I think this is because, as has been stated by the HTML designers since back in the 1980's: HTML is _not_ a page-layout language. HTML presentation language. It is supposed to be higher level, and some emphasis on semantics in the structure of the content.If you want pure page-layout, grab an XSL-FO spec (with an eye on what actual translators do), or PDF or PostScript spec.
johnnysoftwareDec 28, 2009
You have to be careful about alphabetization "across the board" since order--in-stylesheet affects rule precedence. That is certainly something that matters a lot, and has impact. Alphabetizing is just organization.Grouping related things, and having some comments in the file, makes it nicely structured for maintainability.I would submit real-world and even quick-and-dirty style sheets have some or many rules referring to nested elements. "Forcing" alphabetization and ignoring structural relations is probably going to make an incomprehensible PITA style sheet.You cannot, and should not, get away from the fact that these are rules - not just words. So, while alphabetizing works great for organizing dictionaries and lexicons, it is not so hot for organizing rule sets.Simply by sorting the lines/rules in a CSS file, you can break the behavior of the style sheet due to the precedence rules. Look them up in the CSS spec, if you want clarification of what I am talking about.
archaxisDec 28, 2009
Since posting this comment back March I've made the painful switch to tableless design. It did take a while to develop a solid frame work that works well with IE, Firefox and older browsers but thanks to <a class="user" href="http://browsershots.org/" rel="nofollow">http://browsershots.org/</a> I can test pages a lot faster. I agree with your point on table nesting, I never was a fan of doing that since I like HTML that validates. While it's true that IE is not perfect it is the most popular browser and as web designers we have to make sure everything works in IE first then worry about everything else. I spend a lot of time looking at my clients access logs and IE dominates them, it's unfortunate but that's the way it goes.
johnnysoftwareDec 28, 2009
Having Edit CSS add-on in Firefox really took me to the next level because I could see the effects of my changes in real time.Reading the CSS and HTML (or whichever document type you are working with) spec, and having some good books is really essential both before and after messing around that way. At first, you cannot possibly pick up all the fine points of the rules and their implications. But bore long, when you are doing more complicated stuff - you had better.Validating stuff that you have written is important too, as someone pointed out.But, yeah, I agree with you - jumping in and just using it experimentally is super vital at when you his certain "plateau" point(s) in your learning curve. Going back and for the between that and the spec is super helpful and really learning CSS fast/well.
gramjSep 22, 2010
I've seen the href code used before. Does it work in every system? There's actual coding and then there are these software systems to generate things automatically for you. Do any of you have experience with xsl-fo? Here's a site if you want to check it out, http://www.ecrion.com I'm curious what people have found when they use it.