Shiny is a method of organizing CSS rules by purpose. It provides a naming scheme to communicate selector responsibility, and suggests a convention for file layout. While made with preprocessors like Sass in mind, Shiny can be used with plain, handwritten CSS. The specification addresses selector naming, but the conventions work best when applied to the HTML and JavaScript aspects of the project, as well.
The specification is centered around the concepts of Components and Layouts. Components represent a minimal unit of complete functionality, eg a button, a card, an input, or a header. Layouts are used to arrange components, eg a story list, UI panel, or whole page. Both Components and Layouts use Variants and States to manage related configurations. Shiny also makes a distinction between styles for structure and styles for look-and-feel purposes.
The selector syntax looks like: .LayoutName__, ._RegionName__,
.ComponentName, ._SubcomponentName, .-variant, .-variant_group--val,
[data-state="val"]. Project organization is focused on separating
structural styles from look-and-feel styles, through the use of appropriately
named files.
See the full specification for details and examples of both syntax and organization.
See a real-world example.
The shiny package provides JavaScript and Sass helpers for working with
Shiny-style classes.
Install the package using npm, npm install shiny,
then require or import as necessary: var shiny = require('shiny'); or
@import "shiny".
For details on usage, see the helpers documentation.
The project source for the spec and the helpers is open source, unlicensed, and is available on GitHub. Bugs, problems, features, comments, joys, and concerns are all welcome in the project issues, as are pull requests.
The Shiny method is similar to, and influenced by, the SMACSS and BEM techniques. It also draws some inspiration from a talk by John Albin Wilkins at Sass Conf 2013. However, it attempts to have a friendlier syntax than BEM and SMACSS that also works well with client-side JavaScript frameworks. Marionette and React in particular have been influential.
Unlicensed aka Public Domain. See /LICENSE for more information.