Today I Learned

TIL, 2023-01-20, CSS modules

A deep dive into CSS Module

Reference

  • Common CSS issues:
    • Name collision
    • What’s the dead codes?
    • Dependency management - position absolute and relative.
  • Advantage of CSS module
    • The markup is written in a JS file like index.js and it generate unique class names for the component.
    • composes - can combine stuff.

CSS Modules vs CSS-in-JS. Who wins?

Reference

  • CSS modules - transform style names using a hash based on the filename, path, style name.
.title {
 padding: 20px;
 background-color: #222;
 text-align: center;
 color: white;
 font-size: 1.5em;
}

import React, { Component } from 'react';
import styles from './App.module.css';

class App extends Component {
 render() {
   return (
     <div className={styles.title}>
       React application title
     </div>
   );
 }
}
  • Styled components
    • Cons
      • Browser won’t interpret the styles until styled-components has parsed them and added them to the DOM.
      • Cannot cache separate CSS.
      • Most libraries don’t support.
      • Can’t use SCSS, etc.
  • Pros
    • Can use JS logic
    • Looks semantically Title rather than h1 classname={style.title}.
    • Hot-reloading is instant.
  • CSS modules
    • Cons
      • Global styles has a different syntax
      • Need typings for CSS modules
    • Pros
      • Regular CSS
      • No styles in the code
      • Almost 100% standardised except for global
import React, { Component } from 'react';
import styles from 'styled-components';

const Title = styles.h1`
 padding: 20px;
 background-color: #222;
 text-align: center;
 color: white;
 font-size: 1.5em;
`;

class App extends Component {
 render() {
   return (
     <Title>
       React application title
     </Title>
   );
 }
}

How to use Props in React

Reference

  • While props pass information, state changes over time.
  • You can’t pass props from child to parent, but you can pass functions from parent to child, and the child components call these functions to change the parent state above.
  • Default props:
    • const Welcome = ({ title = 'Earth', description }) => (
  • Children prop - just the stuff between the tags.
  • Passing multiple props - slot pattern in React.
  • Render props:
import { useState } from 'react';

export const Amount = ({ toCurrency = (amount: any) => <p>Hello amount{amount}</p> }) => {
  const [amount, setAmount] = useState(0);

  const handleIncrement = () => setAmount(amount + 1);
  const handleDecrement = () => setAmount(amount - 1);

  return (
    <div>
      <button type="button" onClick={handleIncrement}>
        +
      </button>
      <button type="button" onClick={handleDecrement}>
        -
      </button>

      <p>US Dollar: {amount}</p>
      {toCurrency(amount)}
    </div>
  );
};
  • Usage:
<Amount />
<Amount toCurrency={(amount: any) => <Hoho amount={amount} />} />
  • How to set props to state?
const User = ({ user, onUpdateName }) => {
  // derive initial state from props
  const [name, setName] = React.useState(user.name);

  function handleNameChange(event) {
    setName(event.target.value);
  }

  return (
    <li>
      {user.name}
      <input type="text" value={name} onChange={handleNameChange} />
      <button type="button" onClick={() => onUpdateName(user, name)}>
        Update
      </button>
    </li>
  );
}
  • Pitfalls
    • Not being passed - usually because it doesn’t get destructured.

Building a design system with Radix

Reference

  • Radix: Primitives, colors, icons.
  • Design system: Style guide, pattern library, component library.

This project is maintained by daryllxd