OOCSS e ælsk

621 views

Published on

Foredrag for Grensesnittet i Trondheim om OOCSS og hvordan FINN.no bruker det.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
621
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

OOCSS e ælsk

  1. 1. o o se æss æss e ælsk!!!!1 inn’troduksjon te o o se æss æss fra jængen i FinnjBilde fra: https://www.nordicchoicehotels.no/kampanjer-og-tilbud/hotell_trondheim/
  2. 2. Meg – Espen Dalløkken•  Utviklet ting for websiden ’98•  Jobber i FINN.no•  Organiserer WebRebels
  3. 3. Spilleliste•  Object Oriented CSS–  Prinsipper, historie•  Fra tresløyd til Lego–  Awesomeboard, Feedback, www, m, pipeline•  Responsive Web Design og mobile enheter
  4. 4. Object Oriented CSS•  Skrevet av Nicole Sulivan ca i 2009 mens hunjobbet i Yahoo!•  Freelance konsulent og arrangør av CSS ConfUS/EU•  Formålet var å gjøre utvikling med CSS:–  Stabilt–  Modularisert–  Forutsigbarthttp://www.stubbornella.org/
  5. 5. http://www.slideshare.net/stubbornella/object-oriented-css
  6. 6. Problemer med CSS i 2009 (og i 2013)•  Størrelsene på filene blir bare større jo lengre enløsning lever•  Gjenbruk finnes nesten ikke•  CSS koden er altfor skjør og knekker altfor ofte•  Best-practices hindrer oss faktisk i å lagerobuste løsninger med bra ytelse
  7. 7. Nøkkelprinsipper i OOCSS•  Skille struktur og utseende/skins–  Bakgrunner og borders i egne skins–  Klassenavn for å navgi objekter fremfor HTMLsemantikk•  Skille container og innhold–  Et objekt skal se likt ut uansett hvor du legger det inn•  Alt skal være åpent utvidelse
  8. 8. Gridsystem er fundamentet for OOCSS
  9. 9. Fra tresløyd til LegoEller historien om hvordan et heltselskap plutselig snakket om strap-on ienhver sammenheng uten blygsel..
  10. 10. Hvorfor begynte FINN å se på OOCSS?•  En CSS kodebase fullstendig ute av kontroll somgjorde oss ute av stand til å gjøre endringer påtvers•  En kodebase på front-end uten særlig fokus påytelse•  Ingen effekt av å ha et av Norges største miljøfor framsieutvikling•  @magnars startet å bruke det på /oppdrag
  11. 11. CSS kodelukten var plagsom•  Utviklere lager sine egne ”øyer” for å holdekontroll•  En utvikling mot stadig mer spesifikke regler•  !important kriger•  Løser samme feil gjentatte ganger pgaduplisering
  12. 12. Strap-on prosjektet•  Vi laget en basis pakke basert på OOCSS•  Deretter skrev vi om del for del alt av HTML påhele FINN•  Dette tok litt over 1 ½ år•  I det vi var ferdig, redesignet 3 stk hele FINN påca 3 uker
  13. 13. Hjernene bak /strapon
  14. 14. En kjørende styleguide - /strapon
  15. 15. Hva måtte vi lage selv?•  OOCSS er en basispakke hvor vi bruker noe,men ikke alt•  Forms oppsett rappet vi fra Bootstrap, men harnå skrevet det helt om•  Kommer ikke med noe ferdig widget bibliotek–  tooltips, dialoger, tabs, etc måtte vi lage•  Responsive Web Design er ikke en del avbasispakken•  Bells’n whistles måtte vi lage selv
  16. 16. Take aways fra å utvide OOCSS•  Å ta inn ting som ikke er OOCSS virker lurt nårdu gjør det, men du vil slite med det senere•  Basisen kan veldig enkelt utvides•  Du kan enkelt bygge det som måtte mangle
  17. 17. Økt rendering hastighet
  18. 18. Tallenes klare taleFør 1. iterasjon Mars 2013 Nå# CSS files 130 38 56 57# Lines ofCode32 798 2 927 6 187 5 226# Font-sizedeclarations1 623 45 57 69
  19. 19. Strap-on i fri dressurHva skjedde med rammeverket etter vi var ferdig med v1.0?
  20. 20. Fortsetter å levere•  Nye tjenester kommer raskt opp med riktigutseende (finn.no/smajobber)•  Interne verktøy bruker oftere vårt rammeverkover Bootstrap (yay!)•  Utviklere med ingen kunnskap om CSS kanjobbe uten å ødelegge noe•  Vi utvider rammeverket med forms-oppsett ogmer responsive tilpassninger
  21. 21. Strap-on – one stop shop for CSS•  Ligger i bunnen på alle løsninger vi lager•  Nye tjenester kan lages uten å skrive ny CSS•  To utviklere har skrev og nå vedlikeholder ogvidereutvikler kjernen–  Resten jobber med nye ting eller spesialtilpassningersom kun brukes ett sted og bidrar med innspill ogforbedringer
  22. 22. CSS rammeverk smack downBootstrap•  Kan brukes out of the box•  Utstrakt widget bibliotek•  Lite performance fokus•  Lite mobilvennlig•  Støtte for LESS/SASS/etcOOCSS•  Rammeverk som vil kreveegen tilpasning•  Pure CSS, ikke noeJavaScript•  Skrevet for performance•  Kompatibelt tilbake til IE5(vistnok)
  23. 23. Responsive Web Design og OOCSS•  RWD ”fantes ikke” da OOCSS ble unfanget•  Prinsippene fra OOCSS passer ikke helt medideen om responsive web sites•  Finnes ingen boilerplate på hvordan gjøre det
  24. 24. Vi har prøvd og feilet•  Første versjon baserte seg på å tilpasserammeverksklasser (opt-out)•  Andre versjon hadde noen egne responsiveklasser•  Tredje versjon har egne objekter som girresponsive oppførsel (opt-in)•  The Neverending Grid
  25. 25. Icon-fonts•  Tidligere hadde vi sprites for alt av små grafikkelementer og ikoner•  Bilde sprites blir mye arbeid å vedlikehold medulike oppløsninger, størrelser, enheter ogplattformer (web/native)•  Icon-fonts er:–  Skalerbare–  Cachet
  26. 26. Icon-font gotchas•  IE krever eget oppsett av content-types påserveren•  Levetiden til nettlesercache for fontene er difus•  Blinde brukere ser kun bokstavene du bruker•  Du må ha fallbacks for eldre IE nettlesere
  27. 27. Ok, en kort recap•  OOCSS krever litt arbeid•  Leverer varene på ytelse, robusthet, fleksibilitetog gjenbrukbarhet•  Gjør store kodebaser håndterlige og hindrer atden kommer ut av kontroll•  Krever disiplin og vedlikehold

×