最近、少し時間の余裕があったのか、面倒なことに目を瞑っているのか、好きなコーディングに時間をかけられるようになりました。（食後の15分とか、電車の中とかばかりですが…。）
でも、行ってけゴーで、コーティングを楽しむばかりでは良くありません。自らの備忘のため、どこかで誰かの役に立つかもしれないので、学習の蓄積を投稿して参ります。
と、もしかしたらコーディングに関しては初めてかもしれないので「所信表明」をいたしました。
今回の題材はCSSです。
私はたぶん、今ではすっかりCSS3でコーディングをしているものと思われます。断言を躊躇していまうのは、近頃のブラウザー のCSS3への対応状況がとてもよくなっているので、はたして以前のCSSがどうだったかなんて全く意識しなくなり、使えるものは遠慮なく利用する気分になっているからです。（言っている割には、たまに見たこともない記述に出会って学習不足を悔いていおります。）
CSS（Cascading Style Sheets）は、セレクタ（selector）という記述を利用して特定されたエレメント（Element）に対して、視覚的要件を割り当てること実現するプログラミング言語です。
そのセレクタの記述なんですが、場当たり的に記述していくとゴチャゴチャになっていく傾向にあります。後になってその乱麻を紐解いていくのは、大変な苦労を強いられます。特に一人でコーディングしていると、まあ、どこかで整理すれば良いと開発を進めてしまって、後でえらい目にあってしまいます。（あっています。）
チームで開発をしていると仕様書を起こしてから作業を始めるものですから、そんなでもないかもしれません。また、すでに手慣れた方には些細なことかもしれませんが、最近の開発の中で、ようやく自分なりに得るものがありましたので記事にいたします。
CSSのセレクタ記述はHTMLのコーディングに依存するものになります。よってまずはHTMLによる区分の推奨案です。
（１）タグ（Tag）の入れ子構成はそろえる。
当たり前のことですが、これは可能な限り徹底した方がよいです。HTML5になってから様々なラッピング用のタグが用意されましたので、それらをきっちり使うようにしましょう。難しいものではないので、調べればすぐに身につきます。
（２）classとidの指定は役割分担する。
これは人やチーム、開発案件にもよるやもしれません。私個人の場合は、class属性は分けるため、id属性は特定するために利用します。
タグはどうしても同じ名前が入れ子になるので、それらエレメントの性格や特徴を区分するためにclassを指定します。いろいろとあるのですが、たとえば「<article class=’static’」と「<article class=’dynamic’」のように静的に運用するのか、動的に運用するのか、それぞれのエレメントの性格付けを行います。
そして、idの指定は極力避けます。どうしてもidでなければならないとなったら記述します。（それでも、多くなってしまいますけどね。）
（３）ほかの属性（attribute）も積極的に利用する。
セレクタで「input[type=’file’]」のような参照が確実にできるようになりましたので、typeやnameなどの属性を記述して要領よく運用しましょう。
特にnameはJavascriptからの参照も可能ですから、仕様作成の際に検討すべきと考えます。私個人はテキストを運用するためにdirとnameを併用して記述してます。
つぎに、CSSのセレクタ記述です。HTMLの記述が整理されていれば自然に判りやすくて明示的な記述になる思います。上記HTMLのコーディングと対にした確認とサンプルです。
（１）私個人は、HTML5で代表？されるsectionやarticleなどだけでなく、あまり使われていない細かいタグも利用してます。そのセレクタの例です。
#ProcessingArea table caption {…}
#ProcessingArea table thead td {…}
fieldset.loadFile legend {…}
tableタグの要素であるcaptionやthead、tbody、tfootまでも利用してますし、form関係の要素であるfieldsetやlegendなども利用してます。
（２）classの指定にstaticとdynamicを利用した例です。
article.dynamic header form {…}
article.dynamic header form button {…}
article.dynamic header form button:hover {…}
article.static fieldset,
article.dynamic fieldset {…}
（３）属性セレクタや擬似クラスは相当に自由度が高くなってますので、困ったと思ったら、サクッと調べて利用すると便利です。その例です。
article.dynamic label input[type=’button’],
fieldset.loadFile input[name=’showSampleBtn’] {…}
article.dynamic fieldset:nth-last-child(1) {…}
article.dynamic form > label {…}
属性セレクタは正規表現の初歩的な知識があると理解しやすいです。
個人的には、これだけのことでCSSのソースがだいぶスッキリしてくれるようになりました。ここ最近に見つけた手法（自分なりのお約束）ですが、参考になれば幸いです。
今回の記述手法はページデザイン用に用意している「design.css」内で行われております。私の場合は、このCSSソースに先駆けて「default.css」というソースを読み込むようにしてます。それには、ブラウザーなどにすでに定められている指定を、自分が運用しやすいように初期化するための指定を記述してます。これはHTML5とCSS3が普及し始めた頃に見直しをして、以来、あまり改変もなくそのまま利用しております。そろそろ再検証が必要なのではないかと思っています。その話題はそのうちに。
JavascriptもES6（ECMAScript2015）が一般的になりつつあり、Web技術による開発が益々盛んになると期待してます。まだまだ、勉強が続けられると嬉しい反面、いつまで経っても成果につながらないと、年齢と共に不安もよぎります。そかさ。