Organizing Your Stylesheet Using CSS Edit
One of the most daunting things about building and maintaining a design can be wading through huge, disorganized style sheets. Nothing is worse than opening up a style sheet someone else has worked on and thinking, "What the heck happened here?" On occasion I've opened up some of my old style sheets and shed a single tear. Styles were strewn throughout the page like I blindly copied and pasted code as if it was still 1999. Needless to say, I've learned the hard way why keeping styles organized is beneficial.
Through the years, I've waffled between various methods of organizing, but never found one that I could really subscribe to. Then I came across CSS Edit; a powerful CSS editor built exclusively for the mac. I immediately fell in love with its clean, simple, and functional interface. One of the best and most powerful features, in my opinion, is its ability to group styles into a folder structure.
2,300 lines of code in six folders. Rock on with your bad self!
One of the things you might notice is that we use an equal sign "=" in our naming convention. This is to signify a folder is a parent and has at least one sub-folder. This makes visually browsing for a specific selector or section extremely easy and quick. Along the same lines, we use a single dash "-" to signify a sub-folder. It's also very important to indent, creating a visually hierarchy in your code.
The code to create a folder is simple and degrades gracefully in other editors.
/* @group footer */ ... /* @end */
Here's an example of how to create a nested folder.
/* @group =pages */ ... /* @group -archive */ ... /* @end */ /* @end */
It's important to develop consistency across your projects, especially if you work on a team where the style sheet changes hands multiple times. When we start a new project here at Viget, we use a basic template laying out the most commonly used selectors and properties. While our layout evolves from that point, the base is always the same, giving our team a great point of reference.
Our base layout looks like this:
- reset: Styles used to globally reset margins, padding, borders, etc.
- utility: These are commonly used classes for things like removing margin, padding, floating, clearing, aligning text, etc.
- =base
- -headers: Global header styles
- -links: Global link styles
- -navigation: Navigation styling
- -footer: Footer styling
- -form elements: Basic form styling including text fields, buttons, etc. that appear globally
- =pages: This folder holds sub-folders that have page specific styles
We found this model and nomenclature to work extremely well and be easy to understand. We're designers; let's spend more time doing what we love and less time wading through huge style sheets.
You know, I loved CSS Edit the first few times I used it, but I’m not good at visually scanning folders in a hurry when I need one snippet of code. I never thought to add =/- to help that. I tend to CTRL+F all the time anyway, so I found Textmate lighter to use. Although… I do use CSS Edit in early stages for the preview mode, then Textmate for future edits. Thanks for the tips, Rob!
Oh, and did you mean “creating a visual hierarchy”? :)
@Roberto: Thanks man, super helpful. Maybe I’ll actually have half a chance at an organized stylesheet.
Thanks for your thoughts, Nat. You should definitely give CSS Edit another go. The search is actually my second favorite feature. As you type in your selector the left hand column dynamically searches and sorts to include ONLY what you’ve typed. It’s an amazing feature.
I also really love how it auto-completes properties for you. I’m now so used to typing in “pa” and hitting tab to get “padding: ;”. It saves me a lot of time.
Great tip, Rob. I have not tinkered with CSS Edit at all, so I’m looking forward to checking it out. I’m intense about organization while building the initial stylesheet. But when I go back to add/edit down the road, I tend to throw things in quickly, occasionally ignoring my own structure. Perhaps this will help me lock in for good.
Oh, the drama: “shed a single tear” Srsly?
Know the feeling very well: “What the heck happened here?” Usually, it’s my own code from ... well, three months ago.
Learning, ever learning.
I may be behaing naivly, but as @natalie mentioned I’m so used to Command + F > editing style > saving, that I’ve completely given up on ordering my stylesheets in any logical way. The overhead it introduces isn’t (imho) outweighed by the time it would take to locate the style I’m needing to add / correct or edit.
A combination of Firebug (OMG!) and the Find command have really solved these problems for me, in my work flow. Any thoughts on this?
Note also that about 99% of the time I’m the only one dealing with my styles, so I’m not necessarily having to deal with passing this off to a colleague and dealing with their workflow.
I really like the *idea* of CSS Edit but always find myself in a more general purpose text editor like TextMate.
Natalie, you should check out the symbol scanner (Apple + shift + T ) in TextMate. It searches selectors as you type (works with HTML for tags and programming languages for function names, etc). A quick, lightweight alternative to the Find dialogue.
Great article Rob! However, I’m in the same boat as Shaun… I’ve tried using CSS Edit, but always end up coming back to an all-purpose editor (Coda in my case) for all of my development (which is the point of Coda afterall).
The thing that I do love about CSS Edit is the fact that you can modify a local stylesheet and preview the changes on the live version of the site. I could really use this functionality at work, where our site is a .NET solution, so you can’t just FTP changes to a production server. However, I’m shamefully forced to work on a PC there, so it’s out of the question for the time being. :(
CCSEdit is amazing and groups is probably one of its most useful features. I couldn’t really do without that program!
@Joshua - Thanks for your thoughts. I don’t think that’s necessarily a naive thought. Everyone has different methods and tools that help them work efficiently. Here at Viget our style sheets often change hands between designers, front-end guys, and developers that it’s important for us to keep things clean and consistent. However, I also believe that even if it’s just you working on a style sheet, making it clean and easy is just as important. I’ve seen a lot of work, my own included, where styles get duplicated and, in moments of frustration, you repeat selectors or properties that have already been declared. My favorite is when people start throwing around ”!important” in an effort to override a previously declared style. Not to say that’s wrong, there’s usually just a better, cleaner way.
I look at it like your physical workspace (forgive my lame narrative.) Lets say you want to print an invoice for a client. You print it out and put it in an envelope. You then step out because, lets just say, you forgot stamps. You get back to your desk and get distracted by something else and start printing out more invoices. Before you know it your desk is covered in paper, there are pirates running rampant around the office and you’ve printed the same invoice three times.
@Shaun & @Aaron - Thanks for your thoughts. TextMate and Coda are both great apps as well.
What about us prehistoric and faithful PC users?? What will we do??
Does anyone want to buy an Alienware PC? :(
“What about us prehistoric and faithful PC users?”
Notepad++ FTW!
@Rob, thanks for the searching tip. I’ll look into that. As I said, the preview mode is great and worth using if just for that.
@Shaun, thanks too for the Textmate tip. I’m sure that will be handy! Actually, it’s funny, I tried it just now and typed “lover” by mistake instead of “hover” (don’t read too much into that!) and it still worked (found anything with “over” in it). Very cool!
Thanks for the tip. I’m in the middle of debating editor software (as I begin my CSS adventure), but hadn’t given too much thought to CSS Edit. I may rethink that.
I’ve seen CSS Edit before but I’ve never used it. I use a similar commenting structure for organization but I might just have to give CSS Edit a try!
Thanks!before I use Dreamweaver:-)
I was curious if someone over there at Viget could possibly share some info on what platform this blog is run off of?
I really enjoy the layout alot and was just curious.
Thanks,
Anthony
@Anthony - Thanks for the compliments! All of the Viget blogs are powered by ExpressionEngine. Doug wrote a great recap of how they work here. Check it out.
I started using CSS Edit just 2 weeks ago and have since retired both Coda and Stylemaster Pro. Great site, by the way.
Gino
Bloody Mac-heads leaving us PC users in the dust with their fancy Mac-only applications.
@Myles:
Amen to that. PC users, FTW!
What do you use? (Not that we’re hijacking Rob’s thread or anything.)
Currently I’m settled on using e - text editor: http://www.e-texteditor.com/
It’s pretty much a TextMate clone.
CSSedit is a pretty good tool but I don’t think anyone could convince me to ditch Textmate. For CSS in Textmate there is a little drop down box in the lower right part of the screen that allows you to see everything (classes, divs, standard elements like body, img, etc.) in the glory of alphabetization (if that is even a word). I also swear by indenting and commenting.
Thanks,is there any editor that works in Eclipse?
I am not a huge fan of the heirarchy - because often times it’s like taking three or four threads and trying to sew them into one single thread. I just don’t understand why someone wouldn’t just organize one single one in a very organized manner. I guess I am also the type of person who likes to read one book - one story.. Not the Harry Potter 8 book chronicles.
In any which way, I have learned to love the listed CSS sections, creating “chapters” and an index in the actual CSS… That way if someone else looks at it, they know exactly what something is, and exactly where to find it.
See example:
http://hellyeahdude.com/wp-content/themes/fresh/style.css
excellent app, never thought of using css this way. It will make a lot of sence thought in big projects that the css file get big enough to manage easily.
Thanks for sharing this, I enjoy seeing your process. After forcing myself to use CSSEdit for a bit, I wouldn’t go back. It’s snappy and can be popped open w/ Transmit no prob.
Good stuff.
Next entry: Bi-Directional Actionscript/Javascript Communication in AS3
Previous entry: Pulling Your Flickr Feed with jQuery
Recent Comments
@brad
It makes little difference when using native EE functionality or Structure to add pages, it’s just that if you want to add a sub page, you need to remember to assign a...
- Hambo on 'A Whole New Wooooorld: Structure + ExpressionEngine'.
- brad on 'A Whole New Wooooorld: Structure + ExpressionEngine'.
- Doug Avery on 'A Whole New Wooooorld: Structure + ExpressionEngine'.
Subscribe to Comments RSS