Bad practice to mix up inline CSS with stylesheet?

[kkarkos]

Hey guys, this is not a specific issue related to Aphrodite, more a general question. I started integrating Aphrodite into a React project and everything works well so far. However, one requirement is to use a css framework (skeleton) for the site I am working on. That's for having a base grid and base style. I'm loading the min version of the framework in the via a traditional and everything works fine.

Question: is this against the inline css methodology? Could I not have a base stylesheet for a global scope and then maintain local css via components? How would you handle grid styles via components otherwise? Does this information not have to be in the global scope? Is this bad practice? Same with using react plugins (e.g. slider), those come with css which will be in the global scope.

Any thoughts?

Cheers

[kentcdodds]

Hi @kkarkos,
Not a Khan member or anything, but a big fan of aphrodite. Here's my take on it:

In a real application you can't get away from global styles. Whether it be reset CSS or a third party grid system, you're likely going to need/have actual CSS files that you include on your page. This is not a bad practice IMO. The cool thing about aphrodite is that you can reeeeeally easily mix it with your existing architecture and use it where it makes sense. Aphrodite solves the component CSS problem, but it doesn't try to address the existing global problem (like for reset css).

If you're interested, you could implement your own CSS grid using aphrodite and that'd be pretty cool, but as you can see here aphrodite works great with bootstrap :-)

As for third party components that require you to include their CSS, there's not much you can do to get around that. And truthfully, that's an implementation detail of their library that you should (hopefully) not have to care about. You might encourage them to look at the merits of aphrodite if their library is big enough to warrant a dependency on aphrodite though. Using aphrodite in a library makes it incredibly extensible.

I hope that my perspective is helpful!

[xymostech]

@kkarkos I don't think there's anything wrong with having an external stylesheet and using aphrodite for styling individual elements! We do that all over the place at KA, and it works well. I think that stylesheets are especially useful for adding overall structure, since it's hard to add more global styles with aphrodite (for now: See e.g. #30)

As far as "is this against the inline css methodology?" goes, I don't think there's any clear inline style methodology, so do whatever works for you! I'm going to close this since this isn't a bug with aphrodite, but feel free to continue the conversation if you'd like :)