Advertisements
There is an emerging desire to want to be sexy.
When it comes to our CSS, we all agree that being bloated, slow, and messy are less than attractive traits�but the CSS used in enterprise-wide and mass-adopted web applications, or those with significant daily unique visitors or websites that demand extreme extensibility and flexibility, being smart isn't always being sexy.
In the endless struggle to truly separate presentation from structure, have we lost our way? Are the old-school advocates for CSS still pushing radical and unnecessary thinking to try and justify the mass-adoption of a technology that has already been massively adopted? Smart CSS isn't always sexy CSS� and lets face it, when working with real world applications, smart is where you want to be.
Presentational meaning is meaningful
The separation of presentation from structure has always been the cornerstone of CSS best practice�but what about with respect to choosing semantic classes and ID attribute values? While it has been ingrained in us from the beginning not to use presentational attribute names such as class="red", there is in fact a time and place for attribute names that convey presentational meaning. It is an intensely debated topic with little resolution; what "should" we name it vs. what "can" we name it? There is value to be gained in utilizing presentationally meaningful markup�use internal standards to complement web-standards, and embrace the power of the cascade to create smart CSS.
Separate presentation from structure. When did we become so afraid of maintaining, updating, and manipulating HTML? And when did the use of CSS become tied to the idea of never having to touch our markup? Fundamentally even those leading this movement towards having "sexy" stylesheets don't always practice what they preach; most of the markup created by the 'best of the best' is a combination of presentational and structural. Evaluate your own markup or the markup of those you admire most; look for presentational language such as "header", "footer", and even "sidebar". It is there because it is smart, because it is meaningful and appropriate; but it surely isn't "sexy".
There is presentational meaning throughout great markup; utilizing CSS to its true potential does not mean being so vague as to be meaningless. Many front-end developers are plagued with the question: "What if?" What if the header of today is the footer of tomorrow, what if the sidebar of yesterday becomes the top bar of today? What if red text changes to green text? What if� I'll tell you what if�when "if" comes; you change! It doesn't mean you make your CSS so vague and bloated that you never have to touch your HTML when "if" happens. If your sidebar of yesterday does become your top bar of today, then it's most likely (in fact almost certain) that there is probably a larger, more fundamental shift in the website itself. A shift significant enough that images, graphics, content, and yes, your precious HTML will need to be altered. CSS, no matter how sexy, is not that powerful!
Presentational meaning can help bring clarity to mark-up, but smart CSS is more than just clarity; it is about intelligent, logical consistency from which more meaning can be derived.
Creating Standards in a Web Standards World
We are working in and embracing this web standards era; yet we must ask ourselves, are we deploying standards of our own? Standards are "a rule or principle that is used as a basis for judgment". if one entity is like many, should the similar entities share consistencies?
A classic example is horizontal navigation. It is a fairly common "standard" to use an unordered list for the structure of navigation, regardless of vertical or horizontal presentation. On many large-scale websites a horizontal navigation can be put to use in a variety of locations; but yet the CSS to control their presentation is unnecessarily repeated just as many times throughout the stylesheet.
If an entity shares similar behavior throughout a system, the most logical thing to do is give those like it similar naming conventions to identify them as the same, regardless of presentational implications. Giving every instance of a horizontal navigation a meaningful and consistent "standard" class name such as ul.horizontal allows all instances to immediately conform to their dictated presentational form. I know, if we deconstruct the suggested class name it is very unsexy; we used "horizontal" which is very much a presentational name. But what are we running from other than the fact that we really want to be "sexy" regardless if that comes at the cost of being smart? Now, by adding one standard class name to any HTML list element you wish to be horizontal; you save yourself the four to five lines of your CSS that would have been required every time�you've just saved a little more time and little more file size by being just a little more smart. And you've just made your markup and CSS that much more meaningful; creating the basis for a horizontal list for anyone in your site is only a class name away�an action that can occur many times over.
"But," I hear you cry, "What if we no longer want the list to be horizontal?" Well, just remove the class name from the HTML �I guarantee that it will be easier than removing the four to five lines of CSS, and second-guessing if any of the rules have uses other than ensuring the list was horizontal. Sometimes changing HTML is quicker and faster than editing CSS.
Smart CSS is about being clean, lean, and meaningful through clarity and consistency; and it is the inherent nature and design of CSS that is the basis for that.
Embrace The Power of Specificity
When did we stop respecting or utilizing the power of specificity? The drive for sexy CSS sees designers stripping out as much perceived "cruft" as possible�why use #sidebar .horizontal when you can use #sidebar ul�but if we named more elements, specificity helps us target those entities. If we are specific, organized, and detailed within our HTML markup, controlling that markup within our stylesheets becomes much easier and much more practical. If you want to change a horizontal list and remain a purist without editing the markup, then change within the CSS using specificity. Your CSS is not set in stone the moment it is written; it was intended to be allowed to change and architected to be over-written. Being meaningful within the markup, being organized within that meaning, and detailed with respect to hierarchy is the objective. You can have presentational meaning within your markup without the fear of change; specificity (and the cascade) can isolate and target for change.
Oftentimes the individual who created the CSS is not the person who maintains it. Not only do detailed and organized attribute and class naming conventions help get past many of the concerns of presentational meaning in markup, they also help maintain internal standards and consistencies while still remaining flexible and extensible.
The books we revered in the beginning to help us learn CSS fundamentals were slightly misleading and misguiding with respect to real world application; great for learning the fundamentals but poor for building in the real world. These early learning classics would print unarguable examples, demanding a class name such as "red" be changed to something less presentational and more contextually meaningful, like "emergency" or "alert". What do you do when you work for a car manufacturer whose marketing campaign is to create a website that showcases all of the variety of colors for a specific model of car�and the only internal differentiator for each car is the color itself? There is no numeric and alphabetic appendix to the car model; just the model and its color�the orange book never covered that. And now here we are, the best in breed, trying to stay sexy and not looking at what is most meaningful and logical. More often than not we are more concerned with what to name something in some desperate attempt to be sexy and appeal to our peers�and we forget about being clear and meaningful for our co-workers and clients. In this particular example, a class name of "red" is not flawed or inappropriate; it is actually the best and most useful naming convention.
Designers have taken CSS under their wing, and as a result it has become more about "style" and less about utilizing its full potential.
Be Smart.
Smart CSS is about being meaningful; it is about not being vague and redundant within your CSS simply to be more "sexy".
One thing to note is that it is not the job of CSS to overcome the shortcomings of your development team, content management system, or internal processes. If your application under the hood isn't being developed or maintained in a forward-thinking, flexible, and extensible manner, then smart CSS can only do so much. I advocate changing the front-end HTML markup�but that can only happen in an environment that makes it a realistic possibility to do so. CSS has long been utilized as the designer's tool to overwrite and overcome internal barriers between upper management and developers. There has for far too long been an unnecessary separation of presentation from structure that has created this unfriendly divide between HTML and CSS. The advocates constantly praise this ability to "redesign" a website using nothing more than CSS; where technically that is possible, the claim is fundamentally flawed. The world, the real world, does not behave like the CSS Zen Garden. A redesign is almost always more than simply aesthetic; the web designers of the world who've become the early adopters and advocates have been na�ve in thinking "redesign" equates to presentation alone.
This isn't just about classes and ID attributes, it is about extremely clean and light-weight CSS that powers very large websites that demand extreme flexibility and extensibility. It is about knowing CSS and its true capabilities and respecting those, even above beautiful philosophical thoughts such as this creative and professional separation. "Sexy CSS" is a great title for a blog post, but no means for creating websites of substance. Be flexible, extensible, meaningful and appropriate; create smart CSS.
