Best practices: ids

[jrhorn424]

IDs have a number of restrictions that other attributes don't have. In the first project, there is a temptation to use IDs to easily grab inputs instead of spending the cognitive load to write a good selector. This habit, if unchecked, leads to developer code like this:

<p class="centerHeader">Submit a project</p>
<label for="title">TITLE:</label>
<input type="text" name="title" class="projectForm" id ="project-title">
<label for="category">CATEGORY:</label>
<input type="text" name="category" class="projectForm" id ="project-category">
<label for="imageURL_sm">SMALL IMAGE URL:</label>
<input type="text" name="imageURL_sm" class="projectForm" id ="project-imageURL_sm">
<label for="imageURL_lg">LARGE IMAGE URL:</label>
<input type="text" name="imageURL_lg" class="projectForm" id ="project-imageURL_lg">
<label for="siteURL">SITE URL:</label>
<input type="text" name="siteURL" class="projectForm" id ="project-siteURL">
<label for="codeURL">CODE URL:</label>
<input type="text" name="codeURL" class="projectForm" id ="project-codeURL">
<label for="body">DESCRIPTION:</label>
<textarea rows="4" cols="50" name="description" class="projectForm" id="project-description"></textarea>
<button id="project-submit">Submit</button>
<p class="whitespace"></p>

CSS best practices suggest never selecting for styles on IDs. IDs should only be used sparingly in javascript. Our sass linter warns on this, so the earlier we explain that there are better selector strategies, the better.

[jrhorn424]

Related #11 and #2

[gaand]

html5 allows for embedding inputs in labels. This eliminates the need for ids to relate the labels to their inputs, e.g.

<label>
  Label Text
  <input type="text" name="bob">
</label>

[raq929]

I thought the 'for' in a label was what related it to it's input?

[gaand]

for="<id of input>" creates the relation, so the input then needs an id.

Ids on inputs aren't that useful. Names, which are form scope, are preferred for almost all use cases.

Wrapping the input in the label removes the need to connect via and id which must be unique for the document.

@raq929 If you'd like to discuss further, I'm happy to here or in person.

[jrhorn424]

Ids on inputs aren't that useful. Names, which are form scope, are preferred for almost all use cases.

:heart: