4

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.

BarryBones41
  • 291
  • 3
  • 9
  • Possible duplicate of [When should I use a CSS class over inline styling?](http://programmers.stackexchange.com/questions/125893/when-should-i-use-a-css-class-over-inline-styling) – gnat May 27 '16 at 15:16
  • 2
    Possible duplicate of [Why is it (or was it) important to separate CSS from HTML?](http://programmers.stackexchange.com/questions/271294/why-is-it-or-was-it-important-to-separate-css-from-html) – Dan Pichelman May 27 '16 at 15:24
  • If your site has 50 "myTextArea" textareas scattered in different places and you need to change the width of all of them to 85%, you'll be really glad you're using CSS & not inline styling. – Dan Pichelman May 27 '16 at 15:26
  • 1
    It a bit better because css files are more powerful than inline styles but `width90` is an anti pattern. If the class was named something different like `.text-area` the width could be changed in one spot instead of many which is why inline should be avoided. – pllee May 27 '16 at 16:06
  • [Don't add classes for styles, add styles for classes](http://zzzzbov.com/blag/response-to-maintainablecss). Using a class like `width90` is a guaranteed way to end up with a [BBOM](http://www.laputan.org/mud/). – zzzzBov May 27 '16 at 16:30
  • What about `normalize` that has classes like `text-left`, `text-center`, etc – BarryBones41 May 27 '16 at 17:37

3 Answers3

13

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.

Dan Pichelman
  • 13,773
  • 8
  • 42
  • 73
  • 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
8

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.
Tulains Córdova
  • 39,201
  • 12
  • 97
  • 154
  • I think you all miss the point. I have 1000 `` 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 `width90`or 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
  • That's exactly my point.... why would I create a class that just changes the width, instead of using inline? If I have 10 textareas and I don't want them all to be 90%, I cant just `.textarea{ width:90% }` and now you're saying don't use a class for the width. – BarryBones41 May 27 '16 at 15:42
  • 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.

Sai Murali
  • 1
  • 2