Bad CSS in JS

An article, posted almost 2 years ago filed in css, react, style, javascript, standards, simple, simplicity, npm, packages & coffeeandorange.

I tried to understand the argument made for styled components vs. ‘traditional’ CSS. But when reviewing these arguments I found out that they typically use bad code as proof for their point.

See e.g. the following SCSS code:

$blue = #5DBCD2;

@mixin button-styles($bg-color, $color) {
  background: $bg-color;
  color: $color;
  border: none;
  border-radius: 0.20em;
      background: darken($bg-color, 6%);
      cursor: pointer;

.button {
  @include button-styles(#ddd, black)

.button--primary {
  @include button-styles($blue, white)

To pair with a simple component along the lines of:

const Buttons = props => (
export default Buttons

The suggested alternative is:

import themeVars from "myTheme"
import styled from "styled-components"
import { darken } from "polished"

const B...

Continue reading...

murb blog