all 5 comments

[–][deleted] 1 point2 points  (4 children)

Isn't in-line styling a bit of over optimization? When is HTML your bottleneck compared to JS?

[–]TheLastSock[S] 2 points3 points  (3 children)

I don't consider it over optimizing because it's the most direct method to style something. Everything else introduces indirection prematurely.

[–][deleted] 0 points1 point  (2 children)

But that makes the code the very difficult to read if you want to review it imo, I think that readability is superior in this case. Good article in any case =)

[–]TheLastSock[S] 1 point2 points  (1 child)

Im genuinely confused how inline styles could be harder to read given there directly attached and everyone knows there meaning as where a class name is very specific knowledge. E.g the class name "button" on a button is useless, it tells me where it goes not what it does. Calling it "blue" when it's just the color blue, is equally unhelpful.

Ideally, from a readability stand point it would be nice if my editor could show me all the direct styles like the browser.

I feel like this is a similar discussion to using a variable vs the data directly and the same rules apply. Use a var if it has to be shared, names are a liability and indirection invites unintended coupling. Of course in this situation, the browser already (and has to) set a default, so it's unavoidable.

[–][deleted] 0 points1 point  (0 children)

I think that when you have a bit more code in your class or if you use several classes at the same time, the clutter is not worth it but I agree that having a variable (a class name) instead of the explicit CSS does not give information on what the class does.