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/[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]
