Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to CSS Architecture

Introduction to CSS Architecture

新卒社内勉強会(2015/6/4) の資料です

Masaaki Morishita

June 04, 2015
Tweet

More Decks by Masaaki Morishita

Other Decks in Programming

Transcript

  1. CSS is γϯϓϧ article h1 { font-size: 20px; padding-bottom: 5px;

    border-bottom: solid 1px #ccc; margin-bottom: 10px; }
  2. article h1 { font-size: 20px; padding-bottom: 5px; border-bottom: solid 1px

    #ccc; margin-bottom: 10px; } article h1 + p.lead { font-size: 14px; color: #ddd; line-height: 1.5; }
  3. article h1 { font-size: 20px; padding-bottom: 5px; border-bottom: solid 1px

    #ccc; margin-bottom: 10px; } article h1 + p.lead { font-size: 14px; color: #ddd; line-height: 1.5; } #header { }
  4. article h1 { font-size: 20px; padding-bottom: 5px; border-bottom: solid 1px

    #ccc; margin-bottom: 10px; } article h1 + p.lead { font-size: 14px; color: #ddd; line-height: 1.5; } #header { } #header > img#logo{ } ul > list.item { } .menu { } .menu .nav { } #sidebar { } #sidebar .widget { }
  5. #header { } #header > img#logo{ } ul > list.item

    { } #menu { } #menu .nav { } #sidebar { } #sidebar .widget { } body { } .container{ } .container > h2.title { } .col-md-5 { } .row .col-md-5 { } .landing > h1 { } .widget .title { } #sidebar > img#logo{ } ul > list#logo { } #article { } #article .title { } footer small { } footer small .info { }
  6. OOCSS • Object Oriented CSS (by Nicole Sullivan) • ʮߏ଄ͱݟͨ໨ͷ෼཭ʯ

    • ʮίϯςφͱίϯςϯπͷ෼཭ʯ • CSSઃܭͷϕʔεͱͳΔ֓೦ • ଟ͘ͷCSSϑϨʔϜϫʔΫͰ࠾༻
  7. OOCSS .btn { property: value; } /* Decoration */ .btn-danger

    { } .btn-success { } /* Layout */ .btn-large { } .btn-small { }
  8. Layout • ϖʔδΛΤϦΞ͝ͱʹ෼ׂ .l-header { margin-bottom: 20px; } .l-footer {

    border-top: 1px solid gray; } .l-main { float: left; width: 80%; }
  9. BEM

  10. BEM (Modifier) • Block ·ͨ͸ ElementͷόϦΤʔγϣϯ • SMACSSͰ͍͏StateͱTheme • ϋΠϑϯ2ͭ

    (--) Λ࢖͏͜ͱ͕ଟ͍ (MindBEMding) • Block—Modifier, Element--Modifier