Is it a bad practice to put numbers as id in HTML elements? If so, why?

11

I have a loop printing HTML elements, for example:

for($i = 0; $i < 3; $i++){ echo "<div id='$i'>$i</div>"; }

Is it a bad practice to put numbers as id in HTML elements? If so, why?

    
asked by anonymous 08.11.2017 / 12:31

3 answers

8

There's really no technical problem with just using numbers as selectors in CSS as long as you make sure you never repeat ID selectors for different elements. Now, imagine a more complex scenario with lots of HTML elements and countless selectors to "decorate" after all, you can not tell that you will remember all the head selectors when you are developing. So there are some design patterns and good practices that are highly recommended for your development process to flow and end up being faster, after all, time is money.

I found this article quite interesting on how to name IDs and classes in CSS for ease of development. Also, this link for a Google style guide, which is very interesting as well.

As for design patterns, I recommend this book that covers different development patterns design for HTML5 and CSS

.     
08.11.2017 / 12:55
11

As @Renan said, a number is an alphanumeric character. I agree that using only numbers is bad practice, but it does not go against what W3C lays down.

There is really no technical problem , but as you asked about "bad practice", there is a problem.

See that in the section 3.2, the elements of HTML5, on the attribute ID , it is said:

  

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value should not contain any space characters .

What a free translation would be:

  

The id attribute specifies the unique identifier (ID) of the element. The value must be unique among all IDs in the element's subtree and must contain at least one character . The value should not contain any space characters.

This establishes the rules for using the ID:

  • Must not contain any space characters;
  • Must be unique;
  • Must contain at least one character;

And of toast

08.11.2017 / 13:29
4

My response tends to come out of the HTML context, although it is fully applicable. This is because the existing answers already answer that side of the question. I want to address a broader concept.

One of the most important things (and for most is not so important) is that the Clean Code: A Handbook of Agile Software Craftsmanship, "by Robert C. Martin , addresses is the nomenclature you give to variables, classes, and everything else. This is found in Chapter 2, "Meaningful Names."

Be expressive and self-explanatory when naming. But why?

The mentality you have to have when programming is that you are programming for others to read your code later. One day that stretch of gambiarra that even you do not have to be maintained by someone. The funny thing is that this person can be both you in a few months as an entire team.

Theonlyvalidmeasureofcodequality:WTFsperminute

ToprovewhatI'msaying,answerme:whatdoesthiscodedo?

for(intj=0;j<34;j++){s+=(t[j]*4)/5;}

FromCodeReviewRoom:

  

"WTF ?! WTF ?! WTF?!"

You probably do not know it or the reviewers! It's not just because you do not know what project it is, or even the programming language. It's because the variables are badly written. See the same code with a little more expressiveness and self-explanation:

const int realDaysPerIdealDay = 4;
const int WORK_DAYS_PER_WEEK = 5;
int sum = 0;
for (int j = 0; j < NUMBER_OF_TASKS; j++) {
    int realTaskDays = taskEstimate[j] * realDaysPerIdealDay;
    int realTaskWeeks = (realdays / WORK_DAYS_PER_WEEK);
    sum += realTaskWeeks;
}

Not only are the variables better named but like those numbers that were fixed and doing calculations were moved to constants. This is to let the code explain itself and do not need thousands of comments explaining what it does.

Writing meaningful names

It's not an easy task. The fragments below were taken from the book I quoted at the beginning.

Names should reveal their intentions

Just as you will name a function, class, or variable, you can convey to anyone who reads what it does, how it does, why it does, and how it is used.

int tmm; // não use
int tempoMedioMinutos; // use
int tempoMedioEmMinutos; // use

Avoid misinformation

For languages that are poorly typed, such as JavaScript, this can cause a problem. Why would you name a variable of listaContas if it is not even a list?

Make distinctions with meaning

Sometimes we use words that add nothing to naming a class.

What do you tell me about classes Produto , ProdutoInfo and ProdutoData ? Are they different? On what? In that case, go back there to "Names should reveal their intentions" and rewrite with meaning.

Use searchable names

Remember back that I talked about the constant after I asked you what that code meant? It's the same case.

if (visitor.CountryCode == '1237') { 
    visitor.redirectTo('/al');
}

against:

const BLOCKED_COUNTRY_CODE = '1237';
if (visitor.CountryCode = BLOCKED_COUNTRY_CODE) {
    visitor.redirectTo('/al');
}

We were able to give meaning to a value that was coupled in a fixed, constant way. So it's easy to read and find too.

More ...

Here I talked about the little of the little that the book addresses. This is a read more than recommended for programmers. Good reading:)

Beyond Clean Code

It's not just the book that tackles this. Python's Python PEP , commonly called "The Zen of Python", which can be applied not only to Python, says that:

  • Legibility of account code
  • Explicit is better than implicit
  • Of the 19 points that this PEP speaks of, these two are well applicable in this context.

    • Prefer readability, write to others or the future-you will understand
    • Be explicit when naming members and using the characteristics of a language.

    From the assumptions raised here, you can infer whether to name:

    <div id='1'>1</div>
    <div id='2'>2</div>
    <div id='3'>3</div>
    

    It's a bad practice or not. You can even conclude whether $i = 0 is good or not.

    Now whenever you program, ask yourself: How many WTFs per minute would you get in code review?

    You have a Filipe Deschamps video about importance of names and Clean Code . It actually has a series of videos on Clean Code. He said:

      

    If we think that by taking the syntax of a code, basically what remains is a lot of name behind another name, calling another name, and so on.

        
    12.11.2017 / 11:32