3

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.

11

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.

  • I would go little further. If you need badly to set style attribute, do it programmatically via script. But avoid (if possible) to do it directly on the html. – Laiv May 27 '16 at 16:51
7

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.
  • I think you all miss the point. I have 1000 <textareas> with style=width:90%". Mr Client wants them full width. What time am I saving by having to replace every related style=width:90%" with style=width:100%", versus changing every width90 class with width100 class ? – BarryBones41 May 27 '16 at 15:34
  • 6
    The software axioms at play here are: "make decisions in one place" "Separate the things that change from the things that stay the same" – candied_orange May 27 '16 at 15:35
  • 6
    @BarryBones41 You missed the point. There's no point in having a width90or a width100 class. You should have a textarea selector in a css file. It doesn't make sense calling the css class after one particular value. – Tulains Córdova May 27 '16 at 15:38
  • 1
    The class should be named something like .favoriteSongsTextArea. You may only have a single favorite song TextArea in the whole site, but who knows... in the future you might need a favorite song TextArea on multiple pages, and then you can just reuse the style. Also, you may decide that favorite song TextArea needs a pink background... you can do that in the style and have it affect all instances. – Chris Steele May 27 '16 at 15:58
  • 2
    @BarryBones41 You don't typically have 20 different text area sizes. In the interest of UI consistency you might have say, 3. Then you can create classes like textarea-sm, textarea-md, textarea-lg. If you're making classes like red-seventy-two-point-font-on-page-two you're eliminating the design advantages of CSS. The idea is to make general classes that apply to a number of elements so you can make changes across the application in one place. – Legion May 27 '16 at 15:58
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.