Given
<div>
<textarea></textarea>
</div>
Why is this
<div>
<textarea class="width90"></textarea>
</div>
.width90{
width:90%;
}
any better than this?
<div>
<textarea style="width:90%;"></textarea>
</div>
edit:
I updated my example better. My question should be more related to generic styles like widths, text align, etc.
6
Looking at your updated question,
Why is this
<div>
<textarea class="width90"></textarea>
</div>
.width90{
width:90%;
}
any better than this?
<div>
<textarea style="width:90%;"></textarea>
</div>
My answer is It’s not any better, and neither would pass a code review with me.
As noted in the comments, if you wanted to change the width from 90% to 85%, you’d still have to make changes in many places.
It would be far better to give your <textarea> tag a semantically meaningful class name such as ‘InvoiceDescription’, ‘container’, ‘col-md-1’, and so on. That way when someone later on wants to both change the width AND the font/background color/whatever, they can do it in one place.
1
In layman’s terms:
- Because when you have a lot of pages with a lot of inline styling, and some user askes for cosmetics change, the you will have to make a lot of changes in a lot of places, and chances are you will miss something.
- Having the css in the same file albeit in a separate
<STYLE>section is almost as bad. - With a separate css file you change the style in (hopefully) a single place and your site will have a coherent look.
- Then you can use the free time to pursue some hobby or learn to play a musical instrument.
6
Just for fast manipulation of code the first format is used and the second format inline styling is going to extinct because inline styling makes the code look like chaos.
There is no difference in the outputs of the two formats, its just programmer’s ease of code point of view.