my oocss file

[Martin Petrov]

I'm sharing my oocss file. Just want to know your opinion

https://gist.github.com/1230501

[Sam Hunter]

Well I love the semantic class names, and If I could suggest hiding elements with

position:absolute;left:-9999em;top:-9999em;

rather than display:none; reason being the browser doesn't render the element when it's CSS display property is set to none, and will take more time to render this element when shown, and "un-rendered" each time display is set to none.

On Tue, Sep 20, 2011 at 6:06 PM, Martin Petrov <m.p.p...@gmail.com> wrote:

I'm sharing my oocss file. Just want to know your opinion

https://gist.github.com/1230501

--
You received this message because you are subscribed to the Google Groups "Object Oriented CSS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/object-oriented-css/-/DRIpdIyAPnAJ.
To post to this group, send email to object-or...@googlegroups.com.
To unsubscribe from this group, send email to object-oriented...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/object-oriented-css?hl=en.

[Martin Petrov]

About rendering display:none / position:absolute - this is something
new to me, thanks.

[Ad Taylor]

This has little relevance to your original post but isn't current best practice leaning toward the clip method? I could be very wrong though! http://yaccessibilityblog.com/library/css-clip-hidden-content.html [it's an interesting read anyway]

[Sam Hunter]

Ad Taylor,

Similarly shares irrelevance to the original post.. very good read, we're all learning something new today! It appears the the clip method works best in conjunction with the negative left/top absolute positioning methon though this wasn't mentioned in the article. I could be wrong here as well, the article mentions clip behaves slightly different in old browsers as well as standard compliant browsers. Are there any quirks in hiding elements this way?

Martin, It is also best practice to use classes rather than ID selectors as they are reusable and can extend your current OOCSS library. I strongly agree that IDs should not be used within CSS selectors and should only be used if needed, for eg. associating these elements with labels or select them within javascript.

[Murray Nuttall]

If it's important to be compatible with ie6, then this won't work:

.button.admin

Besides, you don't really need to be that specific as you're only
using .admin to extend button. If you're worried that .admin may be
used for something else then it could be safer to, "namespace" your
class:

.button{padding:5px 10px;white-space:nowrap}
/*extend button */
.button-admin{background-color:#A52A2A;color:white}

Then your html can be like this:

<a class="button button-admin" href="">Admin</a>

or

<button class="button button-admin" type="submit">Admin</button>

Murray.

On Wed, Sep 21, 2011 at 10:06 AM, Martin Petrov <m.p.p...@gmail.com> wrote:
> I'm sharing my oocss file. Just want to know your opinion
> https://gist.github.com/1230501
>

[Martin Petrov]

@Sam Hunter
I try not to use ID selectors. Sometimes I write IDs for JS and later
they end in my css file. These are very isolated (not reusable) cases.
It's still a bad practice.

@Murray Nuttall
I don't support IE6 so multiple class selectors are ok.
About namespacing - thanks for the suggestion, I will use it. I did
".button.admin' because there is another '.admin' used for applying
color to links. Such duplication of class names is not good..

Martin

[Kevin A. Cameron]

I used to do the namespace class names too, but when I get the chance I'll definitely be trying out the .classname.secondclassname syntax, is there a reason to not use this other than to support legacy browsers?

Kevin

[Sam Hunter]

I personally like the namespacing better than the multiple class selectors because not only is it supported by one of the best browsers around now, Internet Explorer 6, it just seems like the safest bet where nothing will conflict. A fun but totally legitimate example would be, .button.pal { border-radius: 5px } I have namespaced this button with a multi class selector and named it ".button.pal," because it is the friendliest button I know. If you didn't notice, "pal" is used in the OOCSS framework to to pad all sides on an element, which will then apply to this button. There is many cases where this can happen, it's why developers hate the global namespace! So I will be sticking with OOCSS's method of namespacing :)