CSSフレームワークとかをごちゃ混ぜにした汚いコードを、もうこれ以上みたくないのでとりあえず投稿…

基本思想

文書構造とデザインの分離を徹底し、サイトやアプリケーションを拡張できるように全てブロック単位で設計します。基本的に

CSS設計の実装は特定のフレームワーク等に依存せず、SASSを使って実装します。各プロパティーはできるだけ相対的な物を使用します。

HTML

どれだけアプリケーションが拡張されても、原則的に必ず1画面に1つ存在するような要素(グローバルヘッダー等)に、id属性を付与します。それ以外の要素には、ある程度の大きさを持つモジュールに対して、class属性を付与します。

CSS

汎用的なリセット用CSSを内包したCSSファイルを各ページ1つづつ作成します。リセット用以外のCSSはid属性,class属性を親としその子孫要素は全て親要素のid,class属性を基準としてスタイルを適用します。#global_header li aのようにするといいです。

適用例

example.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/example.css">
  <title>example.com</title>
</head>
<body>
  <header id=“global_header">
    <h1><a href="/"><img src="img/example.jpg" alt="example"></a></h1>
    <nav>
      <input type="checkbox" name="menu_open">
      <ul>
        <li><a href=“#">link1</a></li>
        <li><a href=“#">link2</a></li>
        <li><a href=“#">link3</a></li>
        <li><a href=“#">link4</a></li>
      </ul>
    </nav>
  </header>
<main>
  <h1>TEST<h1/>
</main>
</body>
</html>

/css/example.css

/*# リセット部分は省略 */
#global_header {
    position: fixed;
    top: 0;
    height: 2rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: #333333
}

#global_header + main {
    padding-top: 2rem;
    min-height: 100vh
}

#global_header h1 img {
    display: block;
    padding: 0.5rem;
    height: 2rem
}

#global_header ul li {
    float: left;
    margin: 0.2rem 0.5rem
}

#global_header ul li a{
    margin: 0;
    padding: 0;
    height: 1.6rem;
    font-family: Cochin-Bold;
    font-size: 1rem;
    color: #FFFFFF;
    background: none
}

main {
    display: flex;
    justify-content: center;
    align-items: center
}

main要素に対してidやclass要素が指定されていませんが、これはmainタグがHTMLの仕様上一つしか存在できないため、id属性を省略しているためです。そう言った省略できる部分はできるだけ省略するようにしてください。このようなCSSを書くと書き換えるのは困難になりますが、SASSを使用することで各種プロパティーを変数化したり、ネストが可能なため、あまり問題はないと思われます。

HTML/CSS設計

基本思想

HTML

CSS

適用例