Pro CSS for High Traffic Websites

Pro CSS for High Traffic Websites

Released April 2011
Publisher(s): Apress
ISBN: 9781430232889

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Although web standards-based websites can scale effectively—and basic CSS will give you basic results—there are considerations and obstacles that high traffic websites must face to keep your development and hosting costs to a minimum. There are many tips and tricks, as well as down-to-earth best practice information, to make sure that everything runs quickly and efficiently with the minimum amount of fuss or developer intervention. Targeted at "high traffic" websites—those receiving over 10,000 unique visitors a day—CSS for High Traffic Websites gives you inside information from the professionals on how to get the most out of your web development team.

The book covers the development processes required to smoothly set up an easy-to-maintain CSS framework across a large-volume website and to keep the code reusable and modular. It also looks at the business challenges of keeping branding consistent across a major website and sustaining performance at a premium level through traffic spikes and across all browsers. Defensive coding is considered for sites with third-party code or advertising requirements. It also covers keeping CSS accessible for all viewers, and examines some advanced dynamic CSS techniques.

What you'll learn

  • The value of process

  • Making reusable, robust, and modular CSS

  • How to maximize the performance of your site

  • Integrating with third parties

  • How to keep branding consistent

  • Best practices for cross-browser and accessible CSS

  • Dynamic CSS techniques

Who this book is for

This book is for Web developers building and maintaining premium, successful, high-traffic websites using web standards. This book will also help team leaders responsible for code that will be shared over multiple projects, as well as project managers with a high churn of contract staff.

