Apostrophe DOM classes

[Arturs Jansons]

I have noticed, that apostrophe has following DOM classes structure:

    .a-page

      .a-global-toolbar .a-ui

        .a-controls .a-ui

            .a-btn .icon

              .icon

      .a-wrapper

        .a-search

        .a-header

          .a-area

            .a-slots

        .a-nav .a-nav-main

          .a-nav-iten

            .a-nav-link

        .a-nav .a-nav-breadcrumb

        .a-content

          .a-area .a-area-body .a-normal

            .a-slots

              .a-slot

          .a-area .a-area-sidebar

            .a-slots

              .a-slot

      .a-footer-wrapper

        .a-footer

          .a-area

            .a-slots

              .a-slot

... and so on.
I want to know, which class is for what?

And why is so hard :)

for me better use inheritance for classes:
.page.home

  .area.header

  .area.sidebar

  .area.body

    .slot.header.reach-text

    .slot.body.mixed

      .slot.title.text

      .slot.illustration.image

      .slot.content.reach-text

    .slot.footer

  .area.footer