-1

For situations where I need to set special-case widths of elements, I've been using some utility classes like width--8em. I considered at first that this would be more maintainable but now I'm starting to wonder because I end up with so many one-off classes. Is there a performance advantage regarding reflow one way or the other? Any other maintainability advice welcome.

class

<div class="width--5rem">example</div>

with CSS like

.width--5rem {
  width: 5rem;
}

style

<div style="width: 5rem">example</div>
ryanve
  • 50,076
  • 30
  • 102
  • 137
  • Possible duplicate of [Inline Styles vs Classes](http://stackoverflow.com/questions/3142710/inline-styles-vs-classes) – Mimouni Dec 15 '16 at 19:04
  • No those are different from mine. I'm using already using external css files either way. – ryanve Dec 15 '16 at 19:08

2 Answers2

0

Functionally, there is no difference. It is more commonplace (and better practice) to use classes and place all CSS in external files and link them with:

<link type="text/css" rel="stylesheet" href="pathToCSSFile"/>
Fueled By Coffee
  • 2,467
  • 7
  • 29
  • 43
0

I agree with acarroz5 where I prefer to put all of my element styling in css files. If you have dozens or hundreds of html files that use the inline style of 5em but then decide you want to change them all to 10em, you'd have to do a "find in files" to see where they all are and then potentially have to change each file manually. If you have a class defined in 1 css file, all you have to do is change that one value in that one file to get the desired effect. Much less time consuming and much more efficient.

I try not to use too many special-case element positioning or dimensions if I can avoid it - for me, it just seems to make things on the page look messy and seems to throw off symmetry.

If you really need to use some special case styling, maybe put all the special cases in it's own css file - that way they're easier to find and modify.

Brad Burns
  • 21
  • 1
  • 6