Skip to content
💅 styled-components vs glamorous 💄
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
docs
public
scripts
src
.editorconfig
.gitignore
package.json
readme.md
server.js
yarn.lock

readme.md

React/Redux Tic-Tac-Toe

This project was bootstraped with create-react-app.

Developing

First of all install the dependencies. Use wichever you like the most. 😄

$ yarn install
$ npm install

Tasks

$ npm start     # start dev server
$ npm run build # build the project for production
$ npm test      # run tests

Motivation

This is a very simple project made to compare <styled-components /> and { glamorous }. At the moment it only consists of a few components making up one view being server side rendered.

Styled-components vs. Glamorous

Both styled-components & glamorous have a very similar API: they expose a factory function to generate React components with their own styles and provide helper methods for any valid DOM & SVG nodes, and also have support for React Native.

styled-components does it by passing the actual CSS styles in a tagged template literal and interpolated functions that are called with the component props to generate dynamic styles. While glamorous does it by passing glamor style objects and functions also called with the component props and should return style objects.

In both approaches the component styles are parsed and added to a CSS class which is injected into a style tag in the head and applied to the underlying component via className.

glamorous was actually inspired by styled-components.

// ----- STYLED-COMPONENTS -----

// mixins.js
export const centered = `
  display: flex;
  flex-direction: column;
  alig-items: center;
  justify-content: center;
`

// Button.js
import styled from 'styled-components'

import { centered } from './mixins'

export default styled.button`
  color: white;
  padding: .55rem 1.25rem;
  borderRadius: .3rem;

  ${centered}

  backgroudColor: ${props => props.success ? '#00af9e' : '#ff8127'};

  &:hover {
    backgroudColor: ${props => props.success ? '#007c70' : '#f36500'};
  }
)
// ----- GLAMOROUS -----

// mixins.js
export const centered = {
  display: 'flex',
  flexDirection: 'column',
  aligItems: 'center',
  justifyContent: 'center',
}

// Button.js
import glamorous from 'glamorous'

import { centered } from './mixins'

export default glamorous.button(
  {
    color: 'white',
    padding: '.55rem 1.25rem',
    borderRadius: '.3rem',
  },
  centered,
  (props, theme) => ({
    backgroudColor: props.success ? '#00af9e' : '#ff8127', 
    ':hover': {
      backgroudColor: props.success ? '#007c70' : '#f36500',
    }
  }),
)

Docs

Activity

styled-components:

glamorous:

Adoption / Users

styled-components has has been around longer and has a winder adoption, user base and more packages and websites built with it.

Examples & big open source code bases

styled-components:

glamorous:

Reusability

styled-components:

.extend and .withComponent are ways the best reuse styled-components, either by extending the styles or by using the styles on other component, respectively. Or even combining the two.

import styled from 'styled-components'

const Button = styled.button`
	color: palevioletred;
	border: 2px solid palevioletred;
	border-radius: 3px;
`;

const TomatoButton = Button.extend`
	color: tomato;
	border-color: tomato;
`;

const Link = Button.withComponent('a')

const TomatoLink = Link.extend`
	color: tomato;
	border-color: tomato;
`;

Also it is possible to reuse chunks of CSS strings via interpolation or use the default expose factory to style other existing components:

import styled from 'styled-components'

const someCSS = `
  display: flex;
  justify-content: center;
  align-items: center;
`

const CenteredSection = styled.div`
  ${someCSS};

  padding: 10px;
  margin: 0 auto;
  max-width: 720px;
`

import { Link } from 'react-router'

const StyledLink = styled(Link)`
  color: tomato;
  text-decoration: none;
`

glamorous:

Does not provide a way to extend components like styled-component does. But it provides the .withComponent method and also style objects can be reused and also the factory can be applied to other components:

import glamorous from 'glamorous'

const Button = glamorous.button({
  color: 'palevioletred',
  border: '2px solid palevioletred',
  border-radius: 3,
});

const Link = Button.withComponent('a')

const TomatoLink = Link.extend`
	color: tomato;
	border-color: tomato;
`;

const someCSS = { 
  display: 'flex',
  justify-content: 'center',
  align-items: 'center',
}

const CenteredSection = glamorous.div(
  someCSS,
  {
    padding: 10,
    margin: '0 auto',
    maxWidth: 720,
  },
)

import { Link } from 'react-router'

const StyledLink = glamorous(Link)({
  color: 'tomato',
  textDecoration: 'none',
})

NOTE: One downside of reusing chunks of CSS or style objects is that it duplicates the amount of generated styles, while extending does not.

Learnig curve

Both libraries require not so much effort to learn. They only require some basic concepts each:

Server side rendering

This is also a point well covered by both libraries. styled-componets added a great support for it in the v2 with stylesheet rehydration and only generating the styles being rendered. glamorous supports SSR via glam and glamour, its the core modules, which also supports style rehydration only generating the styles being rendered.

The most basic case is covered here and here, based on respectives docs.

Important differences

.attrs

styled-components offers a way to set props, either static or dynamically by using functions.

const Link = styled.a.attrs({
  rel: props => props.external && 'noreferrer noopener',
  target: props => props.external && '_blank',
})`
  color: tomato;
`;

const PasswordInput = styled.input.attrs({
  type: 'password',
})`
  color: tomato;
`;

babel-plugin-styled-components

In addition to the SSR support styled-components provides a babel plugin to enable styles minification on SSR for production and some other goodies.

Glamorous inspiration

glamorous inspiration points out some features that styled-components does not have:

  • Not to ship a CSS parser to the browser.

glamorous gzipped: 7.84kb. It also deppends on glamour gzipped: 9.45kb. Total: 17.89kb.

styled-components gzipped: 13.3kb.

As of v2 styled-components is using a different parsed called stylis. A lightweight (3kb) CSS preprocesor. Also there's experimental work on dropping the parse in favor of doing it at compile time with babel.

  • Support for RTL (via something like rtl-css-js).

This is only relevant if required.

  • Support for using real JavaScript objects rather than a CSS string (better tooling support, ESLint, etc.).

While this is true, there are yet any tools to validating style objects yet, at least not that I know of. On the other hand styled-componets has support for linting & 'syntax highlighting' for many editors.

Tiny version

glamorous offers a tiny version at the cost of some features.

Conclusion

styled-components and glamorous are two awesome libraries built on the same paradigm and using them would result in the same benefit: reusing styles by reusing and composing components, whichs is a very React_-ish_ approach.

At the end choosing one or the other comes down to either the very few differences or a matter of taste: real CSS in tagged template literals vs. JS objects.

You can’t perform that action at this time.