いつも書くCSS 【チートシート】

html{
    font-size: 62.5%;
    box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit; /* 全ての要素でhtmlのbox-sizingを継承 */
}

body {
    margin: 0;
    padding: 0;
}

.fx-row{
    display: flex;
    flex-direction: row;
}

.fx-row-center{
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
}

.fx-col{
    display: flex;
    flex-direction: column;
}

.fx-col-center{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.h100{
    height: 100%;
}

.w100{
    width: 100%;
}

.border{
    border: 1px solid black;
}

a{
    text-decoration: none;
    color: #007bff; /* 色は好みで換えてください。 */
}

a:hover {
    color: #0056b3;
    text-decoration: underline; /* 色は好みで換えてください。 */
  }

意図

web製作していて、いつも使うcssをまとめました。
HTMLやJSXのクラス名を指定してもらえば使える感じですね。
デザインに左右されず、汎用性高く使うであろうコードをまとめてみました。
自分がweb作り始めるときに、index.css等の適当なファイル名つけて使いまわしてます。

個人的な感想

• Taillandとかbootstrapとかの導入考えたことありますが、融通効かなそうだなと。今はSCSSを書いてます。
• コードスニペットていうのもあるみたいですけど、なんか面倒くさそうでした（コードまとめつくってコピペでファイルつくればいいやん）。
• RY原則で、複雑になりすぎない程度にコード量は減らしたいですから、その中でもとくにデフォで使い回すのはある。
  • Qiitaや他で調べてもそういうのまとめているサイトなかったので、まとめてみました（今後に自分が開発するときのセッティングの為にもなりますし）。

コメントどうぞ

こういうCSSをまとめたやつのこと、何て言うんでしたっけ？
素人なので、不足点あれば指摘頂きたいです。