On Feb 10, 10:55 pm, foldi <[email protected]> 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!
Hi Just a few thoughts. 1. Your problem as first stated seemed to be to "dramatically reduce the total number of rules". Do you mean move them somewhere else, or make them more efficient? So far it seems you are looking at "where" there rules go, rather than efficiency (and perhaps this is because they are already efficient). I.e. you are looking at:- - do you have them in a style sheet up front, or - put them there later using DOM methods (as you are doing), or - perhaps make them inline as a "style=" when you create the HTML for each button instance (how I have done it in the past). , and the attendant issues over which is the more maintainable. In terms of reducing the number of rules, you might (probably obvious to you) want to examine your rule structure to extract reused/repeated css into separate styles, so that you end up with css class cascading hierarchy "class='common button_general button_type'". 2. You will probably end up swapping your css style sheet for a similar one embedded in your javascript. When I created a UI a few years ago, I went down the road of inline css. had a ".js" file which contained my style structure stored in variables. I.e. (in simplistic terms):- "var CSS_COMMON = 'font-size:8em;' var CSS_BUTTON = 'background-color:blue;' etc And then generated the html with "style='" + CSS_COMMON + " " + CSS_BUTTON Not elegant I know, but it worked reliably with some level of maintainability. 3. Perhaps look at how some of the other libraries out there tackle this issue. Regards Julian -- To view archived discussions from the original JSMentors Mailman list: http://www.mail-archive.com/[email protected]/ To search via a non-Google archive, visit here: http://www.mail-archive.com/[email protected]/ To unsubscribe from this group, send email to [email protected]
