When I was first introduced to CSS, my mind exploded with possibilities that CSS created, which lead to thoughts of what it could provide me as a web designer. CSS provided the bridge between web designers and web developers. We have all seen situations where a developer created almost the perfect website, yet it didn’t have the appeal that a good front end designer could present. Now with CSS, you could have both in a seamless creation of perfection.
I imagined where designers might discover easier ways to code, and developers would find easier ways to design, to the point where they would become synonymous with one another. I dreamed of ways that cumbersome HTML coding could be replaced with efficient and quick CSS code allowing cleaner, yet more stylistic website pages.
Web developer gurus have traditionally used PHP, JavaScript and Ruby as the languages they regularly use. Now there are some folks that are simply taking PSD and converting it to XHTML and CSS, and proudly declaring themselves web developers.
Not all dreams are good dreams. One of the fears I had is there would be designers and developers over using CSS variables and constants as found in PHP, to the point where they re actually making their style sheets longer. They also face the problem of being able to write their code that can be easily understood when reading it. As long as designers and developers make sure they are always efficient in writing their code and knowing when to use CSS variables, or when they should be using selectors.
I liked being able to use CSS to define colors as word-colors like blue, yellow, green and such. But then I noticed that during W3C validation, it would produce error warnings. W3C ants every color defines by numbers. Normally that isn’t a problem, however if you are designing a page that has extensive colors and shadings, it becomes difficult to remember what each code represents. It is very difficult to track. However, if you write your code as below, it is then a simple matter of reading your code if you need to make a change.
- $tan = “B7722D”
- $cream = “F5C350”
- $menuUp = “E9AB54”, // lite tan
- $menuDown = 473729”, // dark gray
SEO optimization is being discussed on everywhere, from individuals to design studios soliciting customers, and most of them skip over CSS as a simple and free solution. There are actually several websites that offer CSS Optimization tools. Some of them are relatively easy to use, and there are those that are fairly complex and harder to use. Most of them produce incredible results. Basically what they do is compress CSS files to allow them to load quicker, by merging similar classes, removing useless properties and whitespace, etc., will make some of the code harder for you to read. However, with larger CSS files it can condense the file that it really makes a difference in page loading times.
Even if it only saved 10% of the standard loading time, that alone would be significant over a course of a month or a year. Any time savings is beneficial considering there is a good chance of saving a viewer from leaving the site and going else where on the net. It is recommended that the designer or developer always keep a copy of the readable CSS code so that if they ever needed to make any changes it could be done quickly and easily to find what you need to change, and then it can be re-optimized.
Many broadband users might not think this matters much, as most websites seem to load fast for them, but if each site you went to loaded even 10% faster, think of all the time it could save you over the course of a week, a month or even a year. The bandwidth savings for the website operator can also be immense. I would recommend that you always keep a copy of your human readable CSS code so that if you ever need to make any changes it does not take you a long time to figure out what you need to change, and then you can re-optimize it.
The CSS optimizer that appears to be best is “Icey’s CSS Compressor” which out performed all of the others, with the added benefit of displaying the compressed code in color making it easier to see the changes that had been done.
All in all, CSS is here to stay, and is actually only limited by our dreams. CSS can be what you want it to be, or it can be something you want to avoid. However, that would be your loss. If you are new to CSS, read and experiment with it all you can, so it is truly an amazing tool for website creation and esthetics simplification.
