Semantic CSS Strategies


  • this: has_classes [:payment, :error]
  • instead of: /This is a payment error/
  • good for: functionals AND cucumbers
  • CSS like: div.payment.error
  • instead of: div.payment-error
  • element contains
  • many tests could be functionals which run much faster, rather than cucumbers
  • cucumbers are domain specific for flows and user stories, not for seeing if the application is functional

CSS structure 1

  • application.sass: variables and includes
  • layout.sass: height, width, border-width, margins, padding, float, etc
  • color.sass: color, background-color, background-image, border-color, etc
  • font.sass: font-family, font-size, font-weight, etc
  • effects.sass: webkit and css3 shadows and crap
  • pros: – colors, font, and layout will change independantly – elements with large amounts of styles tend to lack any sort of internal order – quick and easy to combine into a single file using SASS include – easier to maintain internal structure
  • cons: – an element may have up to 4 entries (layout, color, fonts, and effects)

CSS structure 2

  • global.sass
  • account_index.sass
  • order_payment.sass
  • etc..
  • pros: – trivial to find the file you need
  • cons: – potential for a lot of duplication, even using a global.sass – the need to include every file, every time, and remembering to do that – low visibility to how your styles can effect different pages