Block

Element

Modifler

<Badge>Default</Badge>
<Badge status="primary">Primary</Badge>
<Badge status="important">Important</Badge>

Block – Component

Modifier – modifies view

Elements

Elements

Unnecessary coupling!

Elements

<Question 
    css={[marginTop(2.4)]} 
    message={message} 
/>

Positioning is host component's responsibility

Elements

<Question 
    css={[marginTop(2.4)]} 
    message={message} 
/>

 - margin-*

 - z-index

 - width/height

 - top/left/right/bottom

 - align-self/grid-column/grid-row

Modifier?

Or new block/component?

export const iconFromSvg = <T>(
  icon: React.ComponentType<T>,
  defaults: { fill?: string; cursor?: string } = {}
) =>
  styledIcon(icon)([
    (props: Props) => [
      when(
        !props.large && !props.extraLarge,
        props.isPatientApp
          ? squareSizeVH(VHSize.standard)
          : squareSize(PXSize.standard)
      ),
      when(
        props.large,
        props.isPatientApp
          ? squareSizeVH(VHSize.large)
          : squareSize(PXSize.large)
      ),
      when(
        props.extraLarge,
        props.isPatientApp
          ? squareSizeVH(VHSize.extraLarge)
          : squareSize(PXSize.extraLarge)
      ),

CSS Grids

and standardised grid systems

BEM

By Sergey Protko

BEM

  • 66

More from Sergey Protko