Examples

Start

Premier des quatres exemples qui est le support de notre refactoring. Il permet de mettre en évidence les problèmes que l'on rencontre en CSS :

  • Pas de convention de nommage
  • Des sélecteurs exotiques
  • Des problèmes avec les block de style qui définissent des composants graphiques et fonctionnels

Source : https://github.com/prenaudin/styleguidecss/blob/master/sass/start.scss

.User {
  width: 33.333%;
  text-align: center;
}

.Timeline {
  width: 66.667%;
}

.User, .Timeline {
  float: left;
  padding: 0 20px;
  box-sizing: border-box;
}

.User .container {
  border: 1px solid #DDDDDD;
  padding: 15px;
  border-radius: 3px;
}

.User .avatar img {
  width: 90px;
  height: 90px;
  margin-top: -45px;
  border-radius: 3px;
}

.User ul {
  list-style: none;
  text-align: left;
  margin: 0;
  padding: 0;
  font-size: 13px;
}

.Timeline > .container > .header {
  background-color: rgb(240,240,240);
  margin: -15px -15px 15px -15px;
  padding: 15px;
  border-bottom: 1px solid #DDDDDD;
}

.Timeline .container {
  border: 1px solid #DDDDDD;
  padding: 15px;
  border-radius: 3px;
}

.Timeline .avatar {
  float: left;
  margin-right: 10px;
}

.Timeline .message .header .avatar img {
  width: 32px;
  height: 32px;
  border-radius: 3px;
}

.Timeline .message .content {
  zoom: 1;
  overflow: hidden;
}

.Timeline .message .content p {
  margin: 0 0 10px 0;
}

.Timeline ul {
  list-style: none;
  text-align: left;
  margin: 0;
  padding: 0;
}

MC Hammer

  • Email: mchammer@gangsta.com
  • Address: Ghetto Blaster, 23 av.
  • Phone: You foolish chicken
Messages

  • MC Hammer - Yesterday, 8:01

    My-my-my-my music keeps me so hard makes me say oh my Lord Thank you for blessing me with a mind to rhyme and two hype feet

  • MC Hammer - Yesterday, 8:01

    My-my-my-my music keeps me so hard makes me say oh my Lord Thank you for blessing me with a mind to rhyme and two hype feet

  • MC Hammer - Yesterday, 8:01

    My-my-my-my music keeps me so hard makes me say oh my Lord Thank you for blessing me with a mind to rhyme and two hype feet

  <section class="start">
    <div class="User">
      <div class="container">
        <div class="avatar">
          <img src="../assets/images/avatar.png"/>
        </div>
        <div class="body">
          <h2>MC Hammer</h2>

          <ul class="informations">
            <li>
              <b>Email</b>: mchammer@gangsta.com
            </li>
            <li>
              <b>Address</b>: Ghetto Blaster, 23 av.
            </li>
            <li>
              <b>Phone</b>: You foolish chicken
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="Timeline">
      <div class="container">
        <div class="header">
          Messages
        </div>
        <div class="body">
          <ul class="messages">
            <li class="message">
              <div class="header">
                <div class="avatar">
                  <img src="../assets/images/avatar.png"/>
                </div>
              </div>
              <div class="content">
                <p><b>MC Hammer</b> <small>- Yesterday, 8:01</small></p>
                <p>My-my-my-my music keeps me so hard makes me say oh my Lord
                Thank you for blessing me with a mind to rhyme and two hype feet</p>
              </div>
            <li>
            <li class="message">
              <div class="header">
                <div class="avatar">
                  <img src="../assets/images/avatar.png"/>
                </div>
              </div>
              <div class="content">
                <p><b>MC Hammer</b> <small>- Yesterday, 8:01</small></p>
                <p>My-my-my-my music keeps me so hard makes me say oh my Lord
                Thank you for blessing me with a mind to rhyme and two hype feet</p>
              </div>
            <li>
            <li class="message">
              <div class="header">
                <div class="avatar">
                  <img src="../assets/images/avatar.png"/>
                </div>
              </div>
              <div class="content">
                <p><b>MC Hammer</b> <small>- Yesterday, 8:01</small></p>
                <p>My-my-my-my music keeps me so hard makes me say oh my Lord
                Thank you for blessing me with a mind to rhyme and two hype feet</p>
              </div>
            <li>
          </ul>
        </div>
      </div>
    </div>
  </section>

