MiguelCastillo / scenic

Scene graph
MIT License
5 stars 0 forks source link

Move scene-node-details-header out of index.css #18

Closed MiguelCastillo closed 2 years ago

MiguelCastillo commented 2 years ago

We are working on moving stuff out of index.css in favor of style object. I have started that transition here https://github.com/MiguelCastillo/scenic/pull/16

This ticket is to figure out how we want to move shared styles out of CSS.

  1. Create a SceneNodeDetailsHeader component which wraps all the styles as a component.
  2. Create a styles.js file in which we share styles.

Im definitely not a huge fan of option 2 because I have seen that pattern become easy to abuse where such file just has a whole bunch non semantic 1 off css styles.

Sample component

import * as React from "react";
import {PanelHeader} from "../components/panel.jsx";
export const SceneNodePanelHeader = (props) => {
  return (
    <PanelHeader style={styles.sceneNodePanelHeader}>
      {props.children}
    </PanelHeader>
  );
};
const styles = {
  sceneNodePanelHeader: {
    textTransform: "capitalize",
    padding: "1em",
    backgroundColor: "#000000",
  },
};
MiguelCastillo commented 2 years ago

Ok we ended up with css imports in javascript and that was a nice way to share CSS styles. And that was done in #16