I was trying some new layout on a couple of my web pages the other day.
Whenever I do that I always end up with a bunch of different CSS files all over the place, and it becomes increasingly different over time to keep them clean.
Being a programmer, I'd like to follow the DRY directive: don't repeat yourself. In order to do so, my CSS files would ideally be organised in a hierarchy: some CSS directives apply to all my pages, so they should end up in global.css, while others apply only to the astronomy section of my pages and should therefore be in astro.css.
Also, I like to seperate CSS files according to function (layout.css vs. typo.css).
In the end, I always have enough of those files to lose overview.
What I would need is a tool that displays all of my CSS directives along with where they come from. That way, I could move them easily from one file to another, or up/down the hierarchy if needed.
The tool must have an automatic consolidation feature that would move directives up the tree as far as possible.
I would not want to be able to graphically browse through my (X)HTML and apply CSS rules using the mouse. I would really want this tool to be able to work on existing or create a hierarchy of CSS files.
Does that make sense?
Traversée du désert
5 years ago
Posts
Totally makes sense to me. And when you never write it, would you not let me know? I'd never pay for something like that. (as I search for the random padding in my 900 line css editing file.)
ReplyDeleteSince becoming addicted to the FF web developer plugin, I've developed a system for doing this, sortof. I generally do all the editing in one file, and try to keep each element's rules in one spot in that file until I am done and validated. Then I separate out into
- typography, colors, borders and spacing that is purely for visual effect- for changing the style quick,
-one for basic structure,
-and then the site hierarchical stuff.
I also find listing rules alphabetically within the divisions makes finding them easier.
Since this plugin loads all css for the page in different tabs, including inline styles, it does get pretty close to the software you will never write. Just keep your ftp open, ctrl-A, C, and V, a lot, open a browser new tab with each version to keep the old version until you know you don't need it, or until you copy it to a new file. But really, don't write that software because this isn't a hackneyed way of doing it, at all. ;)
I guess it would be possible to split out the typography and colours automatically, using keyword matching.
ReplyDeleteThe way the tool should be:
- a window pops up next to an element when you click it
- all style information is in that window, in a reasonable order
- the window is free-form editable
- once all is done, the tool splits out into three files
- splitting would make use of keyword matching and drag&drop
Will anybody pls write that?
Have you ever tried the FireBug plug-in for FireFox? It splits the browser at the bottom (with FirBug in the bottom part of the window) and lets you inspect your DOM. The FireBug window is split vertically into two windows. The left window has the DOM of your page and the right window shows the CSS associated with each element in the DOM as you click on the DOM element in the left pane. This is probably an inside out version of what you want, but can be very helpful in finding out what CSS is affecting a problem DOM element.
ReplyDeleteUtility like that would be extremely useful! During development I often create page-specific CSS files in addition to the global.css (that contains CSS rules that are "obviously" global). In the end, however, it would make most sense to have everything consolidated in one file as down the line I often end up repeating rules. So please never write it!! :)
ReplyDeleteBy the way, be sure not to check out the awesome CSS utility I came across couple of months ago, and of which a new a new version was just released: Stylizer 4.0 at www.skybound.ca. It has completely changed the way I create CSS layouts!
Ha, I was simply searching this on Google to see if someone had created one yet... Looks like for a couple of years people have been looking for it.
ReplyDeleteI recently finished a rather large web application where after nearly 40 iterations my CSS has become FAR too bloated... a tool that consolidates some of my redundant code would be great. Oh well, perhaps its only wishful thinking.
I think of all the software I will never write this is indeed the most painful not to have...
ReplyDelete*sigh*