High Performance CSS code design

In the last few years much emphasis has been placed on web performance issues. Browser vendors have optimized JavaScript engines, JavaScript libraries have been honed, and content delivery has been improved. Unfortunately, CSS has received less attention. Developers have been advised how to optimally transfer CSS files, and instructed to use CSS shorthand, but very little has targeted CSS code itself.

Ms. Nicole Sullivan is among those looking to improve CSS code. She has been promoting “OOCSS,” or “Object Oriented CSS,” her methodology for how to design and refactor CSS 1. She has collected a number of best practices for architecting a CSS framework. The benefits are simple: CSS will perform better, become more modular, as well as being grounded with a consistent API, making it easier to learn and use. This is accomplished by reducing the file size and complexity of our CSS.

While many of these techniques can be considered common practice for experienced CSS programmers, implementing them can be difficult. The art is in analyzing trade-offs and picking the optimal path. That said, these rules are not for everyone, or every site. It all boils down to deciding if the site’s performance gain is greater than the time it takes to learn and use the techniques.

Useful for sites with

• Many pages
• A common visual and structural design
• Critical performance requirements

Less useful for sites with

• A few pages or just one page
• Varying design (possibly “portfolio” or design sites)
• Few performance concerns

So how do we get started? We go hunting for bad code smells. In Chapter 3 of Refactoring: Improving the Design of Existing Code, Martin Fowler and Kent Beck coin the phrase “code smell,” meaning “structures in the code that suggest the possibility of refactoring.” Simply put, we go looking for chunks of code that our intuition tells us could be cleaned. In the chapter heading, Grandma Beck is quoted (then talking about child-rearing), “If it stinks, change it.” We’ll take a more formal approach to finding these code smells, going from easy to difficult. First, we’ll sniff around the CSS selectors, and then move onto the CSS properties. Finally we’ll look for visual design patterns that can direct the structure of our CSS.

Selectors

Selectors are both the easiest place to find code smells in CSS and the easiest to correct. Three big code smells tend to stink up CSS selectors; unused selectors, location-based selectors, and overly specific selectors. Each contributes significantly to increased CSS file size.

Check-in

Not a technical post, but a personal update. I promised over a week ago.

I’ve been exceptionally busy at work, we’re beginning to finish up a much needed, much discussed by librarians, redesign of PubMed. We’ve put a ton of user interaction effort into this project, as well as a good sprinkling of graphic design (watch out, I even did some parts!) I think people will be really positive about these new changes.

[Just for the record, if someone happens to stumble upon this from the librarian community, yes, release date is still end of summer, and yes, there will be a Beta period, so no need to worry about a short timeline to update your class or instructional slides. We do listen!]

It’s also been exciting that we’ve brought a few new people on board. Always exciting to have new hires, despite the fact that it’s a lot of work… and all of the trainings I have to do.

What else… I’m planning on attending the DelveUI masterclasses this week in Brooklyn. It will be interesting to see what some of the heads of state have to say about the field. I’m a little excited, this masterclass format isn’t the usual boring no-content fluff that you hear at most conferences. I get the feeling that there will actually be code present! My thanks to the lovely Jina “Sushi & Robots” Bolton for the opportunity for the free ticket.

I’ve been reading… way too many things. I’ve been reading Learning jQuery 1.3, jQuery UI 1.6, and jQuery in Action and you’ll see the reviews of those two books very soon. (Can you tell that we’ve switched to jQuery at NCBI?) I’m a little behind with that reading, but I’ve been working hard on other things. Additionally, I went on an Amazon spree, and started reading Programming the Semantic Web, An Introduction to Lambda Calculi for Computer Scientists, To Mock a Mockingbird, 101 Things I learned in Architecture School, Code Complete 2. Last but not least, I’ve also been reading any photography book that I can get my hands on.

Yes, that is a lot of books, and I haven’t had much time for them. I’ve been working hard at work, and I want to relax a bit when I come home. Once summer ends, things will return to a slightly more regular pace. I’ve been learning so much on the job, that I’m not very worried about falling behind in reading.

Review of "Web Form Design, Filling in the Blanks"

“Forms suck. If you don’t believe me, try to find people who like filling them in.”;

Are you kidding, I paid for a book that begins like that? My first reaction was that I could have written that! Well I didn’t write it, and I also feel that I got my money’s worth out of Web Form Design, Filling in the Blanks, by Luke Wroblewski.

Forms are hard. I don’t think I need to mention how hard they can be for users… nor do I need to mention what’s at stake if a user finds your form too difficult. Every web developer who doesn’t have his/her head in the clouds should know that. Forms, however, are also very difficult to create… correctly! A well designed form requires a lot of careful, detailed thought. You have so much to consider… usability issues, accessibility issues, and you usually don’t have anything to go on except for your personal experience. This book will help you methodically approach form design, and give you the experience of an expert to guide your decisions.

Web Form Design is useful, because Mr. Wroblewski takes a very detailed approach to each aspect of form design. Within each chapter, he thoroughly analyzes the major elements to consider when designing a form. For example, the chapter on “Actions”; is devoted to action items such as submit and cancel buttons. One of the sub-sections discusses where to place these items on the page. The author first presents the reader with the following image demonstrating all of the reasonable placements for the submit and cancel actions.

Using eye-tracking and usability data, he then discusses the pros and cons of each arrangement, without ever deciding one is better then all others. This is key because it lets the reader, knowledge in hand, decide his/her own course of action.

The book is especially valuable because of the user data, eye-tracking data, and case studies presented within. Mr. Wroblewski’s backs his reasoning with either a summary of these tests or with an example culled from his experiences. He reinforces his points with a number of demonstration images, all available from the book’s flickr page. Then he includes a short “best practices”; section to close each chapter, outlining what was discussed. These can be used almost as checklists. Interspersed in the text are sidebars which present real-life examples and perspectives from numerous field authorities.