• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
OOCSS e ælsk
 

OOCSS e ælsk

on

  • 377 views

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

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

Statistics

Views

Total Views
377
Views on SlideShare
372
Embed Views
5

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 5

https://twitter.com 5

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    OOCSS e ælsk OOCSS e ælsk Presentation Transcript

    • 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/
    • Meg – Espen Dalløkken•  Utviklet ting for websiden ’98•  Jobber i FINN.no•  Organiserer WebRebels
    • Spilleliste•  Object Oriented CSS–  Prinsipper, historie•  Fra tresløyd til Lego–  Awesomeboard, Feedback, www, m, pipeline•  Responsive Web Design og mobile enheter
    • 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/
    • http://www.slideshare.net/stubbornella/object-oriented-css
    • 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
    • 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
    • Gridsystem er fundamentet for OOCSS
    • Fra tresløyd til LegoEller historien om hvordan et heltselskap plutselig snakket om strap-on ienhver sammenheng uten blygsel..
    • 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
    • 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
    • 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
    • Hjernene bak /strapon
    • En kjørende styleguide - /strapon
    • 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
    • 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
    • Økt rendering hastighet
    • 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
    • Strap-on i fri dressurHva skjedde med rammeverket etter vi var ferdig med v1.0?
    • 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
    • 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
    • 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)
    • 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
    • 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
    • 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
    • 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
    • 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