Upgrade to Pro — share decks privately, control downloads, hide ads and more …

complains, tips & hopes on CSS

complains, tips & hopes on CSS

Fernando Sainz

January 29, 2015

More Decks by Fernando Sainz

Other Decks in Programming


  1.  complains,  ,ps  &  hopes  on   CSS Fernando  Sainz  

       fsainz.com      [email protected]  
  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

  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
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. Internet  Explorer  8  is  the  last  version  of   IE

     to  run  on  Windows  XP
  15. None
  16. None
  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

  19. None
  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
  26. None
  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?

  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

  35. None
  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

  43. None
  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


  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
  88. None
  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,

  104. None
  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
  109. None
  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.