OOSass architecture for RoR apps.

Transcript

1. OOScss architecture for Rails apps. My proposition.
2. Dawid Woźniak netguru front-end / rails dev @dawidwu dawid@plaind.pl / dawid.wozniak@netguru.pl
3. We've been struggling to find a best way to bootsrap an application and redesign it in further phase.
4. How many of you write front-end code?
5. How many of you use Bootstrap for that?
6. //application.scss /* *=require_self *=require_tree */ @import "bootstrap"; ... Looks familiar? |- stylesheets |-application.scss +-controllers | +-/admin/* | |- main.scss | +- controller.scss | ...
7. How many of you use it for a client work?
8. Is it bad?
9. NO* *if you're OK with it's look and feel. *if you're not tired of the whole Internet looking the same (or at least 90% of open source projects) *if you do it for prototyping. *if you do it for fast bootstraping project for a client *you have a well explained documentation (more less) ...
10. Have you ever tried to build a custom design/framework on top of a Bootstrap?
11. Let me show you some numbers: bootstrap: 266 KB and ~6700 lines of css + responsive: 320 KB and ~8200 lines of css + overrides: 362 KB and ~9200 lines of css + custom comp.: 445 KB and ~11000 lines of code + site specific: 556 KB and ~13780 lines of code
12. 556KB for a production css NOT BAD AT ALL. so we're good right?
13. NO!* *have you seen the markup? *have you seen how much overriding you have to do? *are you sure your devs understand Bootstrap? *we haven't styled 100screens (I won't tell you how many of them we covered ;-)
14. So what should I do when the designs come from the creative agency?
15. Bootstrap
16. Example 1. - what's wrong with this code?
17. Example 1. - what's wrong with this code? .span9 { width: 740px; }
18. My reaction was like:
19. WHY!? let's correct this code.
20. Example 2. - what's wrong with this code?
21. Example 2. - what's wrong with this code? - it won't fit into the row because of the .well class
22. Example 2. - what's wrong with this code? - it won't fit into the row because of the .well class - that's why the dev overrided span9 for that view and used span2 for the sidebar previously
23. Example 2. - what's wrong with this code? - it won't fit into the row because of the .well class - that's why the dev overrided span9 for that view and used span2 for the sidebar previously
24. Fun Fun Fun
25. Example 3. - what's wrong with this code?
26. Example 3. - what's wrong with this code? - we dropped the well class to fit into the grid - that's not what we want
27. Example 4. - what's wrong with this code? .well { box-sizing: border-box; }
28. Example 4. - what's wrong with this code? .well { box-sizing: border-box; } - we have to override default .well box-model
29. Example 4. - what's wrong with this code? .well { box-sizing: border-box; } - we have to override default .well box-model - aaaand we haven't even reached the fluid grid yet
30. Do you really think you know how to use Bootstrap?
31. Do you really think you know how to use Bootstrap? Are you sure it enforces some conventions?
32. Do you really think you know how to use Bootstrap? Are you sure it enforces some conventions? Do you really think you know it that good to build something on top of it?
33. Do you really think you know how to use Bootstrap? Are you sure it enforces some conventions? Do you really think you know it that good to build something on top of it? Are you sure it's easy for your devs to understand it?
34. Do you really think you know how to use Bootstrap? Are you sure it enforces some conventions? Do you really think you know it that good to build something on top of it? Are you sure it's easy for your devs to understand it? Are you sure it's easy for your devs to understand components build on top of it?
36. How this markup should look like?
37. Have you ever seen something like this in ror app? .users { &.show { padding-top: 0; header { position: fixed; z-index: 10; width: 100%; } nav { background: #fff; box-shadow: 0px 2px 15px 2px rgba(80, 80, 80, 1); position: relative; height: 20px; ul { padding-top: 10px; } } .top_container { background: image-url("controllers/preview/upper_bar_bg.png") background-size: cover; height: 6%;
38. Have you ever seen something like this? .logo_container { float: left; position:relative; text-indent: -99999px; z-index: 10; top: 0px; height: 10%; padding-top: 5px; a { h1 { background: image-url("controllers/preview/Logo_white.png") no-repeat top center; height: 86px; width: 95px; margin: 5px 26px 0px 2px; } } }
39. Why this is bad? - it's nested to the infinity - it's styled by the elements selectors - sizes mixed with theme ...
40. OOCSS principles: - identify reusable objects - be semantic w/HTML - minimize selectors (you know how browser reads selectors?) - extend classes - 'style' separate from content - 'content' separate from container https://speakerdeck.com/anotheruiguy/module-design-ui-dev-patterns
41. How to achieve that? That's kinda impossible with pure CSS so... SCSS to the rescue!
42. How to achieve that? OOScss + BEM
43. How to achieve that? OOscss + BEM = SMACSS (scalable and modular architecture for css)
44. BEM (block element modifier) .component-name {} .component-name--modifier-name {} .component-name__sub-object {} .component-name__sub-object--modifier-name {} .person{} .person__hand > .animal__hand .person--woman{} .person__hand{} .person__hand--left{} .person__hand--right{} TIPS: - don't nest to infinity - indent to reflect html structure
45. /* Layout Rules */ .l-layout-method /* State Rules */ .is-state-type /* Non-styled JavaScript Hooks */ .js-action-name Introduce naming conventions
46. OOScss divide your design into: - (reusable) components - (reusable) modules
47. OOScss ( probably ) the best way: Abstract class selector A.K.A. SASS %placeholder (since SASS 3.2) Placeholders are selectors that output nothing unless they are extended. Example: %separator border-top: 1px solid black hr @extend %separator .separator @extend %separator hr, .separator { border-top: 1px solid black }
48. OOScss ( probably ) the best way: Placeholders don’t have the code bloat problems that mixins or regular @extend calls have. That makes placeholders perfect for creating non-semantic CSS modules. http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/
49. File structure:
50. - settings - reset - variables - grid-settings - type ... - bourbon (useful set of mixins) - neat (grid library) - utilities (i.e. custom mixins) - components - modules - layout - base-view - views/ Explained you can add themes/ here
51. Real life example: https://github.com/dawidw/cssattempt
52. - http://bourbon.io/docs - http://neat.bourbon.io/docs/ - https://speakerdeck.com/anotheruiguy/sass-32-silent-classes - http://philipwalton.com/articles/the-future-of-oocss-a-proposal/ - http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/ - http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#placeholders - http://blog.teamtreehouse.com/extending-placeholder-selectors-with-sass - https://speakerdeck.com/anotheruiguy/module-design-ui-dev-patterns - https://github.com/csswizardry/CSS-Guidelines - http://bem.info/ pictures from http://frontenddevreactions.tumblr.com/ Further reading