Scalable and modular stylesheets

Transcript

1. Scalable and modular stylesheets
   Workshop at Interactive Cologne 2014
2. Introduction
3. Interactive Cologne 2014 Interactive Cologne 2014 Jakob Hilden Master in Human-Computer Interaction Frontend- & Rails-Entwickler bei Railslove Organisator des Railscamps @jkwebs
4. Interactive Cologne 2014 Stephan Pavlovic M.Sc in Medieninformatics Frontend-Developent and Concepts at Railslove Lecturer at University of Applied Science Cologne
5. Interactive Cologne 2014 Railslove Agile Ruby-on-Rails-Development from Cologne Guiding and „Bootstrapping“ of startups Work with established companies
6. Who are you? Where do you work? What do you do there? Why are you here?
7. General approach and Schedule
8. Interactive Cologne 2014 Interactive Cologne 2014 General approach We show you current best practices from our daily experience There will be no (ok a little) book knowledge The will be some hands-on parts for you to get active If something is unclear, ask!
9. Interactive Cologne 2014 Interactive Cologne 2014 Schedule Problem definition CSS specificity Separation of concerns DRY up your styles using Sass Modular CSS Living Styleguide
10. Interactive Cologne 2014 Feedback We do this workshop for the first time We don’t know what you expect We want to learn and improve: Too fast? Too slow? Too easy? -> Tell us! Feedback session at the end Interactive Cologne 2014
11. Problem definition
12. Interactive Cologne 2014 CSS is easy, right? .li{ float: left; margin: 10px 20px; padding: 10px; }
13. Interactive Cologne 2014 The problem
14. Interactive Cologne 2014 After a year or so ... .block{ display: block !important; } .inline{ display: inline !important; } .hide{ display: none !important; } .p{ padding: 10px !important; } .img{ border: 1px solid black !important; } .center{ margin: 0 auto !important; }
15. Interactive Cologne 2014
16. Interactive Cologne 2014 Css is a mess Inconsistent design / UX Tight coupling Unclear scope / applicability Refactoring?!?
17. Interactive Cologne 2014 Css is a mess Inconsistent design / UX Tight coupling Unclear scope / applicability Refactoring?!? ! => We will try to help you fix these problems today
18. Css specificity
19. Interactive Cologne 2014 Css specificity Interactive Cologne 2014 Element Class ID Inline a div p .article [attr=val] #article style=„…“
20. Interactive Cologne 2014 Css specificity Interactive Cologne 2014 Class ID .article [attr=val] #article
21. Interactive Cologne 2014 Css specificity Interactive Cologne 2014
22. Separation of concerns
23. Interactive Cologne 2014 Separation of concerns Single responsibility principle We learned: #IDs should not be used for styling Instead, we take .classes for styling IDs are for Javascript behavior, that targets one element (faster) [data-attributes] are for Javascript, that targets multiple elements
24. Interactive Cologne 2014 Separation of concerns JS-Code doesn’t use any CSS classes IDs: $(“#top-box“) Data-attributes: $(“[data-behavior=datepicker]“) ! Only exception: changeable state classes But we will see that later ...
25. Interactive Cologne 2014 Interactive Cologne 2014 Hands On http://codepen.io/jhilden/pen/akDoI
26. DRY up your styles using Sass
27. Interactive Cologne 2014 The dark ages One big CSS file Everything new goes to the bottom of the file You write a comment above the new stuff
28. Interactive Cologne 2014 Preprocessors to the rescue
29. Interactive Cologne 2014 Preprocessor to the rescue
30. Interactive Cologne 2014 Why Sass is „CSS with superpowers“ Who uses a preprocessor? ———————————— Variables Mixins Nesting Extends Multiple Files
31. Interactive Cologne 2014 Better structure Split code into multiple Files and Folders Gives us the opportunity to structure code better
32. Interactive Cologne 2014 Interactive Cologne 2014 Hands On Grab some stuff out of that one big file
33. Interactive Cologne 2014 Base All the setup stuff goes here Variables Mixins Resets Element Defaults
34. Interactive Cologne 2014 Interactive Cologne 2014 Coffee Break
35. Modular CSS
36. Interactive Cologne 2014 Why do we need modular CSS? Move from page-centric to modular designs Reusability of elements Make refactoring possible Make real responsive design feasible
37. Interactive Cologne 2014 What makes CSS modular? separation context-independence! clear scope/applicability (CSS->markup) clear responsibility (markup->CSS) !
38. Interactive Cologne 2014 How can we achieve this? identification of repeating/repeatable modules normalize modules/designs namespacing separation of:
 containers/grid <> design elements
39. Interactive Cologne 2014 Basic separation Split CSS into different areas of responsibility Single responsibility principle ! base/ modules/ shame/
40. Interactive Cologne 2014 Basic CSS modules OOCSS, BEM, SMACSS, ...
41. Interactive Cologne 2014 A basic module Describes the basic look of an element E.g. a button Color / Backgroundcolor Text Style Border-Radius .m-button
42. Interactive Cologne 2014 Sub component Describes a part of a module Can only be used within a module E.g. the icon in a button .m-button--icon
43. Interactive Cologne 2014 States Describes a version of a module that can change over time. Can only be used with a module E.g. A disabled button .m-button.is-disabled
44. Interactive Cologne 2014 Modifier Describes also a variation of the base module Modifies only a detail Can only be used with a module E.g. a smaller version of our button Starts with a preposition (as-, with-, without-, …) .m-button.as-small
45. Interactive Cologne 2014 Sub modules Describes a variation of the basic module E.g. A secondary button Takes everything from the 
 base module Adds specific styles .m-button_secondary
46. Interactive Cologne 2014 Overview http://sassmeister.com/gist/ 8b9ced0d47e3f3af1582
47. Interactive Cologne 2014 Further separation base/ modules/ atomic modules blocks controller shame/
48. Interactive Cologne 2014 Not all modules are created equal Atomic Modules Blocks Page / Controller
49. Interactive Cologne 2014 Three level of styling
50. Interactive Cologne 2014 Atomic Modules
51. Interactive Cologne 2014 Atomic modules Describes the look of a page element Modules work context independent All team members should know the current selection of modules Heavily usage of variables and mixins
52. Interactive Cologne 2014 Blocks
53. Interactive Cologne 2014 Blocks Content blocks Composition of modules Reuses modules and puts them into a bigger picture Good to know the most common blocks in the project
54. Interactive Cologne 2014 Block example http://sassmeister.com/gist/ 8b9ced0d47e3f3af1582
55. Interactive Cologne 2014 Page / Controller
56. Interactive Cologne 2014 Controller Page-specific code Positioning of blocks/modules Margin, Padding, …
57. Interactive Cologne 2014 Overview Prefix Responsibility Specificity level Sass Content Dependency Living Styleguide base absolutely basic variables, mixins, elements atomic modules „a-“ look completely generic placeholder, selectors, mixins completely content independent definitely blocks „b-“ composition in between reuses atomic modules somewhat dependent maybe controller/ pages „c-“ positioning very specific very content/ page dependent no
58. Interactive Cologne 2014 Refactoring You always refactor downwards If you don’t know where to put something new, always start at the bottom (controller level)
59. Interactive Cologne 2014 shame.css The name says it all Here comes the dirty hacks !important ! => This file should be empty
60. Interactive Cologne 2014 Interactive Cologne 2014 Hands On http://codepen.io/jhilden/pen/zhBHj
61. Interactive Cologne 2014 Modular CSS in a new project If you get a multi page design document Identify modules on first page black out known parts in all the rest
62. Interactive Cologne 2014 Modular CSS in an existing project Refactor part after part Start with something easy e.g. buttons Strip out all button related CSS and move it into the button module Start refactoring the button code Take the next module
63. Living Styleguide
64. Interactive Cologne 2014 Living Styleguide We all know Styleguides PDFs some Designer put together a long time ago Nobody uses them because nobody takes care of them ! => Living styleguide use current codebase Great debugging tool
65. Interactive Cologne 2014 Living Styleguide
66. Fragen? Mail: jakob@railslove Twitter: @jkwebs Github: jhilden Mail: stephan@railslove Twitter: @stephanpavlovic Github: stephanpavlovic