Question: can Styling be full CSS replacement?

[playpauseandstop]

I really love idea of Styling and how easy it could be integrated into the project, but from the docs and current state looks like it only suitable for providing additional styles for the web components.

But what if I need an ability to describe all my styles via Styling? Yes, still using some normalization library like normalize.css, but no other CSS Frameworks, like Bootstrap, Foundation and others. Is it possible?

---

In theory I'm thinking that my app.js could have something like,

import "normalize.css/normalize.css";
import "./styles/Global";

...

when ./styles/Global.js contains,

import styling, {tagStyling} from "styling";

const html = styling({
  backgroundColor: "#eee"
});

export default tagStyling({
  html
});

Does it make sense? Or maybe there is other solution for my needs?

---

ps. I've seen JSS initiative, but have feeling that Styling fits my needs much better than JSS

[andreypopp]

Hi @playpauseandstop,

Styling is primarily targeted for defining component styles and so it doesn't have any API for defining global styles.

Though there's an undocumented hook which allows generating arbitrary CSS:

export default styling(`
body {
  color: ${colors.text}
}
`)

I wouldn't recommend it though. Instead I think global styles like normalize.css are best described using regular CSS files. Fortunately using Webpack makes mixing regular CSS with styling easy.

[playpauseandstop]

Ok, got your vision. Sad, but looks like regular CSS still the only way to introduce some global styles.

---

Anyway I still have one question regarding nesting styles. What if I have some list component,

import Styles from "./styles/Articles.js";

class Articles extends Component {
  articleItem(article) {
    return <li key={`article-${article.id}`}>{article.title}</li>;
  };

  render() {
    const {data} = this.state;
    return (
      <ul className={Styles.self}>
        {data.map(this.articleItem)}
      </ul>
    );
  }
}

How do I write next CSS rule with styling?

ul li {
  ...
}

I tried something like,

import styling from "styling";

export const self = styling({
  li: {
    ...
  }
});

But that notation just generate .className:li style, which is not what I want.

[andreypopp]

Sad, but looks like regular CSS still the only way to introduce some global styles.

Yeah, though I'd accept pull request with API for global styles. There's still a use case for that because you'd probably want to share constants (colors, ...) between component styles and global styles.

Anyway I still have one question regarding nesting styles. [...]

So with React, I think, it's better not to allow uncontrolled extensions and that's applicable to styling to.

I think it's better to define another CSS class and pass it to children:

import Styles from "./styles/Articles.js";

class Articles extends Component {
  articleItem(article) {
    return <li className={Styles.item} key={`article-${article.id}`}>{article.title}</li>;
  };

  render() {
    const {data} = this.state;
    return (
      <ul className={Styles.self}>
        {data.map(this.articleItem, this)}
      </ul>
    );
  }
}