Refactoring

On réécrit notre exemple avec Sass :

  • On utilise des variables
  • On utilise l'indentation pour ne pas répéter les sélecteurs
  • Des mixins pour générer les vendors prefixes

Source : https://github.com/prenaudin/styleguidecss/blob/master/sass/refactoring.sass

  .user
    width: 33.333%
    text-align: center

  .timeline
    width: 66.667%

  .user, .timeline
    float: left
    padding: 0 20px
    box-sizing: border-box

  $gray: #DDDDDD
  $padding-default: 15px
  $avatar-size: 90px
  $avatar-size-small: 32px
  $border-radius-base: 3px
  $font-size-small: 13px

  .user
    .container
      border: 1px solid $gray
      padding: $padding-default
      border-radius: $border-radius-base

    .avatar img
      width: $avatar-size
      height: $avatar-size
      margin-top: - ($avatar-size/2)
      border-radius: $border-radius-base
      +box-shadow(0, 1px, 1px, rgba(0,0,0,.2))

    .informations
      font-size: $font-size-small

  .timeline
    > .container > .header
      background-color: rgb(240,240,240)
      margin: -$padding-default -$padding-default $padding-default -$padding-default
      padding: $padding-default
      border-bottom: 1px solid $gray

    .container
      border: 1px solid $gray
      padding: $padding-default
      border-radius: 3px

    .avatar
      float: left
      margin-right: 10px

    .message
      .header .avatar img
        width: $avatar-size-small
        height: $avatar-size-small
        border-radius: $border-radius-base

      .content
        zoom: 1
        overflow: hidden

        p
          margin: 0 0 10px 0

MC Hammer

  • Email: mchammer@gangsta.com
  • Address: Ghetto Blaster, 23 av.
  • Phone: You foolish chicken
Messages

  • MC Hammer - Yesterday, 8:01

    My-my-my-my music keeps me so hard makes me say oh my Lord Thank you for blessing me with a mind to rhyme and two hype feet

  • MC Hammer - Yesterday, 8:01

    My-my-my-my music keeps me so hard makes me say oh my Lord Thank you for blessing me with a mind to rhyme and two hype feet

  • MC Hammer - Yesterday, 8:01

    My-my-my-my music keeps me so hard makes me say oh my Lord Thank you for blessing me with a mind to rhyme and two hype feet

    <section class="refactoring">
      <div class="user">
        <div class="container">
          <div class="avatar">
            <img src="../assets/images/avatar.png"/>
          </div>
          <div class="body">
            <h2>MC Hammer</h2>

            <ul class="informations">
              <li>
                <b>Email</b>: mchammer@gangsta.com
              </li>
              <li>
                <b>Address</b>: Ghetto Blaster, 23 av.
              </li>
              <li>
                <b>Phone</b>: You foolish chicken
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="timeline">
        <div class="container">
          <div class="header">
            Messages
          </div>
          <div class="body">
            <ul class="messages">
              <li class="message">
                <div class="header">
                  <div class="avatar">
                    <img src="../assets/images/avatar.png"/>
                  </div>
                </div>
                <div class="content">
                  <p><b>MC Hammer</b> <small>- Yesterday, 8:01</small></p>
                  <p>My-my-my-my music keeps me so hard makes me say oh my Lord
                  Thank you for blessing me with a mind to rhyme and two hype feet</p>
                </div>
              <li>
              <li class="message">
                <div class="header">
                  <div class="avatar">
                    <img src="../assets/images/avatar.png"/>
                  </div>
                </div>
                <div class="content">
                  <p><b>MC Hammer</b> <small>- Yesterday, 8:01</small></p>
                  <p>My-my-my-my music keeps me so hard makes me say oh my Lord
                  Thank you for blessing me with a mind to rhyme and two hype feet</p>
                </div>
              <li>
              <li class="message">
                <div class="header">
                  <div class="avatar">
                    <img src="../assets/images/avatar.png"/>
                  </div>
                </div>
                <div class="content">
                  <p><b>MC Hammer</b> <small>- Yesterday, 8:01</small></p>
                  <p>My-my-my-my music keeps me so hard makes me say oh my Lord
                  Thank you for blessing me with a mind to rhyme and two hype feet</p>
                </div>
              <li>
            </ul>
          </div>
        </div>
      </div>
    </section>

