Fàilte mo charaidean

Welcome my friends

Feasgar Math

Good afternoon

Is mise Cory

My name is Cory

agus tha mi ag ionsachadh Gàidhlig

and I am learning Scottish Gaelic

agus a-nis, tha thu cuideachd!

and now, you are too!

agus fàilte gu...

And welcome to...

The
Miseducation

of CSS

by cory brown

Who's this guy?

  • No one of consequence
  • Started by writting HTML emails (😰)
  • Software engineering (mostly front end) for 15 years
    • Isagenix
    • NatGeo
    • Church of Jesus Christ of Latter-Day Saints
    • LeisureLink
    • Jane
    • Nav
    • Facebook
    • Aumni (a JP Morgan company)
    • Voze

CSS

am i right?!

Text

OOCSS
BEM
SMACSS

SUITCSS
AtomicCSS
Bootstrap
Tailwind

CSS is likely not what you think it is.

Behavior

Style

Structure

JavaScript

CSS

HTML

<web-components />

<React />

<vue-components />

<ng-components />

.object

.object-extended

.block

.block__element

.block--modifier

styled-components

jss

emotion

glamor

aphrodite

Sass

CSS Variables

classnames

?

!

Behavior

Style

Structure

JavaScript

CSS

HTML

<figure style="display: none;">
  <img src="https://fillmurray.com/400/600" alt="A beautiful Bill Murray placeholder image" />
  <figcaption>
    A beautiful Bill Murray placeholder image
  </figcaption>
</figure>
        style="display: none;"

Behavior

Style

Structure

JavaScript

CSS

HTML

HTML

CSS

visual

Structure

HTML

semantic

While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out.

!

<Grid />

<Flex />

<Pull direction="left" />

Layout components lead to anger...

The inevitable end of layout components is this API...

<div style="/* Whatever* CSS you want */">

Elise Hein

Fighting inter-component HTML bloat

<Columns style={ { height: "100vh" } }>
  <Column as="nav">Navigation</Column>
  <Column as="main">Main content</Column>
</Columns>

Sebastian Weber

CSS lobotomized owl selector: A modern guide

article > * + * { 
  margin: 1em 0;
}

It also reinforces patterns that separate concerns because the actual UI components are layout-agnostic and don’t have to care where they are used. This is the job of the container element

Components style themselves, and position their immediate children.

-Me

Position is ALWAYS* contextual

?

const Button = () => (
  <button>
    The only content you could possibly need.
  </button>
);
const Button = ({ children }) => (
  <button>
    {children}
  </button>
);
const Button = style(({ children, className }) => (
  <button className={className}>
    {children}
  </button>
))`
  border: none;
  border-radius: 4px;
  background-color: rebeccapurple;
  color: lavender;
  padding: 1em;

  margin: 2rem;
`;

const Menu = styled(({ className }) => (
  <menu className={className}>
    <Button>Pick Me!</Button>
    <Button>No, Pick Me!</Button>
  </menu>
))`
  background: #eee;
`
const Button = style(({ children, className }) => (



))`






  margin: 2rem;
`;
const Button = style(({ children, className }) => (
  <button className={className}>
    {children}
  </button>
))`
  border: none;
  border-radius: 4px;
  background-color: rebeccapurple;
  color: lavender;
  padding: 1em;
`;

const Menu = styled(({ className }) => (
  <menu className={className}>
    <Button>Pick Me!</Button>
    <Button>No, Pick Me!</Button>
  </menu>
))`
  background: #eee;
  display: flex;
  
  & > ${Button}:last-child {
    margin-left: auto;
  }
`;












const Menu = styled(({ className }) => (




))`



  & > ${Button}:last-child {
    margin-left: auto;
  }
`;

Style

Position

From "CSS Box Model" by Nicha Jutasirivongse

Pop Quiz

Property

Style/Position

color

style 

padding

style 

margin

position

border

style 

display

it depends

flex

position

z-index

position

width/height

position 

.component {

 

 

 

 

}

display: grid;

gap: 1em;

.component {

 

 

 

 

 

}

& > .component-part {

 

}

margin: auto;

& > 

.component {

 

 

 

 

 


}

& > .component-part {

 


}

height: clamp(6rem, 10vh, 10rem);

const Modal = styled(({ className, children}) => {

  const handleClose = () => { ... }

  return (

    <section className={className}>
      <Button onClick={handleClose}>X</Button>

      {children}

    </section>

  )

})`
  position: fixed;

  & > ${Button}:first-child {

    position: absolute;
    top: 0;
    right: 0;  

  }

`;

const Modal = styled(({ className, children}) => {

  const handleClose = () => { ... }

  return (

    <section className={className}>
      <button onClick={handleClose}>X</button>

      {children}

    </section>

  )

})`
  position: fixed;

  & > ${Button}:first-child {

    position: absolute;
    top: 0;
    right: 0;  

  }

`;

const Modal = styled(({ className, children}) => {

  const handleClose = () => { ... }

  return (

    <section className={className}>
      <button onClick={handleClose}>X</button>

      {children}

    </section>

  )

})`
  position: fixed;

  & > ${CloseButton} {

    position: absolute;
    top: 0;
    right: 0;  

  }

`;

Components style themselves, and
position their immediate children.

-Me

Anything that affects only the border-box inward, is style. 

Everything else is position.

-Also Me

Layout components solve the wrong problem.

-Still Me

Questions?

Bonus Content

Components style themselves, and
position their immediate children.

-Me

Components style themselves, and
apply context to their immediate children.

-Me

Position is ALWAYS contextual

?

Style is  OCCASIONALLY contextual

Never define positional properties on a component directly

Allow for style rules to be overridden

const Button = styled(({ children, ...props }) => (

    <button {...props}>{children}</button>

 )`

  color: blue;

`;

const Nav = styled(({ className, children}) => (

    <nav className={className}>
      <Button onClick={handleLogin}>Log in</Button>

    </nav>

  )

})`

  background: black;

  & > ${Button} {

    color: white;

  }

`;

Tapadh leibh!

Thank you!

Me online

Links