Skip to main content
CSS Workflow Tips from the Front-end Design Conference

My next entry for the Front-end design conference series is on Jina Bolton’s presentation "CSS Workflow”. Jina Bolton runs the popular site Sushi and Robots and is also one of the authors of the CSS book “The Art & Science of CSS”. “Does workflow really matter that much?” Yes. Jina explains how good workflow gives us more time to be creative. Good Workflow = Good Design Good Workflow = Good Development Good Workflow = Good Business Having a good workflow improves the quality of our results while keeps us from working crazy late hours. Free yourself up by allocating thoughts to your task, and not the process of said tasks.

File Systems

The next area is about file systems, and how programmers organize their web site asset directories. The example we are given in the presentation is... css/img/ img/ js/ swf/ php/ The example above shows us how we can store images used in the style sheets within the CSS directory within a child image directory. This would keep the image directory clean and give other project team members a quick understanding of where to find assets. The image directory on the root is just for inline images in the markup. This makes it easier to find like the images used in the CSS. Further more, the example has other assets in their own directories as well. This workflow process gives the author, and other team members, easy access to the content they need without searching through a root directory of sloppy soup with a fork. The example goes back to Jina’s point about saving time in order for it to be allocated to good design, development and business. This example above may not be for you, or you may have a version of the above with a few tweaks; either way you should create a workflow and stick to it.

Meaningful Markup

This part of the presentation focuses on HTML markup, and having a set layout workflow for tags. Jina shows us a slide from an e-commerce site she has created, she breaks down the areas with a wire frame overlay of the HTML tags. #logo #header #breadcrumbs #sidebar #content ul li We can see how she first created a wireframe for the site and then designed around the logic for the wire frame. Building a site before you create a wire frame of logic would be like getting in your car in the morning with your family and driving to “Wally World” without knowing the park was going to be closed when you got there. Build the wire frame,  then consider the markup that will be used to construct it. Plan your workflow for meaningful markup.

Keep Properties Organized

This part of the presentation focuses on the question of how to keep your CSS organized, Alphabetical or Functional?  There are many good arguments for both schools of thought. I prefer using Functional CSS organization, it makes the most sense to me and has served my code well. An example of Alphabetical CSS organization would be... [css] #content { background:#333; color:#fff; font:normal 12px/16px Helvetica, Verdana, Arial, sans-serif; margin:0px; padding:5px 2px 8px; width:956px; } [/css] An example of Functional CSS organization would be... [css] #content { width:956px; background:#333; font:normal 12px/16px Helvetica, Verdana, Arial, sans-serif;color:#fff; margin:0px;padding:5px 2px 8px; } [/css] There are also arguments for Single-Line vs Multi-Line CSS. You can have all of your code for a selector in one line, but I find having to scroll left-to-right is annoying and unnatural. Other issues talked about are white space in the code, but I compress all of my CSS on the server level so I subscribe to Multiple-line CSS. Single-line example [css] #footer h2 { float: right; width: 155px; height: 50px; } #footer h2 a { display: block; opacity: 0.8; border-top-width: 0; } [/css] Multiple-line example [css] #footer h2 { float: right; width: 155px; height: 50px; } #footer h2 a { display: block; opacity: 0.8; border-top-width: 0; } [/css]

CSS Architecture

Jina went into the importance of organizing CSS files based on their media types and web browser. Example: screen.css print.css ie.css Just a quick look is all you need to understand what each of these files does. screen.css is for media screen, like desktop computers. print.css is for printers, when the user prints out a web page. ie.css is for the CSS programmer’s best friend Internet Explorer, a badly behaved “web browser”. Another way to define your CSS files besides media types and the user’s web browser is purpose. We can have a main CSS file that loads in all the other files by purpose. You can use the import rule or import CSS files with PHP to create one file and thus one server call. Jina’s code example: [css] <link rel="stylesheet" type="text/css" href="/screen.css" />; @import url("reset.css"); @import url("foundation.css"); @import url("typography.css"); @import url("layout.css"); @import url("plugins.css"); [/css] We see here that the CSS is separate by purpose to allow us easy access to edit targeted areas in the web site.  Any team member that has not worked on this web site before can look at the files and find where he/she needs to make edits if needed. Another paramount point Jina touched on is commenting. Say you have a CSS file with a TAG that is dependent on a style in an IE6.css file for Internet Explorer 6, make a comment in your CSS to let others know what and where to change. [html] <!--[if IE 6]> Do stuff only for IE 6 <![endif]--> [/html]

Leave a Comment

I hope you enjoyed my second entry on the Front-end design conference, stay tuned for more in this series. If you haven’t read my first entry on the Front-end design conference, step right up... Brainstorming Tips from the Front-end Design Conference. Please share your thoughts on CSS workflow with me, I’d love to hear from you.