Skip to content
This repository has been archived by the owner on Dec 22, 2023. It is now read-only.

Latest commit

 

History

History
148 lines (122 loc) · 3.26 KB

Comparison.md

File metadata and controls

148 lines (122 loc) · 3.26 KB

Comparison of the code for different use-cases

Most only the parts which are different were taked from the original examples for brevity, some parts of the original could also sometimes have extra line wraps to fit into the table.

Note that while the HTML and CSS for those examples would be mostly similar, there could be other differences based the nature of each method.

Styled-components

styled-componentsbemto-components

Adapting based on props

Note: bemto has more code vertically, but more readable and maintainable than one based on props. 
const Button = styled.button`
  background: ${props => props.primary
    ? 'palevioletred' : 'white'};
  color: ${props => props.primary
    ? 'white' : 'palevioletred'};
`;
render(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>
);
 
const Button = styled(bemto('button'))`
  background: white;
  color: palevioletred;

  &_primary {
    background: palevioletred;
    color: white;
  }
`;
render(
  <div>
    <Button>Normal</Button>
    <Button _primary>Primary</Button>
  </div>
);

Extending styles

Note: not exactly the same if you'd want to style all the buttons from outside (possible for bemto, not possible for extend): `${Button}` wouldn't match `TomatoButton`. Thus, the bemto variant is closer to the wrapping with an extra `styled`, like `TomatoButton = styled(Button)`. 
const Button = styled.button`
  color: palevioletred;
  border: 2px solid palevioletred;
`;
const TomatoButton = Button.extend`
  color: tomato;
  border-color: tomato;
`;
render(
  <div>
    <Button>Normal Button</Button>
    <TomatoButton>Tomato Button</TomatoButton>
  </div>
);
 
const Button = styled(bemto('button'))`
  color: palevioletred;
  border: 2px solid palevioletred;

  &_tomato {
    color: tomato;
    border-color: tomato;
  }
`;
render(
  <div>
    <Button>Normal Button</Button>
    <Button _tomato>Tomato Button</Button>
  </div>
);
Note: see how we don't need anything extra to change the tag to a link in a bemto-variant, it would even have the same styles for the `_tomato` modifier! 
const Button = styled.button`
  color: palevioletred;
  border: 2px solid palevioletred;
`;
const Link = Button.withComponent('a')
const TomatoLink = Link.extend`
  color: tomato;
  border-color: tomato;
`;
render(
  <div>
    <Button>Normal Button</Button>
    <Link>Normal Link</Link>
    <TomatoLink>Tomato Link</TomatoLink>
  </div>
);
 
const Button = styled(bemto('button'))`
  color: palevioletred;
  border: 2px solid palevioletred;

  &_tomato {
    color: tomato;
    border-color: tomato;
  }
`;
render(
  <div>
    <Button>Normal Button</Button>
    <Button href="#x">Normal Link</Button>
    <Button href="#x" _tomato>Tomato Link</Button>
  </div>
);