視認性が高いCSSコメント 書き方バリエーション

Sassを使う以前、CSSが長い1ファイルだった頃。

の記述をわかりやすくする目的で
CSSプロパティより長いコメントで区切っていた。

Sassを使うようになり、Project単位でファイル分割をするため、
エリア分割コメントを入れていない。
たまに使う機会があるので、書き方バリエーションをメモしておく。

コメント使い所

/*
#####################################################################  
 1 .header
 2 .contents
 3 .footer
 作業者：sato
#####################################################################
*/

CSSファイルの先頭に目次を入れる。
footerは3番目の位置に記載されているとわかる。

/*
#####################################################################  
 1 .header
#####################################################################
*/

Projectの先頭にコメントを入れて、範囲を目で見てわかりやすくする。

Project単位

CSSコメントバリエーション

/*
#####################################################################  
 Project
#####################################################################
*/

/*
*********************************************************************
 Project
*********************************************************************
*/

/*
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Project
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/

/*
/////////////////////////////////////////////////////////////////////
 Project 
/////////////////////////////////////////////////////////////////////
*/

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 Project 
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

CSSにコメントを吐き出したくない場合

このような記述も使える。

//コメント
////////////////// Project ///////////////////

参考サイト

【CSS】CSS のコメントの書き方 | バシャログ。
http://bashalog.c-brains.jp/07/12/20-142330.php

コメントの書き方｜CSSの基本｜CSS HappyLife ZERO
http://zero.css-happylife.com/basic/comment.shtml

【CSSの基本】コメントを誰でも簡単にする方法を解説 | CodeCampus
https://blog.codecamp.jp/css-comment

HTML/CSSのソースコードのきれいなコメントの書き方まとめ
https://www.webprofessional.jp/how-good-are-your-html-and-css-comments/

SCSSの3つのコメントスタイル - 眠る前に布団にはいろうか
http://d.hatena.ne.jp/nenjiru/20111115/scss_comment_style