You should check out OOCSS[1]. It solves many if not all of the issues you brought up, and is already a fairly robust implementation of the spec. You can just take what's in the repo and adapt to your needs. Generally speaking, dynamically inserting styles makes complex web apps difficult to maintain, as you end up getting rid of the separation of concerns between functionality (JS), Layout/Display (CSS) and Structure (HTML). When you blend these together, it makes it difficult to refactor parts of the application when requirements change.
Links: [1] https://github.com/stubbornella/oocss/wiki -Anatoly On Thu, Feb 10, 2011 at 3:55 PM, foldi <foldifoldi.vi...@gmail.com> wrote: > I've joined a web development project with an enormous CSS file. One > of my tasks is to develop another approach for styling the site that > can dramatically reduce the total number of rules. > > I'm also creating a JS library for UI controls. If I need to render a > submit button, I simply write: > > BigLib.UI.Button.submit_button.create() > > The scripts in BigLib take care of rendering the button, attaching > events, etc. They also assign unique id and add a class name called > "ui_submit_button" to a DOM element. In my new CSS file, I define the > rules for .ui_submit_button and assign a background-image that will be > positioned for each instance of the ui_submit_button class. > > My question.... Instead of listing each instance of the > ui_submit_button class in the CSS file like this: > > #button_log_in { background-position: 0px 0px; } > #button_cancel { background-position: 0px -50px; } > #button_forgot_password { background-position: 0px -100px; } > > ... I've inserted these rules in the last stylesheet in the document > via insertRule/addRule DOM methods. After testing in as many browsers > as I can, I have yet to see a problem with inserting the styles > dynamically. > > Has anyone else tried this approach? > > I like the idea of not having to update the CSS file every time I > create a UI control instance. And all the UI controls are JavaScript- > driven anyway. But I've never seen this approach before and wonder if > there's pitfalls I'm not considering. > > Thanks! > > -- > To view archived discussions from the original JSMentors Mailman list: > http://www.mail-archive.com/jsmentors@jsmentors.com/ > > To search via a non-Google archive, visit here: > http://www.mail-archive.com/jsmentors@googlegroups.com/ > > To unsubscribe from this group, send email to > jsmentors+unsubscr...@googlegroups.com > -- To view archived discussions from the original JSMentors Mailman list: http://www.mail-archive.com/jsmentors@jsmentors.com/ To search via a non-Google archive, visit here: http://www.mail-archive.com/jsmentors@googlegroups.com/ To unsubscribe from this group, send email to jsmentors+unsubscr...@googlegroups.com
