Inline Styles are bad

BASARAT
2 min readAug 12, 2016

--

But not if you are using JavaScript objects

I’ve been here before

2013, I was presenting about directives in angular. Someone asked the question:

using the onclick attribute is bad practice. Why are people using ng-click?

The answer of course is that onclick needs to point to a global function (on `window`) and that is a completely unmaintainable way to write JavaScript. However `ng-click` (or even `onClick` in ReactJS) is very clearly bound to a local function and is much more manageable.

Fast forward to today and junior devs aren’t here with this stigma and senior devs have moved on. Declarative `onClick` is the way to go in on modern frameworks.

Inline Styles are bad

Yes, in the olden oldie days of HTML. When copy paste HTML was the way for reuse and if you needed to reuse styles between two segments you would copy paste the inline styles.

The fix was of course to use CSS classes. Cause they provided reuse between two separate portions of HTML. But ofcourse CSS class names are global and we’ve realized that we need a better way.

Now, with frameworks like React you get to use JavaScript to declare what the UI’s HTML should look like. There is no reason not to use JavaScript to declare how its CSS should look like as well. That way you get all the benefits of modern maintainable JavaScript for your CSS.

It might be while before everyone gets it, and lots of them already do. Even die hard CSS thought leaders. If you are wondering, I do have my favorite and this opinion came with experience.

People often remember statements like “foo is bad practice” but don’t remember the why. Re-think the why is perhaps the greater lesson here.

As a developer you need to adjust your mind and change your opinions with changing best practices.

If you liked this post don’t forget to push the heart below to share the love 🌹.

--

--

Responses (2)