complains, tips & hopes on CSS

Transcript

1.  complains,  ,ps  &  hopes  on   CSS Fernando  Sainz      fsainz.com      fs@zeit.io  
2. first  you  learn  some  basics   1+2  =  3
3. 1+4+(-­‐1)*2  =  3 first  you  learn  some  basics   1+2  =  3
4. with  computer  languages,  aGer   some  ,me  you  get  to  this:
5. with  CSS,  you  become  good   at  using    a  tool  like  this
6. you  get  used  to  it…  
7. css works only if you combine incredible low expectations with a bad case of Stockholm syndrome *  based  on  a  HNews  comment  on  something  else,  but  It  fits  here  nicely
14. Internet  Explorer  8  is  the  last  version  of   IE  to  run  on  Windows  XP
17. /** * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * contenteditable attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that are clearfixed. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } /** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .cf { *zoom: 1; } http://nicolasgallagher.com/micro-clearfix-hack/ floats  +  clearfix
18. In  Search  of  the  Holy  Grail
20. http://alistapart.com/ article/holygrail
21. h>ps://css-­‐tricks.com/ h>p://alistapart.com/ h>p://www.smashingmagazine.com/
22. Equal  Height  Rows
23. Awesome  ar,cle,  improved  aGer  updates h>p://osvaldas.info/flexbox-­‐based-­‐responsive-­‐equal-­‐height-­‐blocks-­‐with-­‐javascript-­‐fallback
24. h>p://www.vanseodesign.com/css/inline-­‐blocks/ Should you use inline-blocks as a substitute for floats?
25. h>p://philipwalton.github.io/solved-­‐by-­‐flexbox/ Be[er,  Simpler  Grid   Systems   Holy  Grail  Layout   Input  Add-­‐ons   Media  Object   S,cky  Footer   Ver,cal  Centering
27. h>p://caniuse.com/#search=flex *2  Only  supports  the  2012  syntax
28. h>p://www.sitepoint.com/are-­‐we-­‐ready-­‐to-­‐use-­‐flexbox/ IE10+   mobile Are  we  ready  to  use  flexbox? YES
29. something  is  a  novelty     -­‐>  the  site  may  look  be[er  than  most   -­‐>  may  be  worth  the  effort   rounded  corners   shadows   gradients   s,cky  footer corner  images   traslucid  png   image  pa>ern   hacky  html/css
30. something  is  not  longer  a  novelty     -­‐>  easiest  implementa,on  for  a  large  %     *  people  with  old  browsers  are  used  to  ugliness rounded  corners   shadows   gradients   s,cky  footer border-­‐radius   box-­‐shadow   background  gradient   flexbox
31. h>p://benfrain.com/css-­‐performance-­‐test-­‐flexbox-­‐v-­‐css-­‐table-­‐fight/ h>p://updates.html5rocks.com/2013/10/Flexbox-­‐layout-­‐isn-­‐t-­‐slow Flexbox  performance
32. Do  not  memorize  rules  in  rela/on  to  CSS  performance  without   checking  your  own  data’  They  are  largely  useless,  transient  and  too   subjec/ve.  (…)    I  generally  never  worry  CSS  selectors  when   authoring  a  style  sheet  (typically  I  just  put  a  class  on  anything  I   want  to  style  and  select  it  directly)  (…)  “It  is  prac/cally  impossible  to   predict  the  final  performance  impact  of  a  given  selector  by  just   examining  the  selectors (  css  performance  ) GitHub's  CSS  Performance  (Dec  2012) https://speakerdeck.com/jonrohan/githubs-css-performance Browser  representa,ves  on  CSS  performance  (Mar  2015)
33. h>ps://speakerdeck.com/imathis/sass-­‐compass-­‐the-­‐future-­‐of-­‐stylesheets-­‐now
34. h>p://bourbon.io/docs/#clearfix
36. h>p://bourbon.io/docs/#reUna-­‐image
37. h>p://nicolasgallagher.com/about-­‐normalize-­‐css
38. h>ps://css-­‐tricks.com/centering-­‐css-­‐complete-­‐guide/
39. h>ps://css-­‐tricks.com/almanac/
40. h>ps://github.com/zweilove/css_spli>er Gem  for  spli,ng  up  stylesheets  that  go  beyond  the  IE  limit   of  4096  selectors  (..)  Older  versions  of  Internet  Explorer   (version  9  and  below)  have  a  hard  limit  for  the  number  of   CSS  selectors  they  can  process,  which  is  4095  (..)   CssSpliHer  integrates  with  the  Rails  3.1+  Asset  Pipeline  to   generate  addiOonal  split  stylesheets   IE  limit  of  4096  selectors Use  a  spli[er  with  your  pipeline
41. h>p://fsainz.com/2013/09/21/icomoon-­‐and-­‐other-­‐icon-­‐font-­‐tools.html
42. h>ps://developer.chrome.com/devtools/docs/remote-­‐debugging Remote  Debugging h>ps://developer.mozilla.org/en-­‐US/docs/Tools/Valence
44. if (!Modernizr.placeholder) $("[placeholder]").placeholder() h>p://modernizr.com/ Modernizr.backgroundsize
45. h>p://caniuse.com/
46. body class=“mobile” body class=“ie9” h>ps://github.com/fnando/browser * Some  ,mes  media  queries  are  not  enough   * Be[er  than  condi,onal  stylesheets  in  some  cases /* ie10.css */ /* Lines no one remembers that exist */ /* relevant_context.css */ #foo.ie10{ /* ... */ }
47. Responsive  embed  /  video   def embed_html %{ <div class="embed-responsive" style="padding-bottom:#{100.0 / entry.media.ratio}%"> #{entry.media.embed_url(style)} </div> }.html_safe end
48. OOCSS  -­‐  Object  Oriented  CSS h>p://www.smashingmagazine.com/2011/12/12/an-­‐introducUon-­‐to-­‐object-­‐oriented-­‐css-­‐oocss/
49. OOCSS Structure  +  Skin Library  of  Components Avoid  specify  wars
50. h>p://es.slideshare.net/stubbornella/our-­‐best-­‐pracUces-­‐are-­‐killing-­‐us
51. .btn.btn-­‐primary.btn-­‐lg vs #signup-­‐bu[on visual/presentation semantics document/business domain semantics
52. #signup-­‐bu>on  leads  to  chaos (dev1)  I  like  this  buJon,  let’s  reuse  it  for  the  login  buJon /* signup.css */ #signup-button, #login-button { font-size: 14px; background: blue; /* … */ }
53. #signup-­‐bu>on  leads  to  chaos (dev2)  the  customer  wants  to  add  a  larger  signup  in  ‘pricing’  in   orange,  let’s  make  it  more  specific  with  page  scope: /* signup.css */ #signup-button, #login-button { font-size: 14px; background: blue; /* … */ } /* pricing.css */ #pricing #signup-button { font-size: 20px; background: blue; }
54. #signup-­‐bu>on  leads  to  chaos (dev1)  I  need  a  ‘demo’  buJon  almost  like  that  orange  signup,  i’ll  add  it   pricing…  damn,  doesn’t  work..  ah  right,  forgot  to  add  it  to  signup.css  too… /* signup.css */ #signup-button, #login-button, #demo-button { font-size: 14px; background: blue; /* … */ } /* pricing.css */ #pricing #signup-button, #pricing #demo-button { font-size: 20px; background: blue; }
55. #signup-­‐bu>on  leads  to  chaos (dev3)  the  customer  finds  the  demo  buJon  too  big,  let’s  make  it   like  the  one  of  the  signup,  hmm…  it’s  not  specific  enough,  let’s  add  more   scope /* signup.css */ #signup-button, #login-button, #demo-button { font-size: 14px; background: blue; /* … */ } /* pricing.css */ #pricing #main-header #demo-button { font-size: 14px; } /* … */ #pricing #signup-button, #pricing #demo-button { font-size: 20px; background: blue; }
56. #signup-­‐bu>on  leads  to  chaos (dev1)  I  need  to  add  a    buJon  to  the  user  preferences  almost  like  the   one  on  the  demo  page..  damn,  the  rules  fight  each  other  and  are  split   into  three  places,  let’s  just  create  a  new  one
57. I’ve seen that chaos many times… In theory you could work like this with sass: #signup-button { @extend button-basics; @extend button-large; @extend button-primary-color; } I think that requires extra discipline … you still need to design your classes/mixins like components whose permutations are not explicit … you can not copy paste html and expect it to work, you need to find similar elements and learn about them, think new names like if you were a taxonomist and add them to different stylesheets…
58. -­‐ related  to  the  business  domain   -­‐ harder  to  reuse   -­‐ easy  to  fall  into  wars   -­‐ tends  to  fragmenta,on  (look  in  several   places  to  get  all  the  styles)   -­‐ possible  smaller  html  size  (negligible)   -­‐ makes  you  think  about  descrip,ve  names   constantly #signup-­‐bu[on
59. -­‐ related  to  the  presenta,on  domain   -­‐ highly  reusable   -­‐ no-­‐brainer,  doesn’t  need  a  name   -­‐ it  comes  in  mul,ple  colors  and  flavours   -­‐ allows  html  copy  pas,ng .btn.btn-­‐primary.btn-­‐lg happy  efficient  programmers
60. Real  life  ®  Example
61. h  related  to  headers,  but  applicable  to  p,  div… A  typography  style 3  font-­‐size  indicator  within  style  members .hA3 .hA3  =
62. h1.hA3 h2.hA3 h3.hA3 h4.hA3 h5.hA3 span.hA3 div.hA3 a.hA3 #company-­‐index  .foobar  p  h3.hA3 a  .x-­‐toggle.hA3 .hA3  =
63. .hA3  = always
64. If  I  move  a  related  chunk  of  markup  somewhere  else,     it  shouldn’t  change  how  it  looks  
65. .hA3  = always
66. STENCIL
67. https://www.sketchbook.com/
68. https://www.fiftythree.com/paper
69. http://www.uistencils.com/
70. h>p://fsainz.com/2013/10/18/ managing-­‐css-­‐gui.html have  your  own   /dev/gui
71. http://codepen.io/chriscoyier/blog/some-mini-sass-mixins-i-like http://fsainz.com/2013/12/23/managing-css-tricks.html
72. avoid  gaining  specify  to  play  nice  with   components
73. .user-­‐profile-­‐info     be>er  than          .user-­‐profile  .info        .user-­‐profile  .user-­‐info   /* bootstrap panels */ .panel { margin-bottom: 20px; background-color: #fff; border: 1px solid transparent; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); box-shadow: 0 1px 1px rgba(0, 0, 0, .05); } .panel-body { padding: 15px; } .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-left-radius: 3px; border-top-right-radius: 3px; } pick a longish name, don’t try to win => avoid nesting most of the time
74. alternaUves        .profile-­‐a        .a-­‐danger   .profile a { color: red; } .profile a.btn.btn-default # wrong color!
75. make  it  so  it’s  obvious  which  DOM   renders  what  you  see   do  not  modify  styles  from  higher   unexpected  levels
76. body#controller.acUon
77. body#controller.acUon  (…)
78. body#controller.acUon  (…)  (…)
79. body#controller.acUon  (…)  (…)  (…)
80. body#controller.acUon  (…)  (…)  (…)  p
81. surprise!
82. surprise! please  don’t
83. some  excep,ons: basic  layout  elements  -­‐>  you  just  want  one   layout  with  a  dynamic  id/class  for  the  body body#public-layout header main footer
84. some  excep,ons: you  want  to  modify  third-­‐party   components  that  don’t  expose  sass/less   variables .navbar > ul > li > a { /* … */ }
85. h>ps://github.com/twbs/bootstrap Bootstrap
86. h>ps://github.com/zurb/foundaUon Zurb  Founda,on
87. Ideally  take  a  look  at  the  source But  since  we  are  all  busy,  a  trick  is  to  have  their  sources  in   vendor  so  you  can  read  through  it  with  your  editor  any  ,me
89. h[p://csswizardry.com/2013/04/shame-­‐css/
90. Well  wri[en  components  take  effort,  instead  of   trying  to  get  perfect  css  is  more  interes,ng  to   focus  on  reducing  complexity.   It  could  be  messy,  but  as  long  as  it  lives   isolated  from  the  other  styles,  as  long  as  it   consists  on  a  few  bunch  of  lines  in  the  same   stylesheet,  with  just  a  couple  of  simple  clearly   related  classes,  it  won’t  hurt  the  development,   and  you  could  clean  it  in  the  future  (or  not).
91. Bootstrap  Grid
92. .row margin-right: -15px; margin-left: -15px; /* + clearfix /* ≈ .col-* padding-right: 15px; padding-left: 15px; position: relative; min-height: 1px; float:left; width:... .row .col-xs-12 .clearfix
93. ≈ .col-xs-6 .col-xs-6.col-sm-6.col-md-6.col-lg-6 .col-xs-6 { float: left; } .col-xs-6 { width: 50%; } @media (min-width: 768px) { .col-sm-6 { float: left; } .col-sm-6 { width: 50%; } } @media (min-width: 992px) { .col-md-6 { float: left; } .col-md-6 { width: 50%; } }
94. http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
95. http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
96. http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
97. http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
98. Official  Sass  port  of  Bootstrap     h>p://getbootstrap.com/css/#sass
99. h>p://codepen.io/fsainz/pen/zGxKde Column  wrapping Issues  when  you  add  more  cols  than  a  row  can  fit
100. I've…  seen  things  you  people  wouldn't  believe
101. h>ps://github.com/twbs/bootstrap/issues/13892 *  everything  ok,  you  resize,  it  falls,  you  reload  (same  width)  -­‐>  ok  
102. h>p://getbootstrap.com/browser-­‐bugs/
103. 100%  browser  support,  pixel-­‐perfect…     =    ,me,  money,  frustra,on
105. -­‐ some  parts  will  look  be[er  in  modern  browsers   -­‐ some  parts  won’t  work  at  all  in  very  old  browsers   -­‐ more  support  =  more  hours,  more  €€   -­‐ fancy  startup  =  early  adopters  =  modern  browsers   -­‐ very  targeted  product  for  a  few  tradi,onal  customers  =   solves  a  pain  -­‐>  you  could  specify  your  browser   support,  they  are  mo,vated  to  install  it
106. *  responsive  =  reasonable  well  adapted  to  some  resoluUons *  wide  browser  support  =  reasonable  well  adapted  to  some  browsers Our  support  for  other  browsers/devices  is  always  limited,  test   it  and  get  it  ~100%  right  is  very  expensive  and  only  makes   business  sense  for  large  companies
107. …those  widths  between  tablet  and  smartphone  resolu,ons   or  the  .col-­‐xs  /  .col-­‐md  awkward  gap     …that  desktop  browser  shrunk  to  400px  … *  responsive
108. People  with  old  browsers  are  used  to  ugliness Dealing  with  old  browsers  has  a  toll  on  your  morale.     Besides  ,me  consider  frustra,on  as  an  extra  cost  factor. *  wide  browser  support
110. *  No  figh,ng   *  No  surprises   *  Create  your  own  Stencil
111. *  Learn  from  other  sites/libraries   *  Flexbox  is  the  path  to  sanity   *  Perfec,on  is  just  not  worth  it.