Framework

Ici, on réécrit l'exemple avec Boostrap pour voir comment celui-ci normalise ce dont on a besoin. On sépare nos composants graphiques et fonctionnels. On réutilise Sass pour n'importer que les portions importantes de bootstrap.

Source : https://github.com/prenaudin/styleguidecss/blob/master/sass/framework.sass

  $font-family-sans-serif: 'Open Sans', 'sans-serif'
  font-family: $font-family-sans-serif

  $font-size-h2: 22px

  $gray: #DDDDDD
  $padding-default: 15px
  $avatar-size: 90px
  $avatar-size-small: 32px
  $border-radius-base: 3px
  $font-size-small: 13px

  // Bootrap variables import
  @import vendor/bootstrap-sass-twbs/assets/stylesheets/bootstrap/variables
  @import vendor/bootstrap-sass-twbs/assets/stylesheets/bootstrap/mixins

  // Reset and dependencies
  @import vendor/bootstrap-sass-twbs/assets/stylesheets/bootstrap/normalize

  // Core CSS
  @import vendor/bootstrap-sass-twbs/assets/stylesheets/bootstrap/scaffolding
  @import vendor/bootstrap-sass-twbs/assets/stylesheets/bootstrap/type
  @import vendor/bootstrap-sass-twbs/assets/stylesheets/bootstrap/code
  @import vendor/bootstrap-sass-twbs/assets/stylesheets/bootstrap/grid
  @import vendor/bootstrap-sass-twbs/assets/stylesheets/bootstrap/tables
  @import vendor/bootstrap-sass-twbs/assets/stylesheets/bootstrap/forms
  @import vendor/bootstrap-sass-twbs/assets/stylesheets/bootstrap/buttons

  @import vendor/bootstrap-sass-twbs/assets/stylesheets/bootstrap/panels
  @import vendor/bootstrap-sass-twbs/assets/stylesheets/bootstrap/utilities
  @import vendor/bootstrap-sass-twbs/assets/stylesheets/bootstrap/responsive-utilities
  @import vendor/bootstrap-sass-twbs/assets/stylesheets/bootstrap/media

  margin-top: $avatar-size/2

  ul
    margin: 0
    padding: 0

  ul li
    list-style-type: none

  h2
    margin-top: 5px

  .user-avatar-medium
    img
      width: $avatar-size-small
      height: $avatar-size-small
      border-radius: $border-radius-base

  .user-avatar-large
    img
      width: $avatar-size
      height: $avatar-size
      border-radius: 2*$border-radius-base

  .user-profile .user-avatar
    margin-top: -$avatar-size/2
