what happened to a clear division between js and css? In my experience many developers want nothing to do with css, they want a designer who can code to handle that
I think the React philosophy on this is that JS and CSS (and HTML) separate technologies, not concerns.
For very simple layouts, CSS is good enough, and it perhaps makes sense to split out the css into a separate file, so long as it's pretty clear what each class does, and the classes are pretty much all global so that changing a property of a class will do exactly what you intend (make the font size of all page titles on the site bigger), and not have unintended consequences on other components you weren't aware of, or thinking about.
For web apps built from many complex components, the flat, global nature of CSS becomes very clumsy indeed. The power and flexibility you need to manage styles of these components quickly outgrows the power of CSS.
You start having to rely on splitting the css into files that contain only styles applying to each component, so that the structure is manageable and you can find things and make changes easily. So why not just drop those styles right into the component file where they're referenced anyway? What concerns are you separating by keeping the css out in a separate file?
You also start having to rely on build-time tools like SASS and LESS to introduce the necessary features to handle complexity in a large, component-structured codebase: variables, scope, mixins, etc. All these things are trivial features of JS, so why not just use JS to put in the styles directly instead of doing it with css propped up by a complex tool-chain? What are you gaining by doing so, other than having the CSS in a separate file? And, again, why is this a good thing?
CSS is just a technology for applying styles to your markup. For many apps, it's in inferior technology to JS for doing this, particularly when using a framework like React.
In many cases that division doesn't exist. Part of the beauty of React, as far as I'm concerned, is that it allows us to think about things on the page in terms of components, rather than as separate blocks of html, and javascript.
It does make sense to bring css into the mix as well, as css can have functional effects. If you have a React component, for example, which explicitly toggles whether items are displayed or not, it makes sense to tie the toggling of the css display property directly into the component, rather than factoring it out into a separate stylesheet and creating an additional dependency.
Note that I'm not suggesting that all styling should be done this way - I think that would be disastrous - but that there is merit in composing the html, css and javascript together.
Exactly. It's still a separation of concerns, just a different set of concerns. Organizing my code by feature/component is so much easier on my brain than organizing it by file extension.
You can mess this up, of course. We are really good at making things more complex than they ought to be, especially while the ideas are fresh in our head. We just need to keep that in mind to :)
Is it not just making things more complicated to put some CSS separate and some at the component level? Sounds like a nightmare for a designer who comes in to the game that didn't design the app.
I'm not saying breaking CSS into separate files is a perfect solution (this is what I do), but at least it allows you to have everything in one place so anyone can pick up and customize.
I work with some pretty complicated enterprise CMS systems and they are already terrible complex. Last thing I want to do is start spreading CSS all over the app.
I have been doing web apps and websites for a long time, and when I first saw this, it looked so wrong but felt so right.
Inline styles were impossible to maintain. Even if these (reactCSS) are rendered inline, it's easy to maintain, easy to follow, easy to change.
Javascript used to refer to making things move around and handling click/hover events (javascript was the DOM language). Now it's the entire application.
what am I trying to say...? it seems wrong, but try it out and see if your concerns don't just go away.
I feel like this has happened because the people who are creating these solutions are used to working with excellent and experienced team mates, who have a solid understanding of JS and CSS and are happy to work with both (and waste time learning the latest build-systems etc).
I can see it getting verrry messy in wider circles - and I bet we'll go through a whole slew of bizarre process workarounds and frameworks until we end up with a solution that is suspiciously like "clear division between JS and CSS"!
If your experience is that designers do all the CSS and no JS, then feel free to continue using that approach. Some of us either have good designers who adhere to Atomic Design and know some JS, and some of us have to translate mock-ups into HTML/CSS.
For very simple layouts, CSS is good enough, and it perhaps makes sense to split out the css into a separate file, so long as it's pretty clear what each class does, and the classes are pretty much all global so that changing a property of a class will do exactly what you intend (make the font size of all page titles on the site bigger), and not have unintended consequences on other components you weren't aware of, or thinking about.
For web apps built from many complex components, the flat, global nature of CSS becomes very clumsy indeed. The power and flexibility you need to manage styles of these components quickly outgrows the power of CSS.
You start having to rely on splitting the css into files that contain only styles applying to each component, so that the structure is manageable and you can find things and make changes easily. So why not just drop those styles right into the component file where they're referenced anyway? What concerns are you separating by keeping the css out in a separate file?
You also start having to rely on build-time tools like SASS and LESS to introduce the necessary features to handle complexity in a large, component-structured codebase: variables, scope, mixins, etc. All these things are trivial features of JS, so why not just use JS to put in the styles directly instead of doing it with css propped up by a complex tool-chain? What are you gaining by doing so, other than having the CSS in a separate file? And, again, why is this a good thing?
CSS is just a technology for applying styles to your markup. For many apps, it's in inferior technology to JS for doing this, particularly when using a framework like React.