Table of contents

  1. Copyright
  2. Foreword
  3. About the Authors
  4. About the Technical Reviewer
  5. Acknowledgments
  6. Preface
  7. Background Information
    1. Who Is This Book For?
    2. What Will I Learn?
    3. Why Is This Book Different From Others?
    4. Separation of Concerns
      1. Data
      2. Presentation
      3. Behavior
      4. Front-End Development Is Full of Exceptions
  8. 1. The Value of Process
    1. 1.1. The Team
    2. 1.2. Getting Too Big for Your Boots
    3. 1.3. High Staff Churn Rate
    4. 1.4. Consistency Is More Important than Quality
    5. 1.5. Tools
      1. 1.5.1. Wikis
        1. 1.5.1.1. MediaWiki
        2. 1.5.1.2. Atlassian Confluence
        3. 1.5.1.3. Mac OS X Server Wiki
        4. 1.5.1.4. Trac
      2. 1.5.2. Bug Reporting
        1. 1.5.2.1. Lighthouse
        2. 1.5.2.2. BugZilla
        3. 1.5.2.3. Atlassian JIRA
        4. 1.5.2.4. Trac
      3. 1.5.3. Task Management
        1. 1.5.3.1. Things
        2. 1.5.3.2. Rally
        3. 1.5.3.3. Mingle
      4. 1.5.4. Bug Tracking and Task Management
        1. 1.5.4.1. Atlassian JIRA (with Green Hopper plugin)
        2. 1.5.4.2. Agilo
        3. 1.5.4.3. FogBugz
      5. 1.5.5. Source Control
        1. 1.5.5.1. Visual SourceSafe (VSS)
        2. 1.5.5.2. Concurrent Versions System (CVS)
        3. 1.5.5.3. Subversion (SVN)
        4. 1.5.5.4. Git
        5. 1.5.5.5. Mercurial
        6. 1.5.5.6. Graphical User Interfaces
        7. 1.5.5.7. Using Version Control Systems
      6. 1.5.6. Diff Tools
        1. 1.5.6.1. Araxis Merge
        2. 1.5.6.2. WinDiff
        3. 1.5.6.3. WinMerge
        4. 1.5.6.4. Beyond Compare
        5. 1.5.6.5. Changes
        6. 1.5.6.6. Kaleidoscope
      7. 1.5.7. Resolving Conflicts
    6. 1.6. Backup
      1. 1.6.1. Online Backup
      2. 1.6.2. Desktop Backup
    7. 1.7. Prototyping
    8. 1.8. Development Methodologies
      1. 1.8.1. Waterfall Development
      2. 1.8.2. Agile Development
        1. 1.8.2.1. Test-Driven Development
        2. 1.8.2.2. Code Refactoring
        3. 1.8.2.3. Continuous Integration
        4. 1.8.2.4. Pair Programming
        5. 1.8.2.5. Planning Poker
        6. 1.8.2.6. Code Reviews
        7. 1.8.2.7. Daily Standup Meetings
        8. 1.8.2.8. Retrospectives
    9. 1.9. Summary
  9. 2. CSS Style Guide
    1. 2.1. CSS Style Guides
    2. 2.2. CSS Formatting
      1. 2.2.1. Single- versus Multiline
      2. 2.2.2. Indenting
      3. 2.2.3. Tabs versus Spaces
      4. 2.2.4. Colons and Semicolons
    3. 2.3. Commenting and CSS Metadata
      1. 2.3.1. Existing Standards: CSSDOC
      2. 2.3.2. File Info
      3. 2.3.3. Table of Contents
      4. 2.3.4. Sectioning
      5. 2.3.5. Color Palettes
      6. 2.3.6. Folder Paths
      7. 2.3.7. Measurements
      8. 2.3.8. Document Hacks and Bug Fixes
      9. 2.3.9. Using a Template
    4. 2.4. Class and ID Naming
      1. 2.4.1. Semantics
      2. 2.4.2. Accepted Characters
      3. 2.4.3. Conventions
      4. 2.4.4. Case
        1. 2.4.4.1. Camel Case
        2. 2.4.4.2. Hyphenated
    5. 2.5. Namespacing
      1. 2.5.1. Reusable Classes
      2. 2.5.2. CSS Namespaces Module
    6. 2.6. Summary
  10. 3. Fundamentals
    1. 3.1. The Cascade: Origin, Importance, and Inheritance
      1. 3.1.1. Origin and Importance
      2. 3.1.2. Inheritance
      3. 3.1.3. Inheritance and the Universal Selector
    2. 3.2. Specificity
      1. 3.2.1. Calculating Specificity
      2. 3.2.2. The !important Declaration
      3. 3.2.3. Namespacing and Specificity
      4. 3.2.4. Using Your Tools
    3. 3.3. Encoding
    4. 3.4. Localization
    5. 3.5. Browser-Specific CSS
      1. 3.5.1. Hacks and Filters
        1. 3.5.1.1. The Box Model Hack
        2. 3.5.1.2. The Underscore Hack
        3. 3.5.1.3. The Star Hack
        4. 3.5.1.4. The Star Html Hack, IE4-6
        5. 3.5.1.5. The Child Selector Hack
        6. 3.5.1.6. The Commented Backslash Hack
        7. 3.5.1.7. A Necessary Evil
      2. 3.5.2. CSS Expressions
      3. 3.5.3. Vendor-Specific Extensions
      4. 3.5.4. Media Queries
      5. 3.5.5. Conditional Comments
        1. 3.5.5.1. Conditional Comments in the html Element
    6. 3.6. When and How to Use Hacks
      1. 3.6.1. "Safe" Hacks
      2. 3.6.2. The Real World
    7. 3.7. Server-Side User Agent Detection
    8. 3.8. Some Examples of Browser Rendering Differences
      1. 3.8.1. Quirks Mode
        1. 3.8.1.1. Some Quirks
        2. 3.8.1.2. Almost Standards Mode
      2. 3.8.2. The IE Box Model
      3. 3.8.3. hasLayout
      4. 3.8.4. Experimental CSS
    9. 3.9. Summary
  11. 4. Frameworks and Integration
    1. 4.1. Frameworks
      1. 4.1.1. Blueprint CSS
      2. 4.1.2. 960 Grid System
      3. 4.1.3. YUI 3 Grids
      4. 4.1.4. Alternative Uses
      5. 4.1.5. Reset Style Sheets
        1. 4.1.5.1. Universal Selector Reset
        2. 4.1.5.2. Eric Meyer's Reset
        3. 4.1.5.3. YUI 3 CSS Reset
        4. 4.1.5.4. Other Reset Examples
        5. 4.1.5.5. Starting From a Common Ground with Clever Defaults
      6. 4.1.6. Why Create Your Own Framework?
    2. 4.2. Object Oriented CSS
      1. 4.2.1. Object Oriented Programming
      2. 4.2.2. OOCSS
    3. 4.3. Overriding CSS
    4. 4.4. Playing Nicely with Third-Party Code
    5. 4.5. Defensive CSS
    6. 4.6. Fragile CSS
    7. 4.7. Metadata in CSS
    8. 4.8. Summary
  12. 5. Brand Implementation
    1. 5.1. What Is a Brand?
    2. 5.2. Brand Style Guides
      1. 5.2.1. Guidelines Evolve
      2. 5.2.2. Design Libraries
    3. 5.3. Typography
      1. 5.3.1. Image Replacement versus Flexibility
      2. 5.3.2. Font-face
      3. 5.3.3. Fallback Fonts
      4. 5.3.4. Units
    4. 5.4. Color
      1. 5.4.1. Multiple Color Schemes
      2. 5.4.2. Color Reference
      3. 5.4.3. Dynamic Colors
      4. 5.4.4. Fallback Colors
    5. 5.5. Layout
      1. 5.5.1. Grids
      2. 5.5.2. Templates
    6. 5.6. Themes
    7. 5.7. Flexible CSS and Brand Evolution
    8. 5.8. Summary
  13. 6. CSS and Accessibility
    1. 6.1. Impairment Problems Overview
      1. 6.1.1. Partial Sightedness
      2. 6.1.2. Blindness
      3. 6.1.3. Colorblindness
      4. 6.1.4. Motor Impairment
      5. 6.1.5. Hearing Disabilities
      6. 6.1.6. Cognitive Impairment
      7. 6.1.7. Young Age
      8. 6.1.8. Old Age
      9. 6.1.9. Epilepsy
    2. 6.2. Accessibility Guidelines
      1. 6.2.1. What's the Law?
    3. 6.3. Assistive Technologies
      1. 6.3.1. Screen Readers
      2. 6.3.2. Hiding Content with CSS
      3. 6.3.3. Keyboard-Only Users
      4. 6.3.4. Other Assistive Devices
    4. 6.4. Design and Layout
      1. 6.4.1. Color
      2. 6.4.2. Fonts and Units
      3. 6.4.3. Web-fonts and Dyslexia
      4. 6.4.4. User Customization
      5. 6.4.5. Style Switchers
    5. 6.5. WAI-ARIA
    6. 6.6. Device and Environment Impairments
    7. 6.7. Progressive Enhancement or Graceful Degradation?
      1. 6.7.1. Can CSS3 Be Harmful?
    8. 6.8. Graded Browser Support (GBS)
    9. 6.9. Summary
  14. 7. Devices
    1. 7.1. Media Types
      1. 7.1.1. all
      2. 7.1.2. braille
      3. 7.1.3. embossed
      4. 7.1.4. handheld
      5. 7.1.5. print
      6. 7.1.6. oprojection
      7. 7.1.7. screen
      8. 7.1.8. speech
      9. 7.1.9. tty
      10. 7.1.10. tv
    2. 7.2. Media Queries
      1. 7.2.1. width
      2. 7.2.2. height
      3. 7.2.3. device-width
      4. 7.2.4. device-height
      5. 7.2.5. orientation
      6. 7.2.6. aspect-ratio
      7. 7.2.7. device-aspect-ratio
      8. 7.2.8. color
      9. 7.2.9. color-index
      10. 7.2.10. monochrome
      11. 7.2.11. resolution
      12. 7.2.12. scan
      13. 7.2.13. grid
      14. 7.2.14. transform-2d
      15. 7.2.15. transform-3d
      16. 7.2.16. transition
      17. 7.2.17. animation
    3. 7.3. Modernizr
    4. 7.4. Print Style Sheets
      1. 7.4.1. Controlling Page Breaks
    5. 7.5. Mobile Devices
      1. 7.5.1. Another Website
      2. 7.5.2. Use Media Queries to Target Mobile Devices
      3. 7.5.3. Build an App Instead
    6. 7.6. Other Devices
    7. 7.7. Search Engine Optimization (SEO)
    8. 7.8. Summary
  15. 8. Performance
    1. 8.1. The Payload—Worry About File Size
      1. 8.1.1. Naming Conventions
      2. 8.1.2. File Names
      3. 8.1.3. Folder Structure
      4. 8.1.4. Syntax
        1. 8.1.4.1. Whitespace
        2. 8.1.4.2. The Last Semicolon
        3. 8.1.4.3. Background Colors
        4. 8.1.4.4. Zeroes and Units
        5. 8.1.4.5. Cancelling Borders
        6. 8.1.4.6. Zeros and Decimal Places
        7. 8.1.4.7. Margin/Padding Shorthand
        8. 8.1.4.8. Colors
        9. 8.1.4.9. Minimizing Image Sizes
          1. 8.1.4.9.1. GIF (Graphics Interchange Format)
          2. 8.1.4.9.2. JPEG (Joint Photographic Experts Group)
          3. 8.1.4.9.3. PNG (Portable Network Graphics)
      5. 8.1.5. Minifying
      6. 8.1.6. Compression
      7. 8.1.7. Apache
      8. 8.1.8. Microsoft IIS (Internet Information Services)
      9. 8.1.9. Content Distribution Networks (CDNs) and Domains
      10. 8.1.10. Having Fewer Requests Is More Important than File Size
      11. 8.1.11. Domain Name Server (DNS) Lookup
      12. 8.1.12. Connecting
      13. 8.1.13. Sending
      14. 8.1.14. Waiting
      15. 8.1.15. Receiving
      16. 8.1.16. Concatenation
      17. 8.1.17. CSS Sprites
    2. 8.2. Data URIs (Uniform Resource Indicators)
    3. 8.3. Caching
    4. 8.4. What Should We Cache?
    5. 8.5. Versioning
    6. 8.6. What About Offline Storage?
    7. 8.7. Rendering and Parsing
    8. 8.8. Changing Properties via JavaScript
    9. 8.9. Animation
    10. 8.10. Hardware Acceleration
    11. 8.11. Summary
  16. 9. Dynamic CSS
    1. 9.1. CSS Extensions and Preprocessors
    2. 9.2. LESS
      1. 9.2.1. Variables
      2. 9.2.2. Mixins
      3. 9.2.3. Nested Rules
      4. 9.2.4. Operations
      5. 9.2.5. Color Functions
      6. 9.2.6. Namespaces
      7. 9.2.7. Commenting
      8. 9.2.8. Importing
      9. 9.2.9. Conclusion
    3. 9.3. Sass
      1. 9.2.10. Variables
      2. 9.2.11. Nested Selectors
      3. 9.2.12. Conditional Logic
      4. 9.2.13. Looping
      5. 9.2.14. Commenting
      6. 9.2.15. Accessors
      7. 9.2.16. Mixins
      8. 9.2.17. Colors
      9. 9.2.18. Importing
      10. 9.5.19. Conclusion
    4. 9.4. Evaluating Third-Party Technologies
    5. 9.5. Serving CSS with Server-Side Technologies
    6. 9.6. Continuous Integration (CI)
    7. 9.7. Clever Build Scripts
    8. 9.8. Caching Considerations
    9. 9.9. Summary
  17. 10. Testing and Debugging
    1. 10.1. Fast Development
      1. 10.1.1. Build Scripts that Concatenate CSS
      2. 10.1.2. Build Scripts that Compress CSS
      3. 10.1.3. Pages That Don't Like to be Refreshed or Time Out Frequently
      4. 10.1.4. Cached Files
      5. 10.1.5. Internet Explorer Bugs
    2. 10.2. Debugging
      1. 10.2.1. Firebug (Firefox)
      2. 10.2.2. Web Developer (Firefox or Chrome)
      3. 10.2.3. Developer Tools (Internet Explorer 8)
      4. 10.2.4. Web Inspector (Safari)
      5. 10.2.5. Developer Tools (Chrome)
      6. 10.2.6. Internet Explorer Developer Toolbar
      7. 10.2.7. Opera Dragonfly
    3. 10.3. Proxy Tools
      1. 10.3.1. Fiddler
      2. 10.3.2. Charles
    4. 10.4. Testing
      1. 10.4.1. Graded Browser Support
      2. 10.4.2. Running Multiple Versions of Internet Explorer
      3. 10.4.3. Emulating Other Devices
      4. 10.4.4. Automatically Generating Screenshots
        1. 10.4.4.1. Selenium
        2. 10.4.4.2. Browsershots
        3. 10.4.4.3. Browsercam
    5. 10.5. Summary
  18. 11. Creating Your CSS
    1. 11.1. Igloo Refrigerator Parts Inc. Website
    2. 11.2. Analyzing the Design
      1. 11.2.1. The Grid
      2. 11.2.2. Reusable Components
      3. 11.2.3. The Color Palette
      4. 11.2.4. Accessibility Concerns
      5. 11.2.5. Communication Is Important
    3. 11.3. Creating the CSS
      1. 11.3.1. Commenting
      2. 11.3.2. Units
      3. 11.3.3. Baseline Styles
      4. 11.3.4. Structure
      5. 11.3.5. Typographic Defaults
      6. 11.3.6. Global Elements
      7. 11.3.7. Components and Reusable Classes
      8. 11.3.8. One-offs
      9. 11.3.9. Compromises
      10. 11.3.10. Cross-browser Consistency
      11. 11.3.11. Accessibility and Links
    4. 11.4. Documentation and Design Library
    5. 11.5. Summary
  19. 1. CSS Standards Guide
    1. 1.1. Igloo Refrigerator Parts Inc. CSS Standards Guide
      1. 1.1.1. Introduction and Conventions
      2. 1.1.2. Implementation
      3. 1.1.3. General Rules
      4. 1.1.4. Comments
      5. 1.1.5. Formatting
      6. 1.1.6. Naming
      7. 1.1.7. Typography
      8. 1.1.8. Color
    2. 1.2. CSS Coding Standards References
  20. 2. Accessibility Guidelines
    1. 2.1. Igloo Refrigerator Parts Inc. CSS Accessibility Guidelines
      1. 2.1.1. Introduction and Conventions
      2. 2.1.2. General Rules
      3. 2.1.3. Typography
      4. 2.1.4. Links
      5. 2.1.5. Color
  21. 3. Browser Support Guidelines
    1. 3.1. Igloo Refrigerator Parts Inc. Browser Support Guidelines
      1. 3.1.1. Introduction and Conventions
      2. 3.1.2. General Rules
      3. 3.1.3. Avoiding Common Bugs
      4. 3.1.4. Hacks and Filters
      5. 3.1.5. Devices
  22. 4. Development Process
    1. 4.1. Igloo Refrigerator Parts Inc. Development Process
      1. 4.1.1. The Team
      2. 4.1.2. Iterations
      3. 4.1.3. Stories
      4. 4.1.4. Structure and Version Control
      5. 4.1.5. Planning Meeting
      6. 4.1.6. Stand-up Meeting
      7. 4.1.7. Day-to-Day Development
      8. 4.1.8. Tidy-up Meeting
      9. 4.1.9. Retrospective
      10. 4.1.10. Scheduling
      11. 4.1.11. Warranty

Product information

  • Title: Pro CSS for High Traffic Websites
  • Author(s):
  • Release date: April 2011
  • Publisher(s): Apress
  • ISBN: 9781430232889