css file structuring
There are countless ways to structure your css file, and there is not one that's completely satisfactory. I promise to write some more in-depth articles about the issues of ordering your css, today I'll just be focusing on a very specific issue that ties in with my css profile styling management quest.
the problem
Those who have been following my blog probably know what I'm talking about, I'll explain it one last time for the people who have just tuned in. I have one blog, three profiles (work - personal - both). Each profile has its own base color, what I tried to do was to make the management of these profiles as easy as possible, should I ever decide to change the color of one or all.
how I usually do it
/* more links --------------------- */ a.more {color:#fff;} /* work blog */ #blog.work a.more {color:#cc0;} My css files are always structured by component. In the example above you can see how I have a little section for the "more" links. After all basic declarations for a single component I put the css for specifications of this component. In the case above, I have a specification for the more link on my work profile. Working like this allows me to quickly find all styles that belong to a single component.
why I changed it
/* more links --------------------- */ a.more {color:#fff;} ... /* work section --------------------*/ #blog.work a.more {color:#cc0;} The technique I normally use assumes that the component is my main styling priority. What I wanted for this project was to quickly change the styling of whole sections on my site. To do that, I had to make some changes.
Instead of putting the specifications right below the components, I put them in a separate section as to quickly find them. The idea was to put all relevant styling in one section so I didn't need to search through my whole css file to look for all the elements that belonged to my profile styling. In the end, I made a separate section for each profile.
You could say that a swift find/replace could've gotten me a long way, which is probably true. Still, I'd still have some trouble tracking down the images I used to complete all styling. It's nice to simply have a good overview of all the styling elements that are needed to style a separate section (in my case, the profiles).
the thing to remember
I guess the most important thing to remember here is that you'd best order your css file according to your needs to quickly change elements. Be it simple components or whole sections of your site. It's not always easy finding the right balance, but it's a big step if you at least slow down to think about it.