Is there a performance difference between using HTML attributes/tags compared to inline styles?-CodePudding

Consider the following two snippets of markup:

<p style="text-align: center; font-size: 10pt">
    Blah blah blah
</p>

Versus this:

<p align="center">
    <small>
        Blah blah blah
    </small>
</p>

Now, performance optimisation tools often recommend that inline styles should be avoided, so would the second, attribute-based option, be better in this case?

CodePudding user response：

I think neither situation is good. You should avoid using inline styles. Maybe the css used in the external file is correct, use class to change the label style.

<p class="paragraph">
    Blah blah blah
</p>

And in css

.paragraph {
 text-align: center;
 font-size: 10pt;
}

CodePudding user response：

Of course there is a difference, when you use separate separate CSS file, it takes another request and then parsing to actually paint the template. But if you style html directly it will be direct parsing without additional request. The biggest issue here is that code must be easily readable and html with all the styles implemented in it looks like a total mess. After all the list of attributes that need to be styled can be very long, not to even talk about pseudo elements and their styles. What CSS file provides is organisation, it separates two different kinds of code and that makes it way more readable and understandable. In that particular case which you posted it wouldn't make any difference as you can't event notice It, but in general I strongly recommend to separate CSS code.