As I was reading the CSS questions posted on the forums, I thought about how interesting it would be to try to learn the language myself. By no stretch of the imagination am I a code guru, and I can’t provide an exhaustive list of best practices. Below are simply the lessons I learned from my experience delving into CSS. If you’re just starting out, you’ll hopefully be able to learn from my mistakes.
- Dreamweaver is your friend.
While it’s certainly true that you can edit your CSS document in Word Pad, Dreamweaver made it easy for me to set appropriate values. Since it numbers each line, if you use a CSS validation program, it also makes it easier to identify where the proposed changes are located. It color codes your document to make it easier to follow and allows you to connect to your storefront (or web page) so that you can make the changes locally before using the built-in FTP program to push them live. It really simplifies things, and simplicity is good.
2. Don’t forget the punctuation.
I can’t even begin to discuss the number of times I spent an hour or two at the keyboard making tiny changes and tweaks to get the look just right only to find that, after publishing, they didn’t work for some mysterious and unknown reason. After spending another hour poring through the code, I found that the “problem” was almost always the same, mainly because I stopped using Dreamweaver’s built-in editor after I became comfortable with CSS and entered changes manually instead.
When executing a function in CSS, you absolutely cannot forget to use the “;”, the “{“, or the “}”:
a {
color: #339900 ;
background-color: inherit ;
text-decoration: underline ;
font-weight: bold ;
}
3. Backup, Backup, Backup.
So, you spent 2 hours changing your CSS document and uploaded the changes, and they promptly broke your website. What do you do? Well, if you thought ahead and saved a backup copy before you made changes, you can just revert to it. I was so strict with this tactic that each time I made a minor change, I’d upload the file, hit refresh once or twice (since most browsers cache the old information), and if nothing broke and I liked the change, I’d save that file as a backup and proceed to another small change.
After following this procedure a few times, I found that it didn’t slow down my progress. As an added benefit, I never had to re-do a large number of changes because one small item decided not to work properly.
4. Don’t get discouraged.
Learning something new is never an easy task, and it’s much more difficult to learn something like CSS solo. Sticking with it is really the key. Also, contacting a designer (if you know one) or leveraging the Volusion community is a great way to find answers that you can’t find using a typical Google search.
5. Drink coffee.
Sometimes the absolute best advice is to just walk away. After sitting at a computer for a few hours, you start to get eye strain, fatigue and other issues. That’s saying nothing of the frustration you feel after you realize that IE6, IE7, and IE8 don’t render code the same way, which make additional tweaks necessary. Grab a cup of coffee, a glass of water, make a sandwich or send Ryan a cashier’s check for… OK, couldn’t help that.
In all seriousness, though, I found that after a frustrating issue popped up, doing something else and getting my body in motion a little bit made me feel better, and I always found a way to resolve the problem shortly after sitting back down.
These are five of the most useful lessons I learned during my foray into the jungle that is CSS. I’m absolutely certain that others have additional lessons they’d like to share, so please feel free to provide them here in the comments or, if you’re a Volusion store owner, in our online community!