Overriding CSS file in a layout

Help
4

How I would go about this issue is by using what I call layout-ids.

My base layout would contain body element tagged with the page’s layout-name which will then be referenced in the CSS.

<!-- _layouts/default.html -->

<!DOCTYPE html>
<html>
  {% include head.html %}
  <body id="{{ page.layout }}">
    {{ content }}
  </body>
</html>

Now when a page uses a layout that inherits from this base layout, body element will be tagged accordingly.

e.g about.html generated with a layout called page will have the markup as:

<!DOCTYPE html>
<html>
  <head>
    <title>About</title>
  </head>
  <body id="page">
    <div class="box">
      Content from <code>about.md</code>
    </div>
  </body>
</html>

Now in my stylesheets, I can style with greater control

.box { width: 300px; padding: 15px; }
#page .box { font-weight: 700; background-color: #cdcdcd; }
#post .box { color: #454545; background-color: #eaeaea; }