On Thu, Feb 10, 2011 at 11: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; }
>
Now, I'm not sure if this was just a glitch in a quick example you threw
together, or an actual example. If it's the first then ignore what's coming.
Otherwise, you really need to use CSS the way it's intended. If you're going
to create a new rule for every element in the page on your whole site, then
yes, you'll be sure to hit the rule limit on some browsers in no time.
Instead, create classes that generically define a certain look-and-feel.
.button { ... }
.button.ok { .. }
.button.cancel { .. }
.button.rainbow-unicorn { .. }
That way you can share rules and reduce the complexity of your sheets.
Also, I think it's pretty much accepted to use dashes in CSS (rather than
underscores or camel case).
As for dynamic css (through js), just a big minefield with all kinds of
opinions. I've not yet found the holy grail to that yet. LESS sounded
promising, but looking at some examples I wasn't impressed. Let's hope some
of the new CSS3 proposals allow us to clean up the sheets (variables,
scoping, etc).
- peter
--
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
