SwapSkills Build では、来週末からLESSの勉強会をシリーズで開催いたします。
なぜLESSを学ぶべきなのか、なぜシリーズにしたのか、どんな内容なのかを少しだけご紹介いたします。
なぜLESSを学ぶべきなのか
LESSの記述を学ぶことで単純に制作する時間が少なくなると言えます。2月に登壇していただいた斎藤さんの記事ではカラムの計算をLESSで行うことで数値を動かすことで簡単にカラムが出来上がるという記事を紹介していただきました。以下のようにLESSを勉強することでとっても効率よくサイトを制作することができるのです。
▼ご紹介いただいた記事▼
なぜシリーズにしたのか
１）LESSは１日では覚えられない！
LESSの記述方法なので、それに慣れるために何度も練習しなくては身に付きません。11月17日の初回を皮切りにシリーズで回数を重ねて勉強することで現場での利用方法も自然と勉強できるように構成しています。
２）記述方法を学ぶこと同じくらい、その背景の理解が重要になる
２月に一度開催したものは概要、基本的な使い方の事例を紹介させていただきました。
セミナー形式では知識は増えますがなかなか現場で使う段階になりません。実際のページではどのように使うべきなのか、など検討しながら進めていこうと考えています。
先ほどご紹介した斎藤さんのグリットでの計算もグリットシステムを理解して計算式を作成できる力がなければ効果的なLESSを記述することはできません。Buildではそれらの背景も簡単に含めてご紹介予定です。
３）現場で使える知識を知る必要がある
LESSをキチンと勉強するには記述方法と同じように重要なのが、CSSの綺麗な設計です。
事実、制作の現場では LESS, SaSSで納品されてコンパイル（CSSへ展開）したらぐちゃぐちゃなソースだったということがあると聞きます。
今回登壇いただく宇野さんが連載している技術評論社の記事にも記載「ネストの落とし穴」があるように、ネストして記述することでセレクタが長くなってしまいます。このようなことにならないよう書く方法を必要とします。
記述方法的に間違っていなくても展開した(コンパイルした)CSSのセレクタが無駄に長いとパフォーマンスも悪くなります。記述方法だけでなくCSSの設計上どのように構成すべきか？などを考えながらLESSを勉強できるようにと企画しています。
▼参考▼「LESS記法を身につける（初級編）」
http://gihyo.jp/design/serial/01/less/0002
記事内容抜粋
どんな内容なのか
今まで紹介したように、できるだけ現場で使うための考え方も同時に学べるように構成していく予定です。
OOCSSは知っていますか？
OOCSS（オブジェクト指向CSS）はご存知でしょうか？
クラスでCSS指定をオブジェクト型にするものです。ある意味class厨になり、Web標準の表現と構造を分離させるコンセプトから外れてしまいます。ですが、コンパイルされたCSSコードがWeb標準のコンセプトにハマっていればLESS内では記述することができると言えます。2回目以降の開催になりますが、OOCSSとLESSについても少し組み合わせた内容で行っていこうと思います。
