programming

CSS for JavaScript M3 Modern Component Architecture

Over the past few years, an explosion of ideas and tools have made CSS much easier to work with at scale. In this module, we'll peek our head into this wild new world, and learn how to make the most of it.

problems and solutions

影片說的很清楚目前模組化的前端，很難知道說 css 會作用到那些 element。

styled-components 101

  • tagged template literals. it’s a part of JavsScript language.
  • styled-components 不需要使用到 className
  • styled-components is a CSS-in-JS solution with a radical idea: every style is also a React component.
  • global styles are baseline defaults that are very low specificity, so they will always be overwritten by any explicitly-set styles.

作者認爲 css in JS 這術語取名不好：The name “CSS-in-JS” has always bothered me—it’s a misnomer! It makes it sound like we’ve come up with some pure-JavaScript way of doing styling. Nothing could be further from the truth: we’re still writing 100% full-fat real-world CSS. JS is the delivery mechanism for our CSS, that’s all.

  • the styled object has methods for every HTML tag (at least, the ones typically used within the <body>). Examples will frequently use styled.div, but it’s important to point out that there is also styled.a, styled.cite, styled.canvas, styled.marquee, and so on.

If you’re interested in learning more about how styled-components works, I wrote a blog post called “Demystifying styled-components”. Demystifying styled-components

Global styles

styled-components has a specific API for creating global styles:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

// GlobalStyles.js
import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
  *, *::before, *::after {
    box-sizing: border-box;
  }

  html {
    font-size: 1.125rem;
  }

  body {
    background-color: hsl(0deg 0% 95%);
  }
`;

export default GlobalStyles;


// App.js
import GlobalStyles from '../GlobalStyles';

function App() {
  return (
    <Wrapper>
      <Router>
        {/* An entire app here! */}
      </Router>

      <GlobalStyles />
    </Wrapper>
  )
}

export default App;

When the GlobalStyles component is rendered, it will inject all of its CSS into the <head> of the document, applying those styles.

css reset

CSS Tools: Reset CSS

global styles

Dynamic Styles

The official styled-components way of managing dynamic styles is to use interpolation functions:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

const Button = ({ color, onClick, children }) => {
  return (
    <Wrapper onClick={onClick} color={color}>
      {children}
    </Wrapper>
  );
}

const Wrapper = styled.button`
  color: ${props => props.color};
  padding: 16px 24px;
`;

CSS Variables, Media queries

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


const Button = ({ color, onClick, children }) => {
  return (
    <Wrapper onClick={onClick} style={{ '--color': color }}>
      {children}
    </Wrapper>
  );
}

const Wrapper = styled.button`
  color: var(--color);
  padding: 16px 24px;
`;

1
2
3
4
5
6
7
8


const Wrapper = styled.button`
  color: black;

  @media (min-width: 1200px) {
    color: red;
  }
`

component libraries

Josh 他先去 Breadcrumb Example | APG | WAI | W3C 使用 devTools 觀察 html 結構，然後再實作。

Composition （Button）

we’ll see how to use the polymorphic as prop to dynamically change the tag that styled-components renders.

Dynamic tags 動態的 HTML tag

Here’s another quick example, this time using React Router’s Link instead of a plain anchor:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

import { Link } from 'react-router-dom';

function Button({ href, children }) {
  return (
    <Wrapper to={href} as={href ? Link : 'button'}>
      {children}
    </Wrapper>
  );
}

const Wrapper = styled.button`
  /* styles */
`;

render(<Button href="/">Hello</Button>);

Referring to other components (Contextual styles)

styled-components: Advanced Usage