2

I have a particular element which only appears once in the whole website. It is never likely to appear again anywhere else (it is a small site).

Are there any benefits obtained from styling this with CSS instead of a style attribute on the element itself?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
WW.
  • 23,793
  • 13
  • 94
  • 121
  • 1
    If it's for one element, then doing it inline is the best, look at this: https://stackoverflow.com/questions/8284365/external-css-vs-inline-style-performance-difference – Rahul Bharadwaj Dec 04 '17 at 03:44
  • 2
    Opinion-based questions are off-topic for SO. You should be aware of that – j08691 Dec 04 '17 at 03:45
  • Doesn't matter whether you put style inline or in css file for one minor element. If someone else will rewrite css he can easily fix this since he knows html and css. – mr.boris Dec 04 '17 at 03:52
  • depends if you're making a responsive website and need to change the style on smaller screens? in that case inline will make it impossible for you to update the style since it has greatest specificity – Pixelomo Dec 04 '17 at 03:54
  • @j08691 I didn't ask "what is best", I asked for the benefits of using CSS instead of inline. – WW. Dec 04 '17 at 04:33

1 Answers1

3

If your element styles need to respond to different situations (as Alan mentions), you will not be able to do this with an inline style at all, as inline styles don't support pseudo-class states or media states or indeed, any form of state change.

Having said that, if this is necessary, you can simply place your styles in an internal <style> element within the page containing this element. You get the best of both worlds: localized styles and a full Cascading Style Sheet.

Whether you do this in an inline style attribute or an internal stylesheet the only other meaningful benefit will be perceived by you as an author: it depends on whether you prefer having all your styles in one place (the main stylesheet), or whether you prefer unique element styles not polluting your main stylesheet (or your theme stylesheet or whatever your stylesheet is intended for, assuming it is externally linked).

As it is a small site, performance won't be an issue.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356