Welcome to the Lounge

// file A.css
<style type="skeleton">
  .node { height: 20px; width: 20px; }
</style>

// file B.css
<style id="greenTheme" type="skin">
  .node { background-color: green; }
</style>

// File C.css
<style id="blueTheme" type="skin">
  .node { background-color: blue; }
</style>

// green-theme.scss
$primary-color: green;

// blue-theme.scss
$primary-color: blue;

// theme.scss
.node {
    background-color: $primary-color;
}

RandyBuchholz wrote:

For example, a skeletons.css file that only contains layout styles and a skin.css file that only contains theming styles.

Marc Clifton said:

Personally, I'd like to see a completely separate mapping, ok, use the class and id tag values, that would map those values to the css that styles those elements.
...
To me, that would be a clean separation of concern and make it really easy to change the style globally or of specific element without caring about whether the style is used elsewhere.

Maybe such a thing exists. It shouldn't be to hard to actually write something like that that applies styles to elements after the DOM is loaded but before the page is rendered

/* table.scss */
table {
    /* Styles for ALL tables. */
}

/* overview-table.scss (or components.scss) */
.overview-table {
    /* Styling for all tables that serve as an overview. */
}

/* order-page.scss */
.order-page {
    .overview-table {
        /* Specific styling for the order page, will never be shared with anything else! */
    }

    .something-else-order-specific {
        /* ... */
    }
}

/* invoice-page.scss */
.invoice-page {
    table {
        /* Maybe tables have something special on the invoice page... */
    }

    .overview-table {
        /* You get the point... */
    }
}