Manutenção e Refatoração de CSS

5a90a67fa1a92e6a4b605cfd8da5e375?s=47 Lucas Mazza
November 23, 2013

Manutenção e Refatoração de CSS

5a90a67fa1a92e6a4b605cfd8da5e375?s=128

Lucas Mazza

November 23, 2013
Tweet

Transcript

  1. 4.
  2. 5.
  3. 6.
  4. 12.
  5. 22.
  6. 24.
  7. 29.

    Código Código Código Código Código Código Código Código Código Código

    Código Código Código Código Código Código Código Código
  8. 40.

    .product-list { } .product-list > li { } .product-list li.highlight

    { } .product-list { } .product-list-item { } .higlighted-list-item { } ✗ ✓
  9. 44.

    <!-- app/views/events/_calendar.html.erb --> <div class='calendar'> <h2 class='calendar-heading'> <%= calendar.month %>

    </h2> ! <ul> <% calendar.days.each do |day| %> <li class='calendar-slot'><%= day %></li> <% end %> </ul> </div> ERB
  10. 78.

    // ============================================================== // Profile card to display the players in

    the leaderboard. // // Supports an avatar wrapper, follower count and the user name. // Note that the 'avatar' and the 'follower count' are wrapped // inside an 'a' tag so everything will be clickable. Descrição
  11. 79.

    // <div class='profile-card'> // <a href='#' class='profile-card-avatar'> // <img class='profile-card-avatar'

    width='120' height='120'> // <span class='profile-card-follower-count'>13220</span> // <p class='profile-card-star'>@HackerNewsOnion</p> // </a> // <a href='#' class='profile-card-name'>Hacker News Onion</a> // </div> // ============================================================== Exemplos
  12. 80.

    Modificadores // ============================================================= // A full fledged replacement for '<select>'

    using a list of // unordered items. // // Modifiers: // // :hover - Subtle hover highlight. // .expanded - Expanded state, displaying the choices list. // .right-aligned - Aligns the 'toggle' icon to the right. // ============================================================= ! // Expanded state for the 'combo-selector'. // ============================================================== .combo-selector.expanded { }
  13. 83.
  14. 84.
  15. 92.

    Kent Beck @ Smalltalk Best Practice Patterns “Code doesn't lie.

    If you're not listening, you won't hear the truths it tells.”
  16. 95.
  17. 96.