Keys to Frontend Architecture

4c9a493357b17fb1ac818b3cfed6583a?s=47 Nima Izadi
January 22, 2013

Keys to Frontend Architecture

I try to give some keys to create great frontend architectures.
First, presenting some HTML basics.
Then introducing the notion of OOCSS.

4c9a493357b17fb1ac818b3cfed6583a?s=128

Nima Izadi

January 22, 2013
Tweet

Transcript

  1. KEYS TO FRONTEND ARCHITECTURE Some HTML and CSS going around

    here...
  2. Nima, frontend architect Freelance - Entrepreneur @Nima_Izadi OnTheRailsAgain

  3. None
  4. WEB You like building apps? But you’re more into backend

    than frontend?
  5. HTML CSS WEB

  6. First things first HTML Let’s try to be a little

    semantic
  7. HTML is not that simple If you think so, then

    check the specs (http://www.w3.org/TR/html5/) W3C Team, May 2011 Don’t make them work for nothing
  8. HTML elements There is not a bunch of them for

    nothing!
  9. Bad habit %div Lorem ipsum dolor sit amet, consectetur adipisicing

    elit, sed do eiusmod. %br %br Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  10. Good habit %p Lorem ipsum dolor sit amet, consectetur adipisicing

    elit, sed do eiusmod. %p Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  11. Bad habit %div#menu.menu %div.item Menu 1 %div.item Menu 2 ...

    %div#main-title.title Main title %div.paragraph <span class="bold">Lorem</span> ipsum <span class="small">dolor </span> sit amet, consectetur adipisicing elit, sed do eiusmod
  12. Good habit %nav %ul %li Menu 1 %li Menu 2

    %h1 Main title %p <em>Lorem</em> ipsum <small>dolor</small> sit amet, consectetur adipisicing elit, sed do eiusmod Basic HTML tags More semantic More maintainable
  13. Just to be clear Lorem ipsum dolor sit amet, consectetur

    adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <p>This is a paragraph</p> <h1>THIS IS A TITLE</h1> •Element A •Element B •Element C <ul> <li>This</li> <li>Is</li> <li>A</li> <li>List</li> </ul>
  14. Semantic? Maintainable?

  15. <input type="text"> <input type="submit"> Inputs <input type="radio"> <input type="checkbox"> <input

    type="file"> <input type="password"> Basic ones
  16. <input type="number"> Inputs Mobile optimized

  17. <input type="text" autocapitalize="none"> Inputs Mobile optimized

  18. Inputs Browser validations <input type="email">

  19. Inputs Default widgets <input type="date">

  20. Inputs Default widgets <input type="search"> Beautiful icon, isn’t it?

  21. And lot more... <input type="search"> <input type="email"> Inputs <input type="url">

    <input type="time"> <input type="color"> <input type="reset"> <input type="range"> <input type="tel">
  22. By the way <TABLE> IS FOR TABULAR DATA NOT FOR

    LAYOUT!
  23. Have a doubt? http://w3.org/TR http://W3Fools.com http://www.WebPlatform.org http://developer.mozilla.org/docs http://dev.opera.com

  24. Don’t be afraid CSS

  25. You might be used to DRY Object Oriented MVC Conventions

    Reusable Code Agile
  26. Y U NO Apply To CSS?!

  27. Maintainability Reusability

  28. Object Oriented CSS

  29. NOT PAGES! COMPONENTS THINK

  30. None
  31. Component

  32. Component Component

  33. Component Component Component

  34. Component Component Component Component

  35. Component Component Component Component Component

  36. Component Component Component Component Component Component

  37. structure Separate and SKIN

  38. <media class=”media”></media> Don’t rely on the semantics of HTML Structure

    VS SKIN <img class=”img”>
  39. .modal { margin: 1em; padding: 1em; width: auto; } A

    class for Structure A class for SKIN .brand { color: $brand_color; background... } Structure VS SKIN
  40. <div data-behavior="player" class="media"></div> Don't use classes for JavaScript Structure VS

    SKIN <div class="media player"></div> Instead of
  41. container Separate and content

  42. Container VS Content .an-object h2 .an-object h2.category h2 h2.category “An

    object should look the same no matter where you put it”
  43. Container VS Content h2 { ... }! ! ! !

    // General application header h2.category { ... } !// Category header that can be reused Describe your object instead of being too specific h2 { ... } .myObject h2 { ... }
  44. In practice

  45. CSS Frameworks Bootstrap

  46. I’M SEING BOOTSTRAP EVERYWHERE...

  47. CSS Frameworks This is an awesome example of what to

    do and how to do it!
  48. Variables Mixins Inheritance Nesting Use SASS Put some logic in

    your CSS!
  49. SASS How easily do you think they did that?

  50. Variables SASS $white! ! ! ! ! : #EFEFEF; $blue!!

    ! ! ! : #00A8DD; $green! ! ! ! ! : #7cb848 $brand_color ! : $blue;
  51. Variables SASS $white! ! ! ! ! : #EFEFEF; $blue!!

    ! ! ! : #00A8DD; $green! ! ! ! ! : #7cb848 $brand_color ! : $green; Change your app design instantly!
  52. Separate logic from CSS _config.scss // Typography $font_size: 12; $heading_1:

    46; $heading_2: 32; $heading_3: 28; $heading_4: 18; $heading_5: 16; $heading_6: 14; $line: $font-size * 1.5; // Etc.
  53. Use .classes, not #IDs Keep #IDs for JavaScript and be

    generic
  54. .namespace your objects

  55. Nesting you say?

  56. First attempt Nesting body { section form { .inline-group {

    label { display: inline-block; } } } } } It’s cool, but don’t overuse it! You don’t want to use !important in the future
  57. First attempt Nesting body { section form { .inline-group {

    label { display: inline-block; } } } } } It’s cool, but don’t overuse it! You don’t want to use !important in the future
  58. Generated output Nesting body section form .inline-group label { display:

    inline-block; }
  59. Really want to mimic? Indent. Nesting .search-panel { ... }

    .search-panel-header { ... } .search-panel-content { ... } .search-panel-label { ... }
  60. How do I organize my stylesheets?

  61. How you don’t do !"" css # !"" style.css (2483

    lines) Keeping all your CSS in one file is bad This hurts my eyes
  62. How you don’t do !"" css # !"" page_1.css #

    !"" page_2.css # !"" page_3.css # !"" page_4.css # !"" page_5.css Having one file per page is not better
  63. How you can do !"" css/ # !"" partials/ #

    # !"" base/! ! // HEADINGS, links, ... # # !"" generic/! // @mixins, resets, helpers, ... # # !"" objects/! // .buttons, .breadcrumbs, ... # !"" inuit.scss ! ! // Import all the partials! !"" _vars.scss ! ! ! // Did I mention it was the file for variables? !"" _config.scss ! !"" your-project.scss
  64. Inspirational sources Harry Roberts – Breaking Good Habits https://speakerdeck.com/u/csswizardry/p/breaking-good-habits-1 Harry

    Roberts – Big CSS https://speakerdeck.com/u/csswizardry/p/big-css-1 David Demaree – Designing the Hi-DPI Web https://speakerdeck.com/u/ddemaree/p/designing-the-hi-dpi-web Chris Coyer – Writing Better HTML & CSS https://speakerdeck.com/chriscoyier/writing-better-html-css
  65. Inspirational sources Dale Sande – Sass 3.2: Silent Classes https://speakerdeck.com/anotheruiguy/sass-32-silent-classes

    Dale Sande – Module design & UI Dev patterns https://speakerdeck.com/anotheruiguy/module-design-ui-dev-patterns Dale Sande – Clean out your Sass Junk-Drawer https://speakerdeck.com/anotheruiguy/clean-out-your-sass-junk-drawer Nicole Sullivan – What is Object Oriented CSS? http://www.slideshare.net/stubbornella/what-is-object-oriented-css
  66. NIMA IZADI @Nima_Izadi OnTheRailsAgain.com/Nima SpeakerDeck.com/nima