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?
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?
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
.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:
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."
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.
It's not an easy task. The fragments below were taken from the book I quoted at the beginning.
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
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?
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.
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.
Here I talked about the little of the little that the book addresses. This is a read more than recommended for programmers. Good reading:)
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:
Of the 19 points that this PEP speaks of, these two are well applicable in this context.
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.