Hot cup of CSS
This entry is a follow-up entry, of sorts, to CSS in a timeframe. You can read that post first, if you care to, but it’s not necessary.
Over the last few days I’ve had to create three Web site templates in XHTML and CSS. My complaints in the past, although warranted, are starting to become invalid. By the time I got to the third template, I was able to finish almost the entire thing before my coffee was finished brewing.
I’m not the first, nor the last, developer to state that programming with Web standards is a time saving venture. Yet, I still feel it’s something that is very difficult to learn in the beginning. Spotty CSS support between the major browser contenders is definitely the largest mogul of all.
Side note: Using Firefox, as mentioned a few days ago, can help you view these Web-standards-using Web sites with little or no worry that you’re missing out. Further, it would help to ensure, to the developer of said Web site, that you’re seeing his/her work in all it’s glory.
Most of the tricks that I’ve learned during the last 9 months of developing with CSS aren’t revolutionary. Hell, they’re not even visionary. Yet, I feel the need to jot them down nonetheless.
If you’re in the process of forcing yourself to create semantically correct markup and CSS powered designs, than these next few tips could possibly save you countless hours and quite possibly a few bucks.
Create templates of common interfaces
One of the most crucial lessons a programmer must learn is to never code the same thing twice. This may seem like a no-brainer, but how many times have you retyped a common function or peice of markup, only to realize that you’ve typed that same block of code 10,000 times prior?
When writing an application, programmers utilize various objects, functions and classes that they’ve (or the language they’re programming in) set up in order to save time. Perhaps you’ve written or modified a simple Web application, like WordPress, to write some simple data to the database. Utlizing functions, which are included with WordPress, can help you save hundreds of keystrokes and tons of precious time.
Text editors, some of which have specific features to help you write HTML coding for example, will have some prebuilt templates built-in. skEdit, my HTML editor of choice on OS X, has several included HTML and XHTML templates. This way, I don’t have to retype the mundane stuff, like DOCTYPE information. Editplus, my Windows HTML editor of choice, not only comes with several included templates but gives you the ability to create an unlimited number of custom templates. I took full advantage of this feature for many years, and it saved me more time than I’d care to calculate.
Doing this very same thing, for CSS templates, will save you time and money. And you can quote/trackback me on that. I’ve setup, for myself, five common Web site interface templates that I use as starting points. From those five templates I can customize pretty much any UI I can dream up. Depending on what application you use, you can easily load one of your pre-built, pre-validated templates and you’re off to the races. Doing this saves, at least in my case, about 3 to 4 hours of time setting up a valid CSS document full of miscellaneous rules for fonts, images and positioning. This tip is priceless, regardless what your programming.
Combining like styles
Typically, you will want to reuse as much of your CSS rules as possible. This saves on the overall size of your CSS document, as well as editing time. I’ll give you an example.
Let’s say that you are going to style an H2 element on your Web page. So, you create a CSS rule that looks like this.
h2 {
font-size: 16pt;
color: #000000;
}
This is an incredibly simple block of CSS, but I’ll break it down for you anyway. This would turn every H2 element on your Web page into 16pt sized font, and would color the text black. However, you may not want every single H2 element to be styled in this manner, so you might want to try something like this.
#myid h2 {
font-size: 16pt;
color: #000000;
}
This way, only the H2 elements which reside inside of a DIV with the id of myid would be styled in the above described manner. Here’s the caveat (a word used far too much by bloggers that don’t know what it means) - that you might have more than one DIV that could contain that specific style of H2 elements. You could solve that issue this way.
#myid h2 {
font-size: 16pt;
color: #000000;
}
#myid2 h2 {
font-size: 16pt;
color: #000000;
}
OK, so we now have two-seperate rules in our CSS file for styling the same element in the same way, just in two different locations on our Web page. Although this example is dealing with an extremely small amount of text, we could see that with a much larger set of rules (multiplied by 100) this could end up being a problem. So, we solve it this way.
#myid h2, #myid2 h2 {
font-size: 16pt;
color: #000000;
}
By seperating the two elements, named specifically, with a comma - we are able to use the same style for more than one element at a time. This can be done for an unlimited amount of elements (I think), and could also be used for varying element types. Meaning if you wanted, for reasons passing comprehension, all of your H2s and H4s to look the same, you could.
This tip helps save time simply by cutting out a ton of keystrokes. If you can think in advance how you’d like to display things, you should be able to come up with the CSS code before you even start to write it. A good example of how this could be done can be found here, it’s definitely highly recommended reading - even if you don’t go about it the same way.
Validate once, and save a tree
OK, you probably won’t save a tree, but it’s a noble thought and keep up the good work. “Validating as-you-go” might end up hurting you in the long run. I’d rather validate once, at the end of my template building, to save time overall. Sure you could validate your HTML and CSS everytime you add 10 bytes of code, but who wants to invest the time and energy for that? Type up the HTML to the best of your ability and write your CSS to style it accordingly. Then, once you have things the way you’d like them, validate the sucker. This way, you spend a few minutes cleaning up, and everything should validate nicely.
There is one exception to this tip; should you run into a problem - validate. Many times when you run into a snag where something doesn’t line up right, or a DIV is too small unexpecably - it’s because the code isn’t valid. If you run into something like this, validate both the HTML and CSS before moving on. Most times this will clear up your issue(s), and you’ll not have spent hours pulling our your hair and diving into every book and Internet bookmark you have at your disposal.
Good tools make better mechanics
If your a geek, like me, then the only real tools you own are the ones in your ~/applications/utilities/ directory. However, in the real world (gasp!), good, certified mechanics use the very best tools they can afford. Why? Because they work better and last longer. So too with Web development. There’s no substitute for some sturdy and useful tools.
One of the most used tools in my toolbox is an extension for Firefox called the Web Developer Toolbar which was created by a chap named Chris Pederick. Having this extension handy can help you debug CSS problems, validate all of your code and much more. If you develop Web sites, recreationally or professionally, you need this toolbar.
Several editors, including skEdit, have a feature called autocompletion. This feature comes in handy for, yet again, saving keystrokes. When you start typing a known (by the application) command, function or any syntax - the application will suggest to you possiblities. Simply hitting tab, or enter, will automatically write out that piece of code for you. Ahh, automation is a lovely thing, is it not! Be sure to get an editor that utlizes this functionality, as well as teach the application as many commands as possible. In the long run, it saves a lot of time.
There are tools available specifically for writing CSS. When I was a sheep, err I mean a Windows user, I used a program called TopStyle (an awesome program if you don’t already have it) which was specifically created for writing CSS. Since moving to OS X, I haven’t adopted any applications for this purpose, but I hear CSSEdit is quite nice.
Conclusion
Practice makes perfect (read: better). At first, even though I was fully aware of the benefits, I hated the fact that I was wasting time developing with Web standards. But, begrudgingly at times, I pressed on. Now, I’ll never go back to using tables or unsemantic markup ever again.
These, and many other time-savers, have helped me to change my attitude on the subject. I hope that you can use some of these tips to help you save some time and money when developing with Web standards.
If you have any suggestions, tips or tricks that you’d like to add to this entry, please do so by commenting on this entry.
Related sites
Recent features
Coheed and Cambria - The Velorium Camper II: Backend Of Forever
The Format - Give It Up
Leah Andreone - Break Your Fall
Song of the week
Sara Bareilles - Between the Lines
Sara Bareilles' "Between the Lines" is the Song of the Week for April 20 to 26.
Warning: main(images/faq.php) [function.main]: failed to open stream: No such file or directory in /home/.eastwood/cdevroe/theubergeeks.net/wp-content/themes/clockworkorange/sidebar.php on line 119
Warning: main(images/faq.php) [function.main]: failed to open stream: No such file or directory in /home/.eastwood/cdevroe/theubergeeks.net/wp-content/themes/clockworkorange/sidebar.php on line 119
Warning: main() [function.include]: Failed opening 'images/faq.php' for inclusion (include_path='.:/usr/local/lib/php') in /home/.eastwood/cdevroe/theubergeeks.net/wp-content/themes/clockworkorange/sidebar.php on line 119