SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 31 of 31
  1. #26
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,182
    Mentioned
    16 Post(s)
    Tagged
    4 Thread(s)
    So I think the consensus here seems to be that the repetitive data-fapi- prefix adds a lot of extra mark-up for little in return besides for avoiding conflicts imposed by other third part extensions.

    So the approach should changed from this:

    HTML Code:
    <div data-fapi-textfield data-fapi-name="first_name" data-fapi-widget="text" data-fapi-element>
       ...
    </div>
    to something like this:

    HTML Code:
    <div class="element textfield name-first_name widget-email">
    	...
    </div>
    Agreed?

    The only problem I have with this is that any third party CSS that uses selectors .element, .textfield, etc without a more specific context would be applied. This would not be good. Which is why the initial data-api- prefix was applied. I will admit though the multiple class method is a lot less mark-up.

    I guess the solution to preventing similar selector conflicts would be to add the prefix back in like this:

    HTML Code:
    <div class="fapi-element fapi-textfield fapi-name-first_name fapi-widget-email">
    	...
    </div>
    Still less mark-up than data attributes, more than without prefixing but just about eliminates the possibility of CSS selector conflicts brought about by third party extensions when used. This is the method jquery ui seems to use to prevent the same problem. Though the prefix for it is slightly less characters ui-.

    decisions decisions…
    The only code I hate more than my own is everyone else's.

  2. #27
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I'd try to reduce the number of classes too. If in my code a DIV wrapping a LABEL and INPUT was getting four separate classes, I'd assume there was something completely wrong with the entire page and methodology.

  3. #28
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,182
    Mentioned
    16 Post(s)
    Tagged
    4 Thread(s)
    I took most of the advice and eliminated the data attributes for multiple classes without prefixes. There isn't anything that can be done about the wrappers though given my number one goal in all this. I think one or two extra divs per element is a small price to pay to *never write application side CSS for mobile forms again. Not to mention eliminating the repetition of similar form CSS across several independent applications.

    Same form with modifications
    The only code I hate more than my own is everyone else's.

  4. #29
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,182
    Mentioned
    16 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by deathshadow60
    I'd try to reduce the number of classes too. If in my code a DIV wrapping a LABEL and INPUT was getting four separate classes, I'd assume there was something completely wrong with the entire page and methodology.
    I don't really see how it would be possible to reduce anything else at this point and achieve my goals.

    The element class flag is used to select the root wrapper for a element/control(s).

    The widget-[name] class is important because different widgets require different styles think: radio, radiogroup, checkbox, checkboxgroup, select, textfields, linkedlist, autocomplete. etc. The widget hook makes it possible to apply widget specific styles in a generic manor to the proper form element.

    The layout-[name] class is used to layout a complex widget differently. A complex widget is one which has widgets nested inside it. This is the case with a linked list, checkboxgroup and radiogroup. In those cases the controls can either be arranged in a horizontal or vertical manor. Perhaps in time others will be introduced as well though those are the ones I have anticipated for now.

    The textfield class flag is used to easily style all text fields types such as; email, search, text, etc. Without it I would have to define all the different permutations in a CSS selector. I think the advantages of having a single flag/indicator far outweighs the disadvantages.

    The mixin flag could perhaps be removed. That is more or less something that is specific to the way the form element was derived server-side. Whether it has been programatically configured or not (think XML file with the form element configuration).

    I did happen to leave the name of the form element as a data attribute. That is because names can contain special characters and it seems better to isolate them from the class list. The only reason these exist is so that when there comes a time application CSS is required for a specific element it can easily be selected in JS or CSS in a consistent manor across all applications that use the form API.
    The only code I hate more than my own is everyone else's.

  5. #30
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    The element class flag is used to select the root wrapper for a element/control(s).
    Selected by WHAT? What are you using to hook those? Of course, if you want to hook the root wrapper and know the child in js, isn't that parentNode's job? Since you're in a form and shouldn't have a lot of DIV to begin with, couldn't that be the DIV tag's job? (again, NOT that I'm seeing a lot of point to the DIV either)

    Quote Originally Posted by oddz View Post
    The widget-[name] class is important because different widgets require different styles think: radio, radiogroup, checkbox, checkboxgroup, select, textfields, linkedlist, autocomplete. etc. The widget hook makes it possible to apply widget specific styles in a generic manor to the proper form element.
    the only one I really see a point to...

    Quote Originally Posted by oddz View Post
    The layout-[name] class is used to layout a complex widget differently. A complex widget is one which has widgets nested inside it. This is the case with a linked list, checkboxgroup and radiogroup. In those cases the controls can either be arranged in a horizontal or vertical manor. Perhaps in time others will be introduced as well though those are the ones I have anticipated for now.
    Isn't that a fieldset's job?

    Quote Originally Posted by oddz View Post
    The textfield class flag is used to easily style all text fields types such as; email, search, text, etc. Without it I would have to define all the different permutations in a CSS selector. I think the advantages of having a single flag/indicator far outweighs the disadvantages.
    Which is different from your 'widget' type how exactly?!? Redundant at best. Either that or this one serves a purpose and the widget one does not...

    Especially since if all you're thinking is CSS, just say them together ONCE CSS side (email,search,text) instead of each and every time in the HTML. That's one of the entire reasons to use CSS in the first place -- to say things once in the CSS instead of multiple times in the markup.

  6. #31
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,182
    Mentioned
    16 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by deathshadow60
    Selected by WHAT? What are you using to hook those? Of course, if you want to hook the root wrapper and know the child in js, isn't that parentNode's job? Since you're in a form and shouldn't have a lot of DIV to begin with, couldn't that be the DIV tag's job? (again, NOT that I'm seeing a lot of point to the DIV either)
    The div needs to exist because in some cases the mark-up *could look like the below.

    HTML Code:
    <div class="element widget-email">
    	<label for="xxx"></label>
    	<input type="email" name="xxx" id="xxx">
    	<div class="description">Form element description string ot mark-up</div>
    	<div class="error">Error message string or mark-up</div>
    </div>
    Without a wrapper there would be no good way to target individual descriptions or errors messages.

    Quote Originally Posted by deathshadow60
    Isn't that a fieldset's job?
    I think that is a matter of opinion not to mention would break consistency and make things more complex to understand. Either way though some type of class would need to exist to determine the type of layout regardless of the wrapping element. Considering CSS rules are written to change the CSS for widgets based on the type of layout such as; vertical or horizontal.

    Quote Originally Posted by deathshadow60
    Which is different from your 'widget' type how exactly?!? Redundant at best. Either that or this one serves a purpose and the widget one does not...
    Well… right now the CSS rule(s) that apply to textfield types is simple as:

    Code CSS:
    form.fapi div.textfield label {
      ...
    } 
     
    form.fapi div.textfield input { 
      ...
    }

    If a flag didn't exist for element that were derived from a simple text field each widget would need to be hard coded like:

    Code CSS:
    form.fapi div.widget-email label,
    form.fapi div.widget-search label,
    form.fapi div.widget-text label,
    ... {
      ...
    } 
     
    form.fapi div.widget-email input,
    form.fapi div.widget-search input,
    form.fapi div.widget-text input,
    ... { 
       ...
    }

    Everything seems simpler with a single flag to target all widgets that are derived from a standard text input. The texfield flag will only be applied to widgets that are derived from a single, text field type.

    Quote Originally Posted by deathshadow60
    Especially since if all you're thinking is CSS, just say them together ONCE CSS side (email,search,text) instead of each and every time in the HTML. That's one of the entire reasons to use CSS in the first place -- to say things once in the CSS instead of multiple times in the markup.
    The textfield flag allows me to do just that. Say it once in the CSS rather than repeat every single widget type that is derived from a simple text field (input) type.
    The only code I hate more than my own is everyone else's.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •