チーム開発 カテゴリ別商品一覧ページ CSS

サーバサイドの実装が完了したので、CSSの調整に入りました。

作業内容

htmlで繰り返し処理を使用している箇所のCSSに苦労しました。
コードを書きながらだとこんがらがってしまったので、紙で整理をしてから作業をしました。

html

// リンクリスト
    - if @category_links.present?
      .categories__links
        - @category_links.each do |category|
          .categories__links__link
            = link_to category.name, category_path(category)

躓き

clearfix

リストを2列で表示しようとfloat: left;を使用していましたが、
それが原因で他要素が回り込んでしまっていることに気づかずハマってしまいました。
ずっとエディタを行ったりきたりしていたので、もっとブラウザの検証を使ってじっくり確認するべきでした。

ハマってしまった時に、仮説を立てて建設的に一つ一つ解決していくことはできるようになってきたのですが、
いくつか仮説を立てずに一つの仮説に固執してしまっているところがあるので（しかもまだアタリをつけるのが下手）、
意識して改善していきたいと思います。

変数をidにする

下記のように、ページ上部にアンカーリンクを作成し、同じカテゴリーのタイトルに飛ぶようにしたのですが、
idを変数で動的に命名するのに苦労してしまいました。

= link_to "#{parent.name}", "#category_#{parent.id}"

できてしまえば簡単でした汗
最初はid名が##{parent.id}かな？？というところからスタートして
hamlのドキュメントを読んで、この書き方ならいけるか..と試行錯誤しました。
こういう場面でもっと高速に解決できるように慣れていきたいです。