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

Standing on the shoulders of CSS giants

Standing on the shoulders of CSS giants

Ben MacGowan

October 25, 2013

More Decks by Ben MacGowan

Other Decks in Programming


  1. @benmacgowan Site Map designed by Sergey Bakin from The Noun

    Project as the web has evolved, websites have grown up larger
  2. @benmacgowan “the average web page now weighs in at about

    1.3MB, up 35% in the last year” - HTTP ARCHIVE
  3. @benmacgowan OOCSS http://oocss.org/ How do you scale CSS for thousands

    of pages? Object Oriented CSS is an answer. It’s an approach for writing CSS that’s fast, maintainable, and standards-based. It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites.
  4. @benmacgowan BEM BEM stands for Block, Element, Modifier. It's a

    way of describing reality in code, a range of patterns, and a way of thinking about program entities regardless of programming languages being used. http://bem.info/method/
  5. @benmacgowan BEM Categorising blocks of elements of which the site

    consists avoids cascading selectors and inheritence decreases contextual dependency on other code http://bem.info/method/
  6. @benmacgowan SMACSS SMACSS is more style guide than rigid framework.

    There is no library within here for you to download or install. It is an attempt to document a consistent approach to site development when using CSS. http://smacss.com/
  7. @benmacgowan SMACSS Categorising CSS rules and creating patterns Increases the

    semantic value of a section Decreases the expectation of specific HTML http://smacss.com/
  8. @benmacgowan “A block is an independent entity, a "building block"

    of an application. A block can be either simple or compound (containing other blocks).”
  9. @benmacgowan “An element is a part of a block that

    performs a certain function. Elements are context- dependent: they only make sense in the context of the block they belong to.”
  10. @benmacgowan “A modifier is a property of a block or

    an element that alters its look or behavior.”
  11. @benmacgowan “When labelling elements within a component with a class,

    try to avoid generic classes like .inner, .hd, .bd. Instead, prefix the class name with the name of the component. This is to avoid CSS getting overwritten when classes are too generic.”
  12. @benmacgowan “HTML class names offer no semantic value to search

    engines or screen readers, aside from microformats.”
  13. @benmacgowan if your class is called “blue” and you want

    to change it to red, you have far bigger problems than class names to deal with!