For example, tag canvas :
I saw some tutorials on YouTube, and almost all of them used like this:
<canvas height="" width=""></canvas>.
So should I use in HTML, inline , as above, or as in the example below, in CSS?
canvas {
height: ;
width: ;
}
Is there a difference in practice?
If something exists and is not declared as a total legacy and there are problems, you can always use anything in the right context if you know what you are doing.
What is being talked about is a variation of what is called good practice. As I always answer, this was created to facilitate the passage of knowledge from those who already understand well about something for those who do not yet know. The problem is that it began to happen that people who do not know well about the subject create good practices or spread the existing ones without taking care of the details, you know, like a cordless phone ?
Then people take the summary and disseminate the information "in half." And people who consume good practices are content with them without wanting to dig deeper and understand what it is about. Good practice is good as a check list . It should not eliminate the deepening that everyone should have about the subject.
One of the best used practices is to say "always do this", "never do this". The point is that without a context, good practice loses its meaning. Always or never is too much time, covers too many situations. There is always a case to use in a way that is not the traditional one, the most recommended for most of the cases.
There's nothing wrong with making inline styles. Of course this form can hinder certain features you may wish for.
When you inline complicates to change the style, if you use it multiple times you lose the DRY and it is not only a question of coding, it can weigh in the page load, it can hamper the general organization, if it is a team can create maintenance problems between the members, it ends up giving a multiple responsibility to the page, just to quote some things.
But there are cases where you are doing something simpler or have a specific functionality that inline , so you can use yes. The point is to know what you are doing, to understand the consequences of each choice, to understand your problem, and to define what best serves your purpose.
In the case of canvas is in the documentation the use of these attributes and no recommendation not to use it. You can use it if it makes sense in that context.
This use of leaving the canvas tag with empty width and height is probably to clear the default values that every tag has.
In the case of CSS, this technique is also used and has the common name of 'Reset CSS', the most famous being Normalize.css
In this case, your example would look like this:
canvas {
height: auto;
width: auto;
}
As you put it in the example would give error because it even escapes from the CSS syntax.
Inline styles do not allow code reuse , which is very important. Reapping code (well written) will make your development faster and more standardized.
Assuming you need the same style to use in another element on the same or another page, you would need to rewrite it, and if you needed to change it, you would need to change it on every occurrence where you used that style. This problem could have been avoided if you had a style sheet in common for all of these elements.There is a principle of software development called DRY ( Do not Repeat Yourself ) that talks about code reuse. You have good questions about this principle here in SO.
Of course visually, your page will look the same, but development time may go up, you'll spend more time doing less. Productivity is very important when it comes to software.