threepointone/glamor

glamor is a JavaScript library for writing CSS styles directly inside your JavaScript code. Instead of maintaining separate stylesheet files, you define your styles as plain objects in JS and apply them to HTML elements. It was built with React in mind but works with any framework or with plain JavaScript. The core idea is that you call a css() function with a style object, and it returns something you can attach to a DOM element either as a class name or as a data attribute. Styles can include pseudo-classes like hover and focus, media queries for different screen sizes, keyframe animations, and font-face declarations. All the CSS features you would use in a regular stylesheet are available. glamor automatically adds vendor prefixes where needed so you do not have to write them manually. One of its practical benefits is style deduplication: if two components define the same rule, glamor writes it to the browser's stylesheet only once. In production mode it uses the browser's built-in insertRule method, which is fast. In development mode it writes to a visible style tag so you can inspect and edit styles in the browser's developer tools. You can toggle between the two modes manually if needed. The library also ships optional extras. There is a CSS reset you can import, helpers for theming, a compatibility shim for codebases using a different CSS-in-JS library called Aphrodite, and an experimental port of the styled-components API. It also supports server-side rendering, which matters when you need the page to arrive with styles already applied rather than waiting for JavaScript to run. Installation is a single npm command. The README includes links to API documentation, a how-to guide comparing different styling techniques, notes on performance, and a description of how the library works internally.