Suggestion for OOCSS forms

[Matthew Browne]

Hi,
I have been using the forms styles from the new OOCSS and mostly they've been working great, but I have a small suggestion...if it would be better to make a pull request for this, please let me know; I wasn't sure of the best place to leave feedback so I thought I'd start here.

The issue I had was with checkboxes and radio buttons...as long as my HTML was like the examples, it was fine, but sometimes I like to wrap my <label> tag around the checkbox or radio button, e.g.:

<label>
  <input type="checkbox"> Check me
</label>

I modified the following section in _checkboxRadio.scss:

.form {
  .radio,
  .checkbox {
    position: relative;

    label {
      display: block;
      width: auto;
      padding-left: 1.4em;
      *zoom: 1;
      *padding-left: 0;
      vertical-align: middle;
    }
    ...

to this instead:

.form {
  .radio,
  .checkbox {
    position: relative;

    label {
      display: block;
      width: auto;
      padding-left: 0;
      *zoom: 1;
      vertical-align: middle;
    }
    .hangingIndent {
      padding-left: 1.4em;
    }
    ...

That way I don't need to change anything for this style:

<label>
  <input type="checkbox"> Check me
</label>

And if I want to use the style shown in the docs, I just need to add the hanging-indent class:

<input type="checkbox" id="checkbox1">
<label for="checkbox1" class="hangingIndent"> Check me</label>

If anyone has any other ideas I think it would be good to discuss them, but in any case I think both styles of HTML should be supported.

Thanks,
Matt

[Lewis Dexter Litanzios]

Hey,

Is there a reason you're not using the & character to reference the parent selector?:

.form {

  .radio,

  .checkbox {

    position: relative;

    label {

      display: block;

      width: auto;

      padding-left: 0;

      *zoom: 1;

      vertical-align: middle;

      &.hangingIndent {

        padding-left: 1.4em;

      }

    }

  }

}

Regards,

[Matthew Browne]

I guess I was thinking that .hangingIndent could also be used for other elements besides labels, but I suppose a label is the only thing you'd want next to a checkbox or radio button so your suggestion seems good.

--
You received this message because you are subscribed to the Google Groups "Object Oriented CSS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to object-oriented...@googlegroups.com.
To post to this group, send email to object-or...@googlegroups.com.
Visit this group at http://groups.google.com/group/object-oriented-css.
For more options, visit https://groups.google.com/d/optout.

[Matthew Browne]

On second thought, I think the way I had it originally is better. It accounts for HTML like the following, where .hangingIndent might be applied to something other than the label. I realize the .helpBlock could be inside the <label> tag instead of the way I have it here, but why limit the HTML unnecessarily?


<input type="checkbox" name="checkbox1">
<div class="hangingIndent">
    <label for="checkbox1">Check me</label>
    <span class="helpBlock">Some instructions...</span>
</div>

[Lewis Dexter Litanzios / ldexterldesign]

Hey Matthew,

Sure

This raises the question of whether to nest at all - why not write single selector classes for everything (sarcasm not intended)

Personally, I tend to write classless mark-up and style the module/component using nesting raw elements. If this can't be done and/or I see an opportunity to abstract and reuse a pattern I'll then think about classing.

Also there's the argument that anything nested >3 levels deep should be abstracted out and classed up ( http://thesassway.com/beginner/the-inception-rule )

This topic is something I've been thinking about a lot recently, along with whether I can write good CSS at all - interested to hear opinions on process from y'all

Regards,

--

ldexterldesign

Lewis Dexter Litanzios

Web Designer & Developer

ma...@ldexterldesign.co.uk

+44 7504 907 304

[Matthew Browne]

I think that SASS does make it easier to overuse nesting in some cases because the natural tendency is to want to put related styles within the same set of curly braces, but OOCSS tends to emphasize using more classes. Another concern is performance - a single class is the fastest thing to process; the more nesting you have (including ID selectors followed by class selectors) the slower it gets. Of course you said you tend to use raw elements which is probably pretty fast, but it does make it less flexible if you want to change your HTML to use different elements (either on the original page or on a new page with a similar object).

BTW Have you watched any of Nicole Sullivan's videos? Here's one from 2009 but still one of the best I think:
http://www.webdirections.org/blog/object-oriented-css-the-video/

Unfortunately the video currently isn't loading for me...you could also check out this video from 2011:
http://vimeo.com/72759139

Perhaps you're already familiar with these and that's what brought you to this group...

In any case, there's more to be said here, and hopefully others will also participate in this discussion, but I think Nicole articulates the problems with nesting better than I can here.

[Lewis Dexter Litanzios / ldexterldesign]

Hey Matthew,

https://twitter.com/ldexterldesign/status/458948482263683072 - thanks for the video tip, I hadn't seen that one before. I am familiar with some of @snookca, @brad_frost and @csswizardry's methodologies though, which similarly advocate an understanding and appreciation for specificity (we've all been there).

I guess the take home from Nicole's talk, which she emphasised near the start, is there's never one approach/process with CSS. If there was we'd have computers do it for us.

One thing I found beneficial fairly recently is annotating a complete website design with semantic patterns (Nicole talks about this in her video; citing the media block) - this informs my architectural intentions. I don't [get the opportunity to] do it enough.

I've been using http://foundation.zurb.com/ recently, which is great. I'm now thinking of pairing it up with a smaller, perhaps OOCSS, framework to gain some insight on atomic patterns and OOCSS class naming conventions.

Be interested to know which technologies/frameworks everyone else is using in combination?

Regard,

[Matthew Browne]

I just made a pull request for this suggestion:
https://github.com/stubbornella/oocss/pull/184