Messages

  • MC Hammer - Yesterday, 8:01

    My-my-my-my music keeps me so hard makes me say oh my Lord Thank you for blessing me with a mind to rhyme and two hype feet

  • MC Hammer - Yesterday, 8:01

    My-my-my-my music keeps me so hard makes me say oh my Lord Thank you for blessing me with a mind to rhyme and two hype feet

  • MC Hammer - Yesterday, 8:01

    My-my-my-my music keeps me so hard makes me say oh my Lord Thank you for blessing me with a mind to rhyme and two hype feet

    <section class="row framework">
      <div class="col-xs-4">
        <div class="user-profile panel panel-default text-center">
          <div class="user-avatar user-avatar-large">
            <img src="../assets/images/avatar.png"/>
          </div>
          <div class="panel-body">
            <h2><b>MC Hammer</b></h2>

            <ul class="user-informations small text-left">
              <li>
                <b>Email</b>: mchammer@gangsta.com
              </li>
              <li>
                <b>Address</b>: Ghetto Blaster, 23 av.
              </li>
              <li>
                <b>Phone</b>: You foolish chicken
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-xs-8">
        <div class="panel panel-default">
          <div class="panel-heading">
            Messages
          </div>
          <div class="panel-body">
            <ul class="messages">
              <li class="message media">
                <div class="message-header pull-left">
                  <div class="user-avatar user-avatar-medium">
                    <img src="../assets/images/avatar.png"/>
                  </div>
                </div>
                <div class="message-content media-body">
                  <p><b>MC Hammer</b> <small>- Yesterday, 8:01</small></p>
                  <p>My-my-my-my music keeps me so hard makes me say oh my Lord
                  Thank you for blessing me with a mind to rhyme and two hype feet</p>
                </div>
              <li>
              <li class="message media">
                <div class="message-header pull-left">
                  <div class="user-avatar user-avatar-medium">
                    <img src="../assets/images/avatar.png"/>
                  </div>
                </div>
                <div class="message-content media-body">
                  <p><b>MC Hammer</b> <small>- Yesterday, 8:01</small></p>
                  <p>My-my-my-my music keeps me so hard makes me say oh my Lord
                  Thank you for blessing me with a mind to rhyme and two hype feet</p>
                </div>
              <li>
              <li class="message media">
                <div class="message-header pull-left">
                  <div class="user-avatar user-avatar-medium">
                    <img src="../assets/images/avatar.png"/>
                  </div>
                </div>
                <div class="message-content media-body">
                  <p><b>MC Hammer</b> <small>- Yesterday, 8:01</small></p>
                  <p>My-my-my-my music keeps me so hard makes me say oh my Lord
                  Thank you for blessing me with a mind to rhyme and two hype feet</p>
                </div>
              <li>
            </ul>
          </div>
        </div>
      </div>
    </section>

Final

On fait un peu de ménage, on remets tout ça dans l'ordre pour faire la version finale. On n'utilise plus de framework mais on implémente les conventions :

  • u-utilities : pour faire un utilitaire
  • is-modifier : pour modifier un block dans un certain état
  • .block-element--modifier : pour spécifier une variation
  • .js-property : pour une classe réservée au javascript

Source : https://github.com/prenaudin/styleguidecss/blob/master/sass/final.sass

  $font-size-small : 12px
  $font-size-base  : 16px
  $font-size-large : 22px

  $color-dark    : rgb(51,51,51)
  $color-gray    : rgb(135,136,136)
  $color-lighter : rgb(240,240,240)
  $color-white   : rgb(255,255,255)

  $margin-treshold     : 5px
  $margin-bottom-block : 3 * $margin-treshold
  $margin-spacing-jumbo: 3 * $margin-bottom-block

  $border-radius-base  : 3px
  $border-radius-large : 6px

  $size-avatar-medium : 32px
  $size-avatar-large  : 90px

  =square($size)
    width: $size
    height: $size


  margin-top: $margin-spacing-jumbo
  font-family: "Open Sans", sans-serif
  line-height: 1.6em
  font-size: $font-size-base

  *
    box-sizing: border-box

  ul
    margin: 0
    padding: 0

  ul li
    list-style-type: none

  h2
    margin: 0
    font-size: $font-size-large
    margin-top: $margin-treshold
    margin-bottom: $margin-bottom-block

  p
    margin: 0 0 $margin-treshold 0

  .col-4
    width: 33.3333%

  .col-8
    width: 66.6667%

  .col-4,
  .col-8
    float: left
    padding-left: $margin-bottom-block
    padding-right: $margin-bottom-block

  .panel
    border: 1px solid rgba(0,0,0,.15)
    border-radius: $border-radius-base
    background-color: $color-white

  .panel-header
    background-color: $color-lighter
    padding: $margin-bottom-block

  .panel-body
    padding: $margin-bottom-block

  .u-pull-left
    float: left !important

  .u-pull-right
    float: right !important

  .u-media
    margin-top: $margin-bottom-block

    &:first-child
      margin-top: 0

    > .u-pull-left
      margin-right: $margin-bottom-block

  .u-media-body,
  .u-media
    overflow: hidden
    zoom: 1

  small,
  .u-small
    font-size: 85%

  .user-profile
    text-align: center
    .user-avatar
      margin-top: -( $size-avatar-large / 2 )

  .user-informations
    text-align: left

  .user-avatar--medium
    img
      +square($size-avatar-medium)
      border-radius: $border-radius-base

  .user-avatar--large
    img
      +square($size-avatar-large)
      border-radius: $border-radius-large
