Why I Write CSS in JavaScript

Re:Why I Write CSS in JavaScript by Const-me on Monday February 18, 2019 @01:30PM (#19192908)

This is one of the reasons why I don’t like web development. Here’s how MS solved this in XAML, a markup language used in Windows world for GUI:

  <StackPanel>
    <StackPanel.Resources>
      <Style TargetType="TextBlock">
        <Setter Property="Foreground" Value="Red" />
      </Style>
    </StackPanel.Resources>

    <TextBlock Text="Red" />

    <StackPanel>
      <StackPanel.Resources>
        <Style TargetType="TextBlock">
          <Setter Property="Foreground" Value="Green" />
        </Style>
      </StackPanel.Resources>

      <TextBlock Text="Green because the default style was reset by the nested container" />

    </StackPanel>

    <TextBlock Text="Red again because the nested container scope has ended" />

  </StackPanel>

[ Parent | on HN ]

Re:Why I Write CSS in JavaScript by crooked-v on Monday February 18, 2019 @05:05PM (#19194908)

You can get basically the same thing from rebass in JS:

  <Box
    p={5}
    fontSize={4}
    width={[ 1, 1, 1/2 ]}
    color='white'
    bg='magenta'
  >
    Box
  </Box>

It uses a CSS-in-JS library under the hood to translate that into a CSS class for each unique combination of styling props.

[ Parent | on HN ]

Re:Why I Write CSS in JavaScript by patates on Monday February 18, 2019 @01:51PM (#19193136)

I find this extremely hard to read. I mean I can see the advantage, but there must be a better way?

[ Parent | on HN ]

Re:Why I Write CSS in JavaScript by Const-me on Monday February 18, 2019 @02:11PM (#19193331)

I agree on readability, CSS is much more compact, and therefore easier to read. I think MS designed XAML to be mostly handled by tools not humans. Didn’t work because the tool (expression blend) is not quite good enough so humans have to deal with the source too. Experience helps for simple cases like this one but not for more complex cases like control templates or animations.

I’ve wrote the above example because it shows a possible solution to the stated problem, i.e. how to introduce namespaces for styles without also introducing a full-blown programming language with scopes and variables. The exact syntax can be replaced making it more compact and easier to read.

Compared to this mostly-immutable scoped dictionaries, way more things can potentially go wrong with code, regardless on the programming language.

[ Parent | on HN ]