Never use inline styles is never really?

Asked

Viewed 590 times

7

For example the tag canvas:

I saw some tutorials on Youtube, and almost all of them used it like this:

<canvas height="" width=""></canvas>.

Then I should use it in HTML, inline, as above, or as in the example below, in CSS?

canvas {
    height: ;
    width: ;
}

Is there any difference in practice?

  • 1

    It is important to note that when inspecting the HTML on a page, you are seeing the final, chewed-out version of what was originally written in a way that "makes it simple for the browser to understand". It may be that in the original HTML these styles were never written, and actually injected by a framework such as jQuery, for example. With the various tools available today you can keep your sources well dried and documented (by adhering to "good practice") still generating code capable of maintaining compatibility through different systems/browsers.

  • 1

    Possible duplicate of Why Google Recommends Inline CSS?

  • 1

    It would be good to define better if the subject is using CSS inline, or if it is the fact of omitting values; in my view, the accepted answer speaks of a subject that has nothing to do with the question title, which is "Never use inline styles is ever even?" - a little more specificity when opening new questions..

  • I thought about changing the title but then they had already answered, then I ended up leaving.

3 answers

14

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 said is a variation of what is called "good practices". As I always reply, this was created to facilitate the passage of knowledge from those who already understand well about something to those who do not yet know. The problem is that it started happening to people who don’t know well about it create good practices or disseminate existing ones without paying attention to the details, you know, like a cordless phone? Therefore creating fake news.

So people take the summary and disseminate the "half" information. And people who consume good practices are content with them without wanting to delve into and understand what it is about. Good practice is good as a check list. It should not eliminate the deepening that everyone should have on the subject.

One of the most commonly used good 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 long, covers too many situations. There is always a case to use in a way that is not traditional, the most recommended for most cases.

There’s nothing wrong with making styles inline. Of course, this shape can make it difficult for certain characteristics you may want.

When does inline complicates to change the style, if you use it several times loses the DRY and it’s not just a question of coding, it can weigh on the page load, it can make the overall organization difficult, if it’s a team it can create maintenance problems among members, ends up giving a multiple responsibility to the page, just to mention a few things.

But there are cases that you are doing something simpler or have a specific functionality that is better inline, so you can use it. The question is to know what you are doing, understand the consequences of each choice, understand your problem and define what best serves the 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 if it makes sense in that context.

5

On websites

Leave styles inline does not enable you to code reuse, which is very important in software engineering. Repurposing code (well written) will make your development time faster and standardized.

Assuming that you need the same style to use on another element in the same or another page, you would need to rewrite it, and if you needed to change it, you would need to change in all occurrences where you used that style. This problem could have been avoided if you had a common style sheet for all these elements.

There is a principle of software development called DRY (Don’t Repeat Yourself) that speaks precisely about code reuse. Has good questions about this principle here on the website.

Of course visually, your page will look the same, but development time can go up, you’ll spend more time doing less. Productivity is very important when it comes to software.

In emails

The underworld of developing emails with HTML and CSS, aimed at support in different clients, is complicated. What Gmail supports, Hotmail sometimes doesn’t, and don’t forget the iOS, Android, and other accounts email app!

CSS is usually used inline in emails. A survey of the Litmus site shows that 85.5% of emails sent by marketers inlinearize your CSS for compatibility reasons.

There are even tools that take an HTML file with CSS defined in the tag style and turns everything into inline, for emails.

  • I have never worked with programming, but how many lines usually write per day professionals?

  • 3

    I think this question is quite subjective. Many lines of code may not even be a good thing depending on the context. Sometimes you can write a gigantic code, but one that is almost unreadable for another developer who has to maintain your code, otherwise it may also be valid. Sometimes we spend more time reading code than writing :P

  • I believe that there is no way to measure correctly because different language generate more or less lines and at the end depends on each person, but if you want to see numbers (many) a look at github projects it shows the amount of code written by each person

  • 1

    @Viniciusputtimorais If you want to have a notion, "in numbers", it really varies from the speed with which the person types and how much their work results in having to write new code. There are people who "write" easily more than 10k lines in a day. But not necessarily every day. Often small changes (10-100 lines) completely change the behavior of a program/system. What takes the most time in this case is the analysis and planning of how this will be done. This is more important than the amount of lines in any scenario.

4

This use of leaving the canvas tag with width and height empty 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 is the Normalize.css

In this case, your example would be:

canvas {
    height: auto;
    width: auto;
}

As you put in the example would error because it even escapes the CSS syntax.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.