Messages

  • MC Hammer - Yesterday, 8:01

    My-my-my-my music keeps me so hard makes me say oh my Lord Thank you for blessing me with a mind to rhyme and two hype feet

  • MC Hammer - Yesterday, 8:01

    My-my-my-my music keeps me so hard makes me say oh my Lord Thank you for blessing me with a mind to rhyme and two hype feet

  • MC Hammer - Yesterday, 8:01

    My-my-my-my music keeps me so hard makes me say oh my Lord Thank you for blessing me with a mind to rhyme and two hype feet

    <section class="final">
      <div class="user col-4">
        <div class="user-profile panel">
          <div class="user-avatar user-avatar--large">
            <img src="../assets/images/avatar.png"/>
          </div>
          <div class="panel-body">
            <h2>MC Hammer</h2>

            <ul class="user-informations u-small">
              <li>
                <b>Email</b>: mchammer@gangsta.com
              </li>
              <li>
                <b>Address</b>: Ghetto Blaster, 23 av.
              </li>
              <li>
                <b>Phone</b>: You foolish chicken
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-8">
        <div class="panel">
          <div class="panel-header">
            Messages
          </div>
          <div class="panel-body">
            <ul class="messages">
              <li class="message u-media">
                <div class="message-header u-pull-left">
                  <div class="user-avatar user-avatar--medium">
                    <img src="../assets/images/avatar.png"/>
                  </div>
                </div>
                <div class="message-content u-media-body">
                  <p><b>MC Hammer</b> <small>- Yesterday, 8:01</small></p>
                  <p>My-my-my-my music keeps me so hard makes me say oh my Lord
                  Thank you for blessing me with a mind to rhyme and two hype feet</p>
                </div>
              <li>
              <li class="message u-media">
                <div class="message-header u-pull-left">
                  <div class="user-avatar user-avatar--medium">
                    <img src="../assets/images/avatar.png"/>
                  </div>
                </div>
                <div class="message-content u-media-body">
                  <p><b>MC Hammer</b> <small>- Yesterday, 8:01</small></p>
                  <p>My-my-my-my music keeps me so hard makes me say oh my Lord
                  Thank you for blessing me with a mind to rhyme and two hype feet</p>
                </div>
              <li>
              <li class="message u-media">
                <div class="message-header u-pull-left">
                  <div class="user-avatar user-avatar--medium">
                    <img src="../assets/images/avatar.png"/>
                  </div>
                </div>
                <div class="message-content u-media-body">
                  <p><b>MC Hammer</b> <small>- Yesterday, 8:01</small></p>
                  <p>My-my-my-my music keeps me so hard makes me say oh my Lord
                  Thank you for blessing me with a mind to rhyme and two hype feet</p>
                </div>
              <li>
            </ul>
          </div>
        </div>
      </div>
    </section>