Help us understand the problem. What is going on with this article?

CSSを書くときに守るルール(自分用)

More than 1 year has passed since last update.

概要

僕は自分一人でコーディングが多い(チーム開発多分しない)のですが、先日自分が書いたcssを見て何がなんだかよくわからんかったので、ここらで一回自分なりのルールを決めて振り返ったときにわかりやすくしようと思い、この記事を書き始めました。

てことでルール書いていきます。

id, class名

btnやboxなどは最後に

<input type="text" class="name_textbox">
<button type="button" class="save_btn">

理由

最後を見ればその要素がなんなのかわかりやすくするため

単語の間は「_」で

<input type="text" class="name_textbox">
<button type="button" class="save_btn">

理由

選択時楽だから(「-」だと一括で選択されないエディターがある)

できる限り短いプロパティで書く

margin: 10px 20px 10px 20px;

上、左、下、右の順序

理由

冗長じゃ無くなる

プロパティの指定順を統一する

1.位置情報系(position, top, bottom, left, right, z-index, display, float 等)
2.レイアウト系(overflow, width, height, min-width, min-height, padding, margin 等)
3.文字系(font, line-height, letter-spacing, color, text-align 等)
4.背景・ボーダー(background, border 等)
5.その他(animation, transition 等)

http://tsudoi.org/css_rule/こちらの記事から拝借しました。

理由

振り返る際に分かりやすい

大まかなコメントを入れる

感覚的な文章ですが、大きなカテゴリごとにコメントを挿入し、振り返るときに分かりやすくする。

終わり

とりあえずこのくらいあげましたが、こここうした方がいいよとか、こういうルールおすすめとかあったらコメントいただきたいです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした