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.

Transcript

1. KEYS TO FRONTEND ARCHITECTURE Some HTML and CSS going around here...
2. Nima, frontend architect Freelance - Entrepreneur @Nima_Izadi OnTheRailsAgain
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
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