1. Why Should We Go Beyond Basic CSS?
The first to ask is “Why?” Why use these alternative tools and methods to develop CSS code? Why take the time to learn them, especially when no one syntax method, CSS programming concept or technique will replace CSS as it is today?
Well, here’s a better question: “Why not?” While CSS will probably not be replaced by any one method, many of these techniques are similar, and their general concept is becoming increasingly popular. For example, many of these new methods allow us to more easily implement rounded corners. With this kind of demand from the community, CSS 3 has now made it easy to create rounded corners. In time, with full support and forward-looking attitudes, these new ideas may become standard, allowing us more options as Web professionals.
And let’s state the obvious: using alternative options like these can save time and be more efficient than using traditional CSS methods, even if they can take some time to learn at first.
As new methods arrive, the division between Web developer and Web designer shrinks. One day, knowing one trade may not be enough. These tools are moving the process along by giving designers easier ways to code and giving developers easier ways to design.
A New Era for Web Developers
Traditionally, Web developers have been the gurus of coding. PHP, JavaScript, Ruby and the like are the languages that developers deal with regularly. Recently, though, we’ve seen coders call themselves “Web developers” when they just convert PSD to XHTML and CSS. How can this be, and are they misrepresenting themselves?
Of course not. In recent years, the science of CSS and the need for semantic XHTML has become much more complex and allow, in some instances, for more programming-related concepts. The first few items in this article will be specific to CSS’ advances in programming concepts and how these changes can be both detrimental and beneficial.
Whether you are familiar with these methods or not, we invite you to practice these new techniques and share your experiences, because many of these methods are still very experimental.
A Web Designer’s Dream
Programmers aren’t the only ones who get more options from the new CSS methods. Designers get more options, too, including easier options for layout and common Photoshop effects. Taking the time to learn a new CSS library or technique is clearly well worth the trouble if it allows you to achieve the most common Photoshop techniques with few to no graphics.
In the early days of the Web, designers were limited to certain layouts and design styles merely because of the Web’s limitations. With the future of CSS, the only thing that will hold back Web designers is their own imagination.
Let’s take a closer look at what we have to work with right now and what’s in store for us in the future.
2. CSS Variables
Developers can easily see the benefit of using variables to code their Web apps, so seeing the benefit of variables in CSS is just as easy. Are they needed though? Before we answer a tough question like this, let’s go over what they are and how both designers and developers can use them.
Similar to a programming language, CSS variables can be used to define style sheet-wide values with one descriptive word. This one word can then be used repeatedly throughout the style sheet to use the value assigned to it. The point of variables is to save time and, in most cases, create more efficient code. An example of the idea in practice is below. You can take a closer look at this method on BrajeShwar.com.
- @variables {
- oColor: #fefedb;
- oBgColor: #ccc;
- oMargin: 1em;
- oPadding: 1em;
- }
- @variables print { /* applies only to print */
- oColor: #000;
- oBgColor: #fff;
- oMargin: 2em;
- oPdding: 2em;
- }
- div#post div.entry {
- border: 1px solid #666;
- font: normal 1em/1.6em ”Lucida Grande”, Lucida, Verdana, sans-serif;
- margin: var(oMargin);
- padding: var(oPadding);
- color: var(oColor);
- background-color: var(oBgColor);
- }
At first glance, the above doesn’t seem any easier. What’s the point of typing out color: var(oColor); instead of just entering color: #fefedb;? That’s true… until you get into a larger style sheet. With hex values for colors all over the place, CSS developers often find themselves scrolling throughout a style sheet, copying and pasting color codes and other style attributes.
If we plan to have one shade of, say, blue throughout a design, using a variable for it would be useful. We may want the same shade of blue for hyperlinks and the footer background. Rather than search through our huge style sheet for the exact hex value of that shade of blue, we know that we defined a variable called colorBlue with that hex value. We can then just use the variable in its place to save time.
We can almost get back to the simpler days of HTML colors (e.g. color="blue"), without sacrificing Web standards.
The Cons of CSS Variables
However, with all good things comes the bad. CSS variables has many critics as well:
“Adding any form of macros or additional scopes and indirections, including symbolic constants, is not just redundant, but changes CSS in ways that make it unsuitable for its intended audience. Given that there is currently no alternative to CSS, these things must not be added.”
– Why “variables” in CSS are harmful
This quote is from an essay hosted on the W3 website. Although it is saying the exact opposite of what this article supports, the author makes some valid points, and we designers and developers should think closely about the pros and cons before using CSS variables and other advanced techniques. While the essay above focuses primarily on CSS variables, it does go a bit into other advanced ideas in CSS that we’ll discuss later in this article.
“The other implementation is written in PHP. It proves that it is not necessary to add constants to CSS. Just like the existence of the WebKit implementation cannot be taken as proof that constants in CSS are useful, so the PHP implementation cannot prove that either. But the PHP implementation has the benefit of letting authors determine the usefulness for themselves, without modifying CSS on the Web.”
Many solutions for using variables for style sheets are indeed in PHP, and the author makes an excellent point on how some of these methods can provide solutions for developers who would still like to use constants, while preserving CSS as it is today. Could this be a better option than all other CSS variable solutions?
“Thus there is a cost to user-defined names: memory (when writing the code) and understanding (when reading). That cost is offset by the cost of the alternative: long functions. How is that for CSS?”
Another argument states that CSS variables could be pointless or even harmful to efficiency. Could these variables actually make our CSS slower and file sizes larger? Incorrectly used, yes. A common fear among opposers of CSS variables and other programming techniques is that designers and developers will start using CSS’ new power to make things easier on their end but then stop bothering with CSS code efficiency.
Point taken, but there are many cases in which CSS variables make style sheets easier to use and equally or more efficient. In such cases, using CSS variables may be smarter.
“CSS is fairly easy to learn to read, even if some of its effects can be quite subtle. When there is a page you like, you can look at its style sheet and see how it’s done.”
Even if we take care of efficiency issues, there is also the point that CSS will become similar to a programming language in its difficulty, both in creating and understanding CSS code.
We looked at just one insightful essay on why CSS variables may not be such a good idea. For more reading, check out the articles below:
- Why CSS Needs No Variables
A wonderfully written article on alternative methods to CSS variables and why CSS variables are not worth the fight. - CSS Variables Considered Harmful?
Another look at the issues discussed above but from another developer’s perspective. Some excellent points are made in the post itself and the comments. - Why “Variables” in CSS Are Harmful
Here is the essay we looked at above, in case you want to take a closer look.
Despite the movement to stop CSS variables altogether, many designers and developers are still strongly for them. If you’re leaning to that side, keep in mind these points as you venture over:
- Always be efficient. Know when to use CSS variables and when just to use selectors.
- Name constants with a descriptive title for easier reading, especially if the CSS code is going to be changed.
- Will the style sheet be reused? If so, then maybe CSS variables are not appropriate.
Walkthroughs for CSS Variables
Below are some tutorials, walkthroughs and other articles containing insight on CSS variables so that those of you who want to implement CSS variables can do it correctly.
CSS Variables with Server-Side Includes
This example and walkthrough goes through a way to create the effect of CSS variables with programming languages. It explains how this can become a standards-compliant approach and even how specified CSS style sheets can be generated dynamically with server-side programming languages and a smart use of CSS variables.
Another PHP solution, but with a premade class. All that is needed is simply to create the desired CSS variables. After the PHP class is downloaded and set up properly within the relevant HTML and CSS files, implementing these CSS variables is probably one of the easiest methods.
Dynamic CSS A.K.A. CSS Variables
Yet another implementation of CSS variables with PHP. This walkthrough also has a unique section on browser detection.
A very simple example of using PHP in CSS to create variables. The tutorial states that this takes only six lines of PHP code in its simplest form.
Implement CSS Variables with PHP and .htaccess
Here is a NetTuts+ tutorial on implementing CSS variables that is similar to the above techniques, but this time with the .htaccess file. A smart approach to CSS variables.
CSS Variables with Rack Middleware
Here is another premade script that does the work for you. This developer realizes the benefits of CSS variables but doesn’t like all of the extras that come with alternative CSS tools. So, he made a script that would automatically create just CSS variables, making it easy and efficient.
A Look into WordPress CSS Variables
Not an article or tutorial, this is a discussion on the WordPress forum about strategies to implement CSS variables in WordPress. The discussion focuses on one specific issue, which is a general problem nonetheless. The solutions presented in this thread address many problems of CSS variables and WordPress.
3. Conditional CSS
Conditional options in CSS have a variety of benefits but can also bring the same deficiencies as CSS variables in that they alter the state of CSS as it is. Many of the cons have to do with efficiency, confusion and, in some cases, added HTTP requests (because it deals with a type of server-side programming language).
Nonetheless, let’s look into more of the benefits of conditional CSS statements. Just keep in mind the cons that come with them, and always be thinking of new ideas to overcome them. So far, the tools and solutions that give developers and designers conditional statements in CSS have come to be relatively well accepted. This is because CSS conditionals seem to solve bigger problems in CSS, and the lack of efficiency seems minor by comparison.
Let’s not forget the original CSS conditional. The problem with the traditional CSS conditional for IE, however, is that it has no else or else if. Although the use may be limited, an if/else statement for CSS could allow designers and developers to specify styles for other types of conditions: browsers, for example.
One popular tool for calling styles according to browser type is Conditional-CSS.com. While many other solutions are out there for conditionals as well as this particular problem, this tool can do most of the work automatically, with minimal confusion.
Conditional-CSS allows the user to customize a Web script in their choice of language (PHP, C# or C), and it compiles the code along with an uploaded style sheet to create CSS conditionals based on browser type. With this tool, those nasty IE bugs become easier to handle, and other browser bugs and unsupported features can be handled more gracefully. Using this method, you no longer has to create a separate style sheet for IE (or any browser for that matter), instead using old-fashioned CSS conditionals.
For a closer look at how one can use the syntax of this tool, here is the sample code from the Conditional-CSS website:
- /* Conditional-CSS example */
- a.button_active, a.button_unactive {
- display: inline-block;
- [if lte Gecko 1.8] display: -moz-inline-stack;
- [if lte Konq 3.1] float: left;
- height: 30px;
- [if IE 5.0] margin-top: -1px;
- text-decoration: none;
- outline: none;
- [if IE] text-decoration: expression(hideFocus=’true’);
- }
As you can see, the code is easy to read, write and handle. This is a smart solution to a common problem in Web development. However, as with CSS variables, there is the risk that developers will use this method to overpower CSS’ basic functionality.
The solution is intended primarily for common IE bugs, although it provides more flexibility. As with any extension of CSS, use it responsibly, which means using it only when necessary. Rely on traditional methods to fix most IE problems. Because IE6 is the most troublesome, check out this article on Sitepoint:
10 Fixes That Solve IE6 Problems.
Customized Native CSS Conditionals
What we discussed above is a great reason why developers would use conditional statements in CSS. But many of us would like even more control. For example, instead of being limited to browser type, many of us who work with fluid layouts would like to be able to create conditionals based on browser width:
- if($browser_window >= 600px && $browser_window < 1280px){
- p{width: 600px;}
- }
- else if($browser_window < 600px){
- p{width: 90%;}
- }
- else{
- p{width: 800px;}
- }
Similar to what we saw with Conditional-CSS, the solution is to attach a more advanced language, whether PHP, Ruby, JavaScript or another of your choice.
Dynamic Resolution Dependent Layouts is a great example of how to use an if/else statement for this problem. In addition, we can use the same idea to create customized conditionals in CSS using JavaScript.
The idea here is to use separate style sheets altogether, and then use a JavaScript (or a script in your preferred language) to call the correct style sheet. There are no conditional statements in the CSS at all; rather, the website just simulates them. And a default option is available if JavaScript is turned off. Also, using multiple style sheets will have no negative consequences because the JavaScript will be calling only one in the end, based on the conditional statement. This means there will be only one HTTP request, so it will not slow down the Web page.
Here is the first part of the example code:
- <link rel=”stylesheet” type=”text/css” href=”css/default.css”
- title=”default”/>
- <link rel=”alternate stylesheet” type=”text/css” href=”css/thin.css”
- title=”thin”/>
- <link rel=”alternate stylesheet” type=”text/css” href=”css/wide.css”
- title=”wide”/>
- <link rel=”alternate stylesheet” type=”text/css” href=”css/wider.css”
- title=”wider”/>
By specifying the title attribute, we can use this in our JavaScript file:
- function dynamicLayout(){
- var browserWidth = getBrowserWidth();
- //Load Thin CSS Rules
- if (browserWidth < 750){
- changeLayout(“thin”);
- }
- //Load Wide CSS Rules
- if ((browserWidth >= 750) && (browserWidth <= 950)){
- changeLayout(“wide”);
- }
- //Load Wider CSS Rules
- if (browserWidth > 950){
- changeLayout(“wider”);
- }
- }
Be sure to check out the full article and script for more detail. This is a good example of how HTML, CSS and JavaScript can be used together to create dynamic CSS and, more specifically, if/else statements to manipulate CSS. One will need to customize the method, however, to get the desired effect.
4. A Better Syntax
Advanced users of CSS know that CSS’ current syntax has some flaws. Although it is well-structured and easy to read for the most part, it is fast becoming outdated as new Web designs call for creative layouts and new Web pages need enhanced functionality. This is what some of these new ideas attempt to address.
Some solutions are nested selectors, nested declaration blocks and smarter shortcuts. We define these below.
Nested Selectors
A forum post over at Webmaster World discusses a specific problem that could be solved with nested selectors. The inquirer wants to override page-specific properties, which can be done easily with the following code, of course:
- p.intro {width: 400px;}
- .alert {color: red;}
- #pageid p.intro {width: 200px;}
- #pageid .alert {color: blue;}
For longer style sheets, though, this method can get so confusing and repetitious that they become difficult to read. A better solution would be to use a nested-like structure that would make the code more organized and efficient:
- p.intro {width: 400px;}
- .alert {color: red;}
- #pageid{
- p.intro {width: 200px;}
- .alert {text-align: blue;}
- }
This way, #pageid would have to be called only once, and the original uses of p.intro and .alert could be used as a default, while more specific IDs could use the same classes with different values. The overall result would be more efficient and legible.
Unfortunately, the only solution to the problem involved separate style sheets. The problem with nested CSS selectors is that the problems they address are various, and essentially all can be solved with current CSS child classes.
One solution would be to use an alternative “CSS language” that includes nested selectors as part of its custom syntax. A list of these alternative tools is at the bottom of this article, along with further description.
Nested Declaration Blocks
Another issue is our inability to nest entire declaration blocks. The article “What I want from CSS3: nested declaration blocks” offers a smart outlook on the benefit of nested declaration blocks.
Two code examples from the article are copied below. The first represents the way things are done now, which is quite inefficient in most circumstances:
- #content ul{
- list-style:square;
- margin:0 2em;
- }
- #content li{
- list-style:square;
- padding:2px 5px;
- line-height:1.3em;
- }
- #content a:link{
- [...]
- }
- #content a:visited{
- [...]
- }
- #content a:active{
- [...]
- }
- #content a:hover{
- [...]
- }
- #nav ul{
- list-style:none;
- margin:0;
- }
- #nav li{
- list-style:none;
- padding:2px 5px;
- line-height:1.3em;
- }
- #nav a:link{
- [...]
- }
- #nav a:visited{
- [...]
- }
- #nav a:active{
- [...]
- }
- #content a:hover{
- [...]
- }
A much more sensible approach would be:
- #content {
- ul{
- list-style:square;
- margin:0 2em;
- }
- li{
- list-style:square;
- padding:2px 5px;
- line-height:1.3em;
- }
- a{
- :link{[...]}
- :visited{[...]}
- :active{[...]}
- :hover{[...]}
- }
- }
- #nav {
- ul{
- list-style:none;
- margin:0;
- }
- li{
- list-style:none;
- padding:2px 5px;
- line-height:1.3em;
- }
- a{
- :link{[...]}
- :visited{[...]}
- :active{[...]}
- :hover{[...]}
- }
- }
Many people would like to be able to use this new method at least for syntax related to links, because they are something we all deal with in every style sheet. Styling lists would also be a great use of this syntax, perhaps similar to how they are nested semantically in HTML markup. If CSS could mimic this nesting ability, style sheets would be much more efficient.
There is no implementation of this kind so far in CSS 3, but as with nested selectors, similar techniques can be achieved with various CSS extension tools, which we explore below.
Smarter Shortcuts
A much-wanted feature in future versions of CSS is to be able to use alternative and smarter shortcuts to shorten CSS code. Some of these are already being implemented in alternative CSS languages, but the new CSS 3 has no sign of this. With greater support, perhaps basic CSS could become smart enough to handle these shortcuts in another 10 or so years, when CSS 4 is introduced.
To see the benefit anyway, let’s look at a few examples in which smarter shortcuts would be beneficial.
When many elements from a certain class or ID share the same properties, things can get a bit repetitious:
- #navigation h1, #navigation h2, #navigation h3{
- font-family: Verdana, Tahoma, sans-serif;
- letter-spacing: -1px;
- }
Smarter syntax would tighten things up, saving both time and space in the style sheet:
- #navigation [h1,h2,h3]{
- font-family: Verdana, Tahoma, sans-serif;
- letter-spacing: -1px;
- }
As most of us know, styling links in CSS can be a huge hassle. Nesting these elements, as shown above, is a great solution, but a smarter syntax for dealing with pseudo-classes would also be good:
- a:link, a:active, a:visited
- {
- font: bold 10pt Verdana, Tahoma, sans-serif;
- color: #444444;
- }
- a:hover
- {
- color:#000;
- }
- #navigation a:link, #navigation a:visited,
- {
- font: normal 10pt Verdana, Tahoma, sans-serif;
- color: #000;
- }
- #navigation a:active, #navigation a:hover
- {
- font-size: 14pt;
- }
Having all these pseudo-classes in the way is rather inefficient. Grouping them would be much smarter:
- a[:link, :active, :visited] {
- font: bold 10pt Verdana, Tahoma, sans-serif;
- color: #444444;
- }
- a:hover{ color:#000; }
- #navigation a[:link, :visited] {
- font: normal 10pt Verdana, Tahoma, sans-serif;
- color: #000;
- }
- #navigation a[:active, :hover] {
- font-size: 14pt;
- }
While the solution in the example above saves only a little space, that extra space can do wonders in a larger style sheet. And most will agree that this is a much easier way to read and understand style sheets.
The general goal for any situation like this is to be able to share elements, pseudo-classes and any other type of extension with o one declared class or ID, rather than repeating the class or ID name repeatedly.
5. Simple Mathematical Functions
Most of us have come across a piece of CSS code for which we thought, “This would be much easier if I could just subtract X number of pixels,” or “This solution would be easier if I could just add X% onto this DIV.”
Without this simple math for CSS, most of us have found workarounds to many of these problems. But by implementing simple mathematical functions in CSS, we can eliminate extra code and make our thought process easier.
A rough example could be something like below:
- .element {
- width: 100%-150px;
- }
Example of the Centered Layout
This technique would benefit fluid layouts or layouts that need to be aligned relative to the user’s screen size. It would also help layouts that have centering, either vertically or horizontally.
Take the very basic example above of a horizontally centered layout. Simply using auto for both the left and right margins creates a centered layout for the end user, no matter how wide their screen is. But what if, for whatever reason, you want that centered wrapper shifted 200 pixels to the left? The wrapper has to be shifted 200 pixels relative to the center of the user’s screen, not just your own.
Right now there is no solution for this. Most designers faced with this issue either just float everything to the left and use absolute positioning to finish the job. But those who have larger resolutions will see excess white space to the right of the screen. Not a bad solution, because everything is still in place, readable and efficient, but having the power to create a layout that accommodates all users would be better.
The second solution is to center the layout but adjust the elements around it. This could mean repositioning some elements on the background image or adding “artificial” transparent spacing to align the wrapper.
This is just one example, but simple math could solve many problems in CSS. An article over on KilianValkof.com titled “Random CSS Thought: Math in CSS” presents just this idea and specific examples of how this could be helpful.
Is It Right?
As with many new ideas for CSS related to programming, a debate arises over whether we should do it at all. Implementing an idea like this in future versions of CSS would no doubt help out many developers and designers, but is it going too far?
The concern may not be that the CSS would become more inefficient or complicated but rather that, as we have heard with most complaints against proposals to expand CSS, it moves away from CSS’ original purpose, which is to style.
But wouldn’t we be using these techniques to improve styling? Techniques such as these could give designers more possibilities for layouts, transporting us to the future of Web design more quickly. So is simple math another way to style with CSS or yet another programming concept that purists have to put up with?
