Theory of good HTML and CSS

Before you start coding, learn about some rules, which empowers the conception of Fronthack. These rules are general and framework agnostic. Fronthack gathers them together.

Sass

Maybe not rule at all, Sass is the most minimalistic way of writing CSS. It is a preprocessor, syntax, which is compiled later to real CSS. Preprocessors supplies you with variables, mixins and more stuff, that brings writing of stylesheets closer to programming.

BEM & SMACSS

Fronthack lays on BEM - an approach in writing CSS code, which is about keeping specific naming convention. Make sure that BEM is understandable to you, before continue.

Fronthack is also inspired by SMACSS approach (shorthand of Simple, Modular Architecture for CSS). It is mainly about separating the interface into small components - a small blocks, that are like a LEGO bricks. In addition, these bricks are divided into three groups: plain HTML tags, components itself and layout components. You will find exactly this apportionment in Sass directory.

4 types of classes and no more

As a result of above, any CSS class bellongs to one of the following collections:

  • Component classes - a name of the component, it’s element or modifier. Examples: .dropdown, .vertical-nav__link, .list-item--condensed.
  • Layout classes - all elements that are more about being a section, which are too general to be a component. They usually contains styling of the layout, background, margins and paddings. All of these has layout prefix. Examples: .layout-header, .layout-dark-section, .layout-footer.
  • Helper classes - sometimes some elements requires so few styling, that creating a component would be an overkill. If you are not sure, where given properties should go, create a helper class. Examples: .text-center, _.hidden-xs, _.clearfix.
  • Containers - one of the helper classes is so important, that it deserves a special category and it is a .container. It’s purpose is to give a page content maximal width, center it horizontally on wider resolutions and add side paddings on mobile resolutions. Sometimes there is a need to create additional containers of another widths. Examples: .container-wide, .container-narrow.

No for grid!

You may know HTML grid system from Bootstrap. It allows to build responsive layout with help of column classes (.col-xs-12, .col.sm-6, .col-md-12). Do not do that! Define layouts using layout classes. Role of HTML is keeping a structure of the document. Is the CSS responsibility to store a visual appearance. Secondly, since we have a Flexbox and a CSS Grid, defining a layout in CSS gives much bigger capabilities. Not to mention that web designers are rarely keeping the 12-column grid correctly. Below there is an example of a layout defined by Flexbox instead of HTML grid. Let’s take an example of a standard page content with a sidebar of 300px width:

HTML

<div class="layout-content">
  <div class="layout-content__sidebar"></div>
  <div class="layout-content__main"></div>
</div>

Sass

.layout-content
  display: flex

.layout-content__sidebar
  flex: 0 0 300px
  margin-right: 60px
  
.layout-content__main
  flex: 1

Flexbox is a very powerful ally and it is worth making friends with it.

Styling mobile first

So in a way, that that properties by default applies for phones, afterwards for tablets, desktops etc. Let’s expand the example above with a responsiveness, which can be achieved by using a +breakpoint mixin, widely known from Bootstrap. By default, elements will appear one after another. On tablets, sidebar will jump to a side and on desktop devices it will gain bigger margins:

Sass

.layout-content
  +breakpoint(tablet)
    display: flex

.layout-content__sidebar
  +breakpoint(tablet)
    flex: 0 0 200px
    margin-right: 30px
  +breakpoint(desktop)
    flex: 0 0 300px
    margin-right: 60px

.layout-content__main
  +breakpoint(tablet)
    flex: 1


Improve this page