前に勉強になった書き方みたいな記事書いたのですが、
明確にしてなかったので再掲
自分用メモに書いておくことにします。
※新米なので、あしからず.....
アンチパターンとは？？
やっていけないわけではないけど、やらない方がいいもの。
古い技術のままトレンドに混ざっているものが多く、もっといい書き方があるやーつ
id属性にスタイルが当てられている
# teat {
color: #fff;
padding: 1rem;
margin: 2rem;
}
基本的にidセレクタに当てるものはjsの処理などのみ。
勉強したてに本などを読んでいると、平気でidにスタイルを当てているがよくないと思います。
ここはclassを付与してスタイルを当てるだけでいいです。
結局レビューとかで指摘されあいとわからないけど、なんでidはダメなのかが書いてない。
これはidセレクタに当てたスタイルに対して後からスタイルを上書きできず、
当てたいスタイルが当たらなくなってしまうからです。
逆にjsではidで要素を取りに行く方がいいです。
話が若干それますが、document.getElementsByClassName('test')より、
document.getElementsById('test')の方が取得速度がはやくSEOにつながります。
！importantが使用されている
必殺技ですね。
!importantは一番優先度が高く、上に書かれたものからブラウザは解釈していくので、
急な仕様変更などが重なった際に!importantで指定した箇所の上書きにまた!importantを使用しなければならなくなります。
これが重なるともう手がつけられなくなり、記述内に本来一つの制限がある!importantが複数出現します。
div {
color: green!important;
}
.test {
color: blue!important;
}
.test__hoge {
color: red!important;
}
.test__moge {
color: blue;
}
.test__foo {
color: yellow!important;
}
.test__bar {
color: black!important;
}
そもそも!importantを使用しないCSS設計が望ましいです。
CSSバラバラ殺人事件
これよく見る気がします。
簡単な例として
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="header"></div>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
<div class="footer"></div>
</body>
</html>
.center{
font-size: 1.5rem;
}
.right {
padding: 1rem;
}
.header{
background-color: black;
}
.footer{
margin: auto;
}
.left{
display: flex;
}
流石にこんな分かりやすくはないですが、割とこんなのあります。
グルーピングしましょう。
/* css mainStyle */
/* */
/* */
/* */
/* header */
/* */
/* */
.header{
background-color: black;
}
/* left */
/* */
/* */
.left{
display: flex;
}
/* center */
/* */
/* */
.center{
font-size: 1.5rem;
}
/* right */
/* */
/* */
.right {
padding: 1rem;
}
/* footer */
/* */
/* */
.footer{
margin: auto;
}
基板の時点でグルーピングしておくと、可読性が上がるので
どこを修正したいのか、どこに書くのかが明確になります。
※適当に書いてるのでそもそもみたいな話は聞きたくないです.....
キラキラ命名
まずはキラキラ命名について。
要約しましたが、かっこいい命名になっちゃったやつとか、タグ名であるものを命名しているものですね。
/* かっこいいやつ */
.anotherSky{
font-size: 1.5rem;
}
/* タグ名にしちゃった */
.section{
padding: 1rem;
}
これに関してはケースバイケースなのですが、
リファクタした時や修正時、レビューや他人が見たときに分かりやすいものが良いかと思います。
かっこいい命名にしたくてそれっぽいのをつけたけど、もっとシンプルで良いし、
class="section"とかにしてしまうと、<section></section>が使い辛くなってしまうし、
理解できなくなってしまいます。
統一性のないもの
.mainBnr{
background-color: white;
font-size: 32px;
}
.main_Secondbnr{
background-color: #fff;
font-size: 2rem;
}
簡単に記載しましたが、ポイントとしては2点
・カラーネームとカラーコード等が入り混じっている
・命名規則が異なる
になります。
では1つ目、
カラーネームとカラーコード等が入り混じっているについて
※cssよりscssだから変数化しとるやろというツッコミは一旦Stay
ここはカラーだけではなく、フォントサイズの指定も含みますが、
・px > remに統一
↑主にレスポンシブ対応として。
・white > #fffに統一
↑なんでも良いけどcolor: #fff;の方がバイト数が少ない
こんな感じになります。
では2つ目、
命名規則が異なるについて
命名記法には以下の3つがあります。
| 記法名 | 例 | 備考 |
|---|---|---|
| スネークケース | example_case | すべて小文字で複合語のスペースをアンダースコアで区切る。 |
| キャメルケース | exampleCase | 先頭を小文字で書き始め、複合語のスペースをなくし要素の先頭は大文字にする。 |
| パスカルケース | ExampleCase | 先頭を大文字で書き始め、複合語のスペースをなくし要素の先頭は大文字にする。 |
一般的なのは、キャメルケースなのかなと思います。
また、BEM設計などとかぶってスネークケースが混同しがちなので
_は2個付ける派です。
例
sample_exampleCase > sample__exampleCase
最後に
長くなりましたが、いかがでしたでしょうか。
まだまだ拙い部分もありますが、参考にしていただければ幸いです。
※あとなんかあったかなぁ...色々書きたいけど紆余曲折するので、
また今度書きたいと思います。
ほな！