• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Displacing Worst Practices in CSS
 

Displacing Worst Practices in CSS

on

  • 495 views

Slides from a talk given at CSS Dev Conf 2012

Slides from a talk given at CSS Dev Conf 2012

Statistics

Views

Total Views
495
Views on SlideShare
481
Embed Views
14

Actions

Likes
1
Downloads
0
Comments
0

1 Embed 14

http://www.linkedin.com 14

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

    Displacing Worst Practices in CSS Displacing Worst Practices in CSS Presentation Transcript

    • DISPLACING WORST PRACTICES (and making better CSS for all) Pam Selle @pamasaur thewebivore.com
    • STORYTIME
    • No.
    • Yes.
    • THE PLAN • What are the ‘worst practices’? • Identifying • Solving • Practices for prevention
    • IDENTIFYING WORST PRACTICES
    • REDUNDANCY • Symptom: Declaring styles that are inherent, styles that negate other ones in the chain. • Solution: Take your freebies and remove things that don’t matter. div { display: block; } .my-class { display: block; float: left; } img { display: inline-block; } span { display: inline; } .nav { position: absolute; float: left; }
    • REDUNDANCY Prescription: Mozilla Developer Network
    • REPETITION AND DISORGANIZATION • Symptom: See many of the same declarations over and over. • Symptom: See styles being overridden in web inspector. • Symptom: Having to reset styles because of previous declarations.
    • REPETITION AND DISORGANIZATION .blue-title { color: blue; font-size: 16px; font- family: Arial } .blue-content { color: blue; font-size: 14px; font- family: Arial } .blue-title, .blue-content {color: blue; font- family: Arial; } .blue-title { font-size: 16px; } .blue-content { font-size: 14px; } %blue-thing {color: blue; font-family: Arial; } .blue-title { @extend %blue-thing; font-size: 16px; } .blue-content { @extend %blue-thing; font-size: 14px; }
    • h2 { border-bottom: 1px solid #ddd; padding: 10px 0; float: left; } h2.other-title { border-bottom:none; padding:0 0 5px; float:none; } .secondary-title { border-bottom: 1px solid #ddd; padding: 10px 0; float: left; } .other-title { padding:0 0 5px; }
    • REPETITION AND DISORGANIZATION Prescription: Refactoring, with a side of architecture.
    • DETOUR INTO PREPROCESSORS • Favorite benefits of preprocessors: • Partials (architecture) • Extendables (in Sass 3.2) % • Sprite benefits (Compass)
    • OVERSPECIFICITY • Wasting your time and the browser’s time .header .logo .title.name { } #nav ul li a { } .content a.title { } .logo > .title { } .nav li > a { } .content .title { }
    • OVERSPECIFICITY Prescription: Understanding how browsers interpret CSS.
    • HOW BROWSERS EVALUATE CSS Resources: https://developers.google.com/speed/docs/best-practices/rendering https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS The engine evaluates each rule from right to left, starting from the rightmost selector (called the "key") and moving through each selector until it finds a match or discards the rule. (The "selector" is the document element to which the rule should apply.)
    • HOW BROWSERS EVALUATE CSS Specificity: 1. Ids 2. Classes 3.Tags 4. Universals From SpeciFISHity by Weyl
    • INVALID DECLARATIONS • Symptom: Crossed out in web inspector, because it’s wrong, not overridden. • Symptom:A style is written, but not rendering. (because it’s wrong) • Solution: ⌫.And read the MDN. .classy { background-position: inital initial; font: Arial; font: 14px/16px Arial sans-serif; padding: -10px; }
    • NO FALLBACKS • Know what you support, and debug before you see it in the browser. • Most common with colors, so add a simple color (background-, border-) declaration fallback. • Includes setting position properly -- a common problem in some browsers
    • NO FALLBACKS Common Suspects: rgba() linear-gradient radial-gradient box-shadow position: absolute (forgetting a vertical or horizontal position)
    • INLINE STYLES The purpose of styles is to to separate structure from presentation. Oh, and it will also give you specificity problems.
    • DISPLACING WORST PRACTICES
    • TRAIN EARLY AND OFTEN
    • TRAIN EARLY • “Bootcamp” • Presentations on full stack/tools • Identify available resources • Documentation, videos, useful tutorials • Mentoring
    • ONBOARDING • Documentation, Documentation, Documentation • Onboarding session • Make past presentations available
    • KEEP IT UP • Lightning talks • Hack Days • See “Zombies in My Workplace” for more ideas • http://www.slideshare.net/sbastn/zombies-in-my-workplace
    • STYLEGUIDES
    • TEXTUAL STYLEGUIDES • Document! • Style • Idioms • Structure
    • TEXTUAL STYLEGUIDES • Public Styleguides • Google: http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml • GitHub: https://github.com/styleguide/css • ThinkUp: https://github.com/ginatrapani/ThinkUp/wiki/Code-Style-Guide:-CSS • Manifestos • Idiomatic CSS: https://github.com/necolas/idiomatic-css • SMACSS: http://smacss.com/
    • VISUAL STYLEGUIDES • Visual Dictionary • Explain visuals and usage • Interface with visual designers
    • KSS •Generated CSS documentation http://warpspire.com/kss/ •Learn to generate your own styleguide: http://warpspire.com/kss/styleguides/
    • INTERACTIVE STYLEGUIDES • Put your elements in full context • Maintain a site-wide brand • Reduce, Reuse, & Recycle
    • CODE REVIEW
    • INTRODUCING CODE REVIEW • Use your styleguide/documentation as guideline • Continues mentoring process • Saves QA time by reviewing before staging
    • MODULAR ORGANIZATION
    • INTRODUCING ARCHITECTURE • Consider pre-processors • Consider your build process • Consider adopting a methodology (OOCSS, etc.) • Measure everything • Interface with visual design strategy
    • FINAL INVENTORY •Identify and repair misguided styles •Tools to improve and embark on the joyous path of maintainability
    • Thanks. Pam Selle thewebivore.com @pamasaur