#Markup and Style

When writing style for Pages, Layouts, and Components, it is recommended to write in a 1:1 hierarchy with the markup.

For example, if you were to write some markup for a Page like this:

.top-section
  .left
    img(src="/some/image.png")
  .right
    h1 Welcome
    p Welcome to the website
    button Get Started
.features-section
  .feature
    h2 Some Feature
    p Some Description
  .feature
    h2 Another Feature
    p Another Description

You should write the style for the Page like this:

.top-section
  display grid
  grid-template-columns 1fr 1fr
  .left
    img
      width 400px
      height auto
  .right
    color gray
    h1
      font-size 24px
    p
      font-size 14px
    button
      padding 8px 12px
.features-section
  .feature
    color gray
    h2
      font-size 20px
    p
      font-size 12px

This allows you to very easily see exactly how the markup is structured just by looking at the style. This also means it's very easy to cascade styles without them conflicting when you implement responsiveness.