SlideShare a Scribd company logo
TOP 5 MISTAKES OF
                            MASSIVE CSS!

                            Nicole Sullivan & Stoyan Stefanov
Thursday, June 24, 2010
FIND US AT...


                           @stubbornella
                          @stoyanstefanov



Thursday, June 24, 2010
WHY OPTIMIZE CSS?


    • It blocks progressive rendering
     
 test: http://www.phpied.com/files/css-loading/table.php
    • It’s verbose (property value pairs cannot be minified like JS)
     
             text-decoration: underline
 != td: u


Thursday, June 24, 2010
TOP 1000 STUDY


    1. Grab top Alexa sites
    2. Start Fiddler
    3. Load each site
    4. Export from Fiddler



Thursday, June 24, 2010

Recommended for you

The jQuery Divide
The jQuery DivideThe jQuery Divide
The jQuery Divide

jQuery is drawing newcomers to JavaSCript in droves. As a community, we have an obligation -- and it is in our interest -- to help these newcomers understand where jQuery ends and JavaScript begins.

jsconfeujavascriptjsconf
Mapping History on Open Street Map
Mapping History on Open Street MapMapping History on Open Street Map
Mapping History on Open Street Map

The document discusses mapping the changes to buildings and places over time using OpenStreetMap. It proposes tagging buildings and attributes with start_date and end_date to filter what is shown on maps for different time periods. Scripts are presented to preprocess the OSM data into decade-specific files and render maps for each decade. Challenges are noted around normalizing date formats and tracking attribute changes over time.

historyopenstreetmapsotm09
Automating your workflow with Gulp.js
Automating your workflow with Gulp.jsAutomating your workflow with Gulp.js
Automating your workflow with Gulp.js

This document discusses automating workflows with Gulp.js. It begins with an overview of typical development workflows and tasks like setup, developing, building, testing and deployment. It then introduces Gulp.js as a JavaScript task runner that can automate these workflows using streams. The rest of the document covers benefits of Gulp like being easy to use, efficient, high quality and easy to learn. It demonstrates the core Gulp functions and provides examples of common tasks. Finally, it discusses related topics like deploy processes, generators, and other Gulp technologies.

gulp.js grunt.js automation node.js
<?php

        $file = file('alexa.txt');

        foreach ($file as $url) {

                  launch($url);

        }

        function launch($url) {

                  try {

                          $ie = new COM("InternetExplorer.Application");

                          $ie->Visible = true;

                          $ie->Navigate2($url);

                          while ($ie->ReadyState != 4) sleep(1);

                          $ie->Quit();

                  } catch (Exception $e) {}

        }

        ?>
Thursday, June 24, 2010
42% DON’T GZIP CSS




Thursday, June 24, 2010
44% HAVE MORE THAN 2
                 CSS FILES
                          56%

                                44%




Thursday, June 24, 2010
56% SERVE CSS WITH
                               COOKIES




Thursday, June 24, 2010

Recommended for you

Object Oriented CSS
Object Oriented CSSObject Oriented CSS
Object Oriented CSS

How do you scale CSS for millions of visitors or thousands of pages? The slides from Nicole's presentation at Web Directions North in Denver will show you how to use Object Oriented CSS to write fast, maintainable, standards-based front end code. Adds much needed predictability to CSS so that even beginners can participate in writing beautiful, standards-compliant, fast websites.

modulesblocksoriented
The Real Life Social Network v2
The Real Life Social Network v2The Real Life Social Network v2
The Real Life Social Network v2

The document summarizes key points from a presentation about how people's real-life social networks differ from their online social networks. It tells a story about a woman named Debbie who was upset to discover that photos from her friends' wild nights at a gay bar, which she had commented on on Facebook, could be viewed by 10-year-old children she teaches swimming. This highlighted the problem that online social networks do not always match people's real-world relationships and connections. The presentation then covered topics like how social networks have changed the web, the importance of understanding relationships and influence, identity, and privacy on social platforms.

sociabilitysocial websocial networks
CSS Wish List @JSConf
CSS Wish List @JSConfCSS Wish List @JSConf
CSS Wish List @JSConf

From Nicole's talk at JSConf.eu where she presented her wish list for the future of CSS. She presents a brand-new expanded syntax which allows for prototypes, mixins, and variables and explains how a preprocessor can be used today to achieve a richer language in older browsers.

css specification prototype mixin variable oocss j
62% DON’T MINIFY




         would get more than 10% savings from YUI compressor
Thursday, June 24, 2010
21% HAVE >100K OF CSS
                                21%


                          11%
                          11%


                                       44%


                                 24%
Thursday, June 24, 2010
HASTE TRACE-BASED PACKAGING




                                                            homepage     homepage
              Date          CSS files           CSS weight
                                                              files         weight

       Nov 2008                487                  1.7MB      24            69KB

        May 2009               706                  1.9MB      15            64KB

   http://velocityconference.blip.tv/file/2293221/               David Wei & Changhao Jiang
Thursday, June 24, 2010
KUDZU
      Was introduced to the United States between 1935 and 1950
       by the Soil Conservation Service to prevent soil erosion.


Thursday, June 24, 2010

Recommended for you

Spring Web Views
Spring Web ViewsSpring Web Views
Spring Web Views

This document discusses view resolution in Spring MVC. It describes several view resolvers included with Spring, including InternalResourceViewResolver, BeanNameViewResolver, and ResourceBundleViewResolver. It also covers configuring multiple view resolvers, binding form data, rendering messages, displaying errors, integrating Jakarta Tiles to layout pages, and creating Tiles controllers.

emprovisespringmvc
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScriptWeb Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript

Bruce Lawson's South By Southwest 2011 talk: philosophy, 3 methodologies and optimisation tips and tricks for making web sites that work across devices.

html5css3javascript
HTML5 Who what where when why how
HTML5 Who what where when why howHTML5 Who what where when why how
HTML5 Who what where when why how

HTML5 is an umbrella term for new HTML elements and JavaScript APIs that provide richer semantics and interactions on the web. Some key features of HTML5 include new elements like <video>, <audio>, and <canvas>, offline application caching, local storage, and geolocation. HTML5 aims to make the web more app-like without plugins by standardizing media playback, graphics, offline support, and other capabilities in a way that works across browsers. The specification is developed through the joint efforts of browser vendors to provide a common set of features that work consistently on different browsers without needing plugins.

html5web developmentmobile web
CSS KUDZU!


Thursday, June 24, 2010
“OBJECT ORIENTED CSS
                   SOUNDS GREAT, BUT WE
                    HAVE A GIANT MESS!”
                          how do we get from here to there?




Thursday, June 24, 2010
FACEBOOK DECIDED TO
                  GO ON A DIET
                          The CSS was one piece of the puzzle




Thursday, June 24, 2010
Jason Sobel -
                          Perf Manager Fu

                            MANY PIECES                    Nan Gao
  Kyle Delong - PHP               David Wei & Changhao Jiang BigPipe




            Marcel
            Laverdet -                      Tom Occhino - JS
            XHP
     Makinde                              Shaun McIntyre -
     Adeagbo - JS                       Automated Spriting
Thursday, June 24, 2010

Recommended for you

The Home of the Future: CSS Layouts
The Home of the Future: CSS LayoutsThe Home of the Future: CSS Layouts
The Home of the Future: CSS Layouts

The document discusses emerging web technologies for page layout, including multi-column layout, flexbox, grid layout, extended floats, regions, and templates. It provides examples and specifications for each technology. It encourages the reader to buy the author's book on CSS3 for more information.

standardsnextcssweb development
Leveraging HTML 5.0
Leveraging HTML 5.0Leveraging HTML 5.0
Leveraging HTML 5.0

Social Media for Mobile Search Engine Optimisaton Super-hot HTML 5.0 tag elements to increase your buisness’es social mindshare

html5seo servicessocial media
Don't feed the trolls
Don't feed the trollsDon't feed the trolls
Don't feed the trolls

The JavaScript community is one of the most vibrant and fun groups I've ever been lucky enough to be a part of. Like any vibrant community, sometimes people don't play nicely. In this session, I will discuss what it has been like to be shy *and* be on twitter, mailing lists, and open source. I'll talk about my experiences consulting on massive CSS overhauls, and ways to defeat trolls -- including your own inner troll! I'll also share a timing attack for your brain that might just surprise you.

fluentconfjavascriptjsconf
THEY REDUCED THEIR
            RESPONSE TIME BY HALF
                          in only six months




Thursday, June 24, 2010
WHAT IS OBJECT
                          ORIENTED CSS?
                          A philosophy? A framework? A tool?




Thursday, June 24, 2010
MORE LIKE AN EVOLUTION
      OF THE LANGUAGE
                          it makes CSS more powerful




Thursday, June 24, 2010
HOW IS IT DIFFERENT?


                               ul{...}
                            ul li{...}
                          ul li a{...}




Thursday, June 24, 2010

Recommended for you

Open Educational Resources Initiative in Macedonia
Open Educational Resources Initiative in MacedoniaOpen Educational Resources Initiative in Macedonia
Open Educational Resources Initiative in Macedonia

Presentation by Irina Shumadieva on Open Educational Resources (OER) at the SFK12 Software Freedom Kosova Conference 2012

open accessoeropen education
Testing The Legacy: Making Existing Applications Testable Without Epic Efforts
Testing The Legacy: Making Existing Applications Testable Without Epic EffortsTesting The Legacy: Making Existing Applications Testable Without Epic Efforts
Testing The Legacy: Making Existing Applications Testable Without Epic Efforts

If you have an established product which came about before the widespread use of the unit and system testing, then you know the problem. The old code cannot be made testable without a significant effort of throwing it away and writing it anew. What does it mean for the QA? It means endless repetitions of manual test runs. Sounds like fun? Yeah.. Nah! In this presentation you will find two ways to make legacy applications testable through automation: an easy one, and a good one. The main benefit they provide is a basis for the further refactoring of the application, without damaging it. Think of it as a Catch-22: you can't make your old app code testable without severely changing it, and you can't be sure that your changes work because you have no tests to verify them. If you are a QA and you work with older apps and systems doing a lot of manual testing, then this is the topic for you. This talk was given at ITx 2016 in Wellington, New Zealand, for Testing Professionals Network.

qaautomationlegacy applications
Does agile mean having even less time for testing?!
Does agile mean having even less time for testing?!Does agile mean having even less time for testing?!
Does agile mean having even less time for testing?!

Talk provided at ASQF meetup "Fachgruppentreffen" in Braunschweig, 18th August 2016 In the last decade, the speed of our industry has increased greatly. Agile Development, DevOps and Continuous Delivery are the main drivers for this paradigm shift which has now become widely accepted. Ten years ago, it was common to only release a couple of new versions a year. Today, there are companies delivering hundreds of software deployments per day. This isn't only true in IT, but also e.g. for Tesla-Automobile, which delivers its software updates a few times a week. Where does quality happen when we're releasing this often? Is it possible to have proper quality management and is there enough time for testing? How can we reduce what could be weeks of testing to deliver new features to our clients on a daily basis? Alex is a long-term enthusiast for this topic. Based on his experiences with various products and companies, he'll share his insights into the mystery of "faster testing". The key questions are: How can we guarantee quality When do we test? How do we test? How often do we test and what don't we test? and finallyt: Who does the testing? Together we will discuss our common problems, approaches and best practices.

quality assuranceagile testingagile software development
HOW IS IT DIFFERENT?


                               ul{...}
                            ul li{...}
                          ul li a{...}



   Until now, we focused all our effort here

Thursday, June 24, 2010
HOW IS IT DIFFERENT?


                                    ul{...}
                                 ul li{...}
                               ul li a{...}



                 But, the architecture lives here

Thursday, June 24, 2010
MUCH LESS CODE
                            easier to work with newbies




Thursday, June 24, 2010
GRIDS
    •   574 bytes

    •   14 lines of code

    •   Percentage widths adapt to
        different page sizes

    •   Includes halfs, thirds, fourths, and
        fifths

    •   No gutters

    •   Infinite nesting and stacking

Thursday, June 24, 2010

Recommended for you

Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing Us

We keep thinking we can write better CSS if we just try harder, that the next site will be clean and stay that way. This presentation shows that in fact, messy CSS is the direct result of our worst best-practices. We need to reexamine those assumptions with an eye to practicality and scalability as well as accessibility, standards, and fabulous design.

web 20 expoweb designcss
Bruce Lawson: Progressive Web Apps: the future of Apps
Bruce Lawson: Progressive Web Apps: the future of AppsBruce Lawson: Progressive Web Apps: the future of Apps
Bruce Lawson: Progressive Web Apps: the future of Apps

Native Apps, like Flash, are a bridging technology. Progressive Web Apps are a new suite of technologies that combine the user experience of native, with the immediacy and reach of the web. Learn why we have them, and how to make them.

Designing a One-Size-Fits-All University Web Template, and other Impossible B...
Designing a One-Size-Fits-All University Web Template, and other Impossible B...Designing a One-Size-Fits-All University Web Template, and other Impossible B...
Designing a One-Size-Fits-All University Web Template, and other Impossible B...

A video of this dissapointing performance can be found on Ustream: http://www.ustream.tv/recorded/8460852 I tried to design with worst possible title page ever. Did I succeed? ...Meandering presentation about crafting design templates for university websites.

university college arkansas design templates brand
GRANULARITY FAIL
                             + STALE RULES
                          + UNPREDICTABILITY
                            + DUPLICATION
                          + SPECIFICITY WARS
                            = MASSIVE CSS
Thursday, June 24, 2010
5                   Text


                            GRANULARITY FAIL
                          the CSS objects shouldn’t match the PHP objects



Thursday, June 24, 2010
Thursday, June 24, 2010
Thursday, June 24, 2010

Recommended for you

44275732 chef
44275732 chef44275732 chef
44275732 chef

This document discusses configuration management using the tool Chef. It begins by explaining that configuration management involves creating blueprints for servers using code. It then reviews some common configuration management tools like CFEngine, Puppet, and Chef. Chef is discussed in more detail, explaining that it uses a client-server model to manage nodes (servers) by assigning them roles and recipes made up of resources. Examples are given of how Chef can be used to manage tasks like installing MySQL or checking out code from Git. The document concludes by offering to demonstrate Chef.

From where OpenVBX came from to how we open sourced it
From where OpenVBX came from to how we open sourced itFrom where OpenVBX came from to how we open sourced it
From where OpenVBX came from to how we open sourced it

This document discusses the OpenVBX project, an open source visual programming platform for building voice applications. It describes how OpenVBX works, its use of tools like CodeIgniter and jQuery, and plans to improve the user experience, documentation, and launch the community platform. The document also shares the project URL and mentions it is hosted on GitHub.

20100627 sobe2
20100627 sobe220100627 sobe2
20100627 sobe2

This document discusses CSS3 and provides links to examples of CSS3 features. It notes that CSS3 animations work in Safari and Chrome but not IE8. It also mentions a Twitter "Fail Whale" example and lists some Twitter usernames.

Thursday, June 24, 2010
http://www.brickartist.com/
Thursday, June 24, 2010
http://www.brickartist.com/
Thursday, June 24, 2010
WE WANT TO DO THE
                SAME THING WITH CSS




Thursday, June 24, 2010

Recommended for you

Plone Conference 2010 – Where we go from here
Plone Conference 2010 – Where we go from herePlone Conference 2010 – Where we go from here
Plone Conference 2010 – Where we go from here

The document outlines 14 rules for Plone's future, including communicating Plone's direction, acknowledging weaknesses, playing to strengths like security and UI, deciding on target users, making "today what tomorrow will want" (TTW) easier, leveraging outside technologies, backporting innovations, keeping the platform modern, shrinking dependencies, avoiding breaking changes, improving installability, making distributions important, and focusing on quality.

ploneplone4ploneconf2010
Designing With Type :: FontConf 2010
Designing With Type :: FontConf 2010Designing With Type :: FontConf 2010
Designing With Type :: FontConf 2010

Kyle Meyer gave a presentation titled "Designing With Type" where he discussed the importance of typography and guidelines for web typography. The presentation included 5 topics: 1) Why Typography Matters, discussing how aesthetics impact usability, 2) Typography as a Craft Skill, 3) Guidelines for Web Typography including a proposed 100% Easy-to-Read standard, 4) Using CSS3 capabilities like text-shadow, columns and transforms, and 5) Open discussion topics about font usage, frameworks and high resolution displays. Meyer emphasized the critical role of typography in design and usability.

typographydesigncraft
HTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduHTML5/CSS3 @ Baidu
HTML5/CSS3 @ Baidu

This document discusses HTML5 and CSS3 standards. It provides an overview of the history and development of HTML standards by the W3C including HTML4, XHTML1/2, and the development of HTML5 in collaboration with the WHAT-WG. It also covers new CSS3 features for borders, backgrounds, box-shadows, multiple backgrounds, transforms, transitions, web fonts, and text effects. Examples are provided and sources for further information and demos are listed.

transitionstransformwebform
CREATE THE
                          BUILDING BLOCKS




Thursday, June 24, 2010
MOST SITES GET THE
               GRANULARITY WRONG
                          and their architecture is set up to fail




Thursday, June 24, 2010
HOW? FIRST, A VISUAL
                     INVENTORY




Thursday, June 24, 2010
TAKE A PHP OBJECT
Thursday, June 24, 2010

Recommended for you

From AARGH to AAAHH: Web Content Strategy
From AARGH to AAAHH: Web Content StrategyFrom AARGH to AAAHH: Web Content Strategy
From AARGH to AAAHH: Web Content Strategy

The document is a presentation about developing a digital content strategy for an organization. It discusses how web content used to be poorly designed and lacked strategy in 2000 but has improved over the past decade. The presentation recommends organizations first learn about their current content situation by auditing what they have and who is responsible for it. It then suggests planning the new strategy by analyzing user needs and competitors before creating a content structure and plan. The key steps are to get started, learn, and take ownership of the content strategy.

web designiabccontent strategy
FITC 2010 Slides
FITC 2010 SlidesFITC 2010 Slides
FITC 2010 Slides

Big Spaceship is a place where pushing the limits meets extreme deadlines on a regular basis. The keys to success? A philosophy that affords close collaboration and communication, coupled with a couple of clever solutions to common problems... and some really ugly placeholder art. Join Jamie as he details the way the Spaceship ticks and how you can apply these fundamentals to your own process.

processwhiskeybig spaceship
Why are you here?
Why are you here?Why are you here?
Why are you here?

A reflection on career and community. A call to follow your heart rather than some abstract notion of success.

cssconfcurationcssconf.eu
BREAK IT DOWN
Thursday, June 24, 2010
7 SMALLER OBJECTS




Thursday, June 24, 2010
headings




Thursday, June 24, 2010
HEADINGS
   Heading      - 16px bold #3B5998
   Heading     - 16px normal #333333
   Heading     - 15px bold #3B5998     • 12px   headings eliminated
   Heading     - 15px normal #333333
   Heading     - 14px bold #3B5998     • Blue   only for links
   Heading    - 14px normal #333333
   Heading    - 13px bold #3B5998      • Bold   for all titles
   Heading    - 13px normal #333333    • Chad Little went through
   Heading   - 11px bold #3B5998        the entire site eliminating
   Heading   - 11px normal #333333      duplicates.
Thursday, June 24, 2010

Recommended for you

Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceCreating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance

Refactoring Trulia’s UI with SASS, OOCSS, and handlebars. My slides from jsconf 2013. Lot's of yummy details about the performance improvements we were able to make.

sassoocssstyle guides
CSS Power Tools
CSS Power ToolsCSS Power Tools
CSS Power Tools

Let’s admit it, the tools for writing CSS aren’t very advanced. For the most part, the people who write tools don’t know about CSS and the people who know about CSS don’t write tools. Quite a conundrum! In this session, you’ll learn about good tools that can make development faster and maintenance easier. We’ll also talk a bit about where we can go from here. What tools do we need as sites are becoming more and more complex? We need to get beyond tools whose primary goal is to avoid hand-coding and realize that, as our techniques for writing CSS become more powerful, our tools can too! Session will include: * Validators * Preprocessors * Finding dead rules * Linting * CSS3 gradient tools * Performance measurement tools * Unit testing

image optimizationcompassblueprint
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...

The cascade is a poker game, but we've been playing our cards all wrong. Here Nicole suggests we stop trying to play to win to prevent code bloat, and simplify the cascade, using the order of the rulesets to allow overrides.

taetae09css
IT’S ALL ABOUT PATTERN
                    MATCHING
                          but you have to take a step back




Thursday, June 24, 2010
PHP OBJECTS != CSS OBJECTS
                          you will be tempted, beware!




Thursday, June 24, 2010
4        Text


                          STALE RULES
                              CSS gets crufty



Thursday, June 24, 2010
STALE IS TWO THINGS



    ❖   Truly stale - rules that are no longer used on the site
    ❖   Rules used on subsequent PV or activated on user action




Thursday, June 24, 2010

Recommended for you

Taming CSS Selectors
Taming CSS SelectorsTaming CSS Selectors
Taming CSS Selectors

From Nicole's presentation at the CSS Summit. This is brand new research regarding efficient CSS selector design. Practicing the rules outlined here will make your CSS lean, your site fast, and your maintenance minimal. A beautiful combination for people concerned with building performance into their sites.

selectorscssperformance
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The Fabulous

You've got a sneaking suspicion that design impacts performance. What next? Your engineers know nothing about design and your designers know nothing about performance. How can you get everyone on the same page? Which design flaws must you absolutely avoid? How do engineers slow designs with poor CSS? This presentation covers the best practices in design and OO CSS for fast, maintainable sites. * Abstraction * Flexibility * Grids * Location dependent styles Velocity Conference, 2009

What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?

This document discusses object-oriented CSS (OOCSS) as an evolution of CSS that makes it more powerful. OOCSS involves creating reusable CSS objects rather than page-specific rules, setting good global defaults, abstracting reusable elements, separating container and content, and using multiple classes to simulate inheritance. This allows for more scalable, maintainable and performant CSS code. Some best practices of OOCSS include creating semantic object classes like .heading rather than styling specific elements directly. The document provides examples of OOCSS principles and their benefits.

performancef2ecss
WHAT KIND DO YOU
                               HAVE?




Thursday, June 24, 2010
WHAT KIND DO YOU
                               HAVE?


    ❖   Try dust-me selectors




Thursday, June 24, 2010
WHAT KIND DO YOU
                               HAVE?


    ❖   Try dust-me selectors
    ❖   Track them over time -
         ‣   changes are more important than an absolute number




Thursday, June 24, 2010
3            Text


                          UNPREDICTABILITY
               Make each object predictable and location independent



Thursday, June 24, 2010

Recommended for you

Pourquoi la performance?
Pourquoi la performance?Pourquoi la performance?
Pourquoi la performance?

Quantifier et améliorer la performance de tout produit Yahoo! mondial avec Éric Daspet pour ParisWeb 2008

smushitÉricdaspet"
Design Fast Websites
Design Fast WebsitesDesign Fast Websites
Design Fast Websites

Nicole Sullivan gives a presentation on designing fast websites. She discusses why performance matters, how websites have grown more complex over time, and how poor performance can negatively impact businesses. She provides several best practices for optimizing websites, such as creating reusable components, using consistent styles, making modules transparent, optimizing images through sprites and compression, avoiding non-standard fonts and using columns instead of rows.

f2esummit08yahooyslow
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional Performance

The 7 Habits of Exceptional Performance discusses techniques for optimizing website performance. It recommends flushing the buffer early, using GET requests for AJAX, preloading components, avoiding filters, measuring performance metrics, and balancing new features with performance improvements. High performance should be baked into the development process from the start. Key metrics to track include page weight, response time, and HTTP requests.

businessperformancebreakthroughs
h3




Thursday, June 24, 2010
h3




Thursday, June 24, 2010
A      Heading should not become a          Heading

                                in another part of the page.




Thursday, June 24, 2010
AVOID
                                 EXAMPLE
                          #weatherModule h3{color:red;}
                          #tabs h3{color:blue}


    ❖   Global color undefined for h3, so it will be
         ‣   unstyled in new modules,
         ‣   developers forced to write more CSS for the same style




Thursday, June 24, 2010

Recommended for you

After YSlow "A"
After YSlow "A"After YSlow "A"
After YSlow "A"

The document discusses 20 additional best practices for improving web performance beyond the original 14 recommendations from YSlow. It covers techniques like flushing the buffer early, splitting components for post-loading, preloading necessary assets, reducing unnecessary DOM elements, optimizing images through techniques like converting to smaller file formats and using CSS sprites, and designing for mobile performance. The document provides examples and case studies to illustrate the recommendations and cites additional resources on web performance.

performanceyslowwebsite
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems

Stream processing is a crucial component of modern data infrastructure, but constructing an efficient and scalable stream processing system can be challenging. Decoupling compute and storage architecture has emerged as an effective solution to these challenges, but it can introduce high latency issues, especially when dealing with complex continuous queries that necessitate managing extra-large internal states. In this talk, we focus on addressing the high latency issues associated with S3 storage in stream processing systems that employ a decoupled compute and storage architecture. We delve into the root causes of latency in this context and explore various techniques to minimize the impact of S3 latency on stream processing performance. Our proposed approach is to implement a tiered storage mechanism that leverages a blend of high-performance and low-cost storage tiers to reduce data movement between the compute and storage layers while maintaining efficient processing. Throughout the talk, we will present experimental results that demonstrate the effectiveness of our approach in mitigating the impact of S3 latency on stream processing. By the end of the talk, attendees will have gained insights into how to optimize their stream processing systems for reduced latency and improved cost-efficiency.

Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection

Cybersecurity is a major concern in today's connected digital world. Threats to organizations are constantly evolving and have the potential to compromise sensitive information, disrupt operations, and lead to significant financial losses. Traditional cybersecurity techniques often fall short against modern attackers. Therefore, advanced techniques for cyber security analysis and anomaly detection are essential for protecting digital assets. This blog explores these cutting-edge methods, providing a comprehensive overview of their application and importance.

cybersecurityanomaly detectionadvanced techniques
HOW DO YOU TEST FOR
             UNPREDICTABLE CODE?
                          #foo h3{...}
                          #bar h3{...}
                          #baz h3{...}

                          grep
                          h[1-6]



Thursday, June 24, 2010
h1-h6
                     How many? You need site-wide headings




Thursday, June 24, 2010
511
                          declarations setting styles for h1-h6


  56% >10
  9% >100
Thursday, June 24, 2010
HEADINGS BEFORE



                            958
                              declarations h1-h6



                                                   Facebook
Thursday, June 24, 2010

Recommended for you

UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference

We are honored to launch and host this event for our UiPath Polish Community, with the help of our partners - Proservartner! We certainly hope we have managed to spike your interest in the subjects to be presented and the incredible networking opportunities at hand, too! Check out our proposed agenda below 👇👇 08:30 ☕ Welcome coffee (30') 09:00 Opening note/ Intro to UiPath Community (10') Cristina Vidu, Global Manager, Marketing Community @UiPath Dawid Kot, Digital Transformation Lead @Proservartner 09:10 Cloud migration - Proservartner & DOVISTA case study (30') Marcin Drozdowski, Automation CoE Manager @DOVISTA Pawel Kamiński, RPA developer @DOVISTA Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner 09:40 From bottlenecks to breakthroughs: Citizen Development in action (25') Pawel Poplawski, Director, Improvement and Automation @McCormick & Company Michał Cieślak, Senior Manager, Automation Programs @McCormick & Company 10:05 Next-level bots: API integration in UiPath Studio (30') Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner 10:35 ☕ Coffee Break (15') 10:50 Document Understanding with my RPA Companion (45') Ewa Gruszka, Enterprise Sales Specialist, AI & ML @UiPath 11:35 Power up your Robots: GenAI and GPT in REFramework (45') Krzysztof Karaszewski, Global RPA Product Manager 12:20 🍕 Lunch Break (1hr) 13:20 From Concept to Quality: UiPath Test Suite for AI-powered Knowledge Bots (30') Kamil Miśko, UiPath MVP, Senior RPA Developer @Zurich Insurance 13:50 Communications Mining - focus on AI capabilities (30') Thomasz Wierzbicki, Business Analyst @Office Samurai 14:20 Polish MVP panel: Insights on MVP award achievements and career profiling

#uipathcommunity#automation#automationdeveloper
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024

This presentation explores the practical application of image description techniques. Familiar guidelines will be demonstrated in practice, and descriptions will be developed “live”! If you have learned a lot about the theory of image description techniques but want to feel more confident putting them into practice, this is the presentation for you. There will be useful, actionable information for everyone, whether you are working with authors, colleagues, alone, or leveraging AI as a collaborator. Link to presentation recording and transcript: https://bnctechforum.ca/sessions/details-of-description-part-ii-describing-images-in-practice/ Presented by BookNet Canada on June 25, 2024, with support from the Department of Canadian Heritage.

a11yaccessibilityalt text
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024

This is a powerpoint that features Microsoft Teams Devices and everything that is new including updates to its software and devices for May 2024

microsoft teamsmicrosoft
HEADINGS AFTER:



                              25
                                    Chad Little - Facebook
Thursday, June 24, 2010
2                   Text


                           SPECIFICITY WARS
                          lobbing specificity grenades over the cube wall



Thursday, June 24, 2010
SPECIFICITY SCREWS UP
                  THE CASCADE
                          and the cascade kind of rocks, so how do we use
                                          the good parts?




Thursday, June 24, 2010
SIMPLIFY SPECIFICITY




Thursday, June 24, 2010

Recommended for you

Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence

Our Linux Web Hosting plans offer unbeatable performance, security, and scalability, ensuring your website runs smoothly and efficiently. Visit- https://onliveserver.com/linux-web-hosting/

cheap linux hosting
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf

Support en anglais diffusé lors de l'événement 100% IA organisé dans les locaux parisiens d'Iguane Solutions, le mardi 2 juillet 2024 : - Présentation de notre plateforme IA plug and play : ses fonctionnalités avancées, telles que son interface utilisateur intuitive, son copilot puissant et des outils de monitoring performants. - REX client : Cyril Janssens, CTO d’ easybourse, partage son expérience d’utilisation de notre plateforme IA plug & play.

genaicloudrgpd
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx

Your comprehensive guide to RPA in healthcare for 2024. Explore the benefits, use cases, and emerging trends of robotic process automation. Understand the challenges and prepare for the future of healthcare automation

rpa in healthcarerpa in healthcare usarpa in healthcare industry
.mod .hd{...}
.ie .mod .hd{...}
.weatherMod .hd {...}




                USE HACKS SPARINGLY
                          And don’t let them change your specificity




Thursday, June 24, 2010
.mod .hd{...}
           X
.ie .mod .hd{...}
.weatherMod .hd {...}




                USE HACKS SPARINGLY
                           And don’t let them change your specificity



                          .mod .hd{color: red; _zoom:1;}
                          .weatherMod .hd{...}

Thursday, June 24, 2010
#navigation{...}
    #header{...}




                          AVOID STYLING IDS
                          IDs impact specificity and can’t be reused




 IDs are for JS
Thursday, June 24, 2010
X
    #navigation{...}
    #header{...}




                          AVOID STYLING IDS
                          IDs impact specificity and can’t be reused




 IDs are for JS
Thursday, June 24, 2010

Recommended for you

BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL

Blockchain technology is transforming industries and reshaping the way we conduct business, manage data, and secure transactions. Whether you're new to blockchain or looking to deepen your knowledge, our guidebook, "Blockchain for Dummies", is your ultimate resource.

blockchainweb3blockchain technology
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx

MuleSoft Meetup on APM and IDP

mulesoftai
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx

This is a slide deck that showcases the updates in Microsoft Copilot for May 2024

microsoftmicrosoft copilot
.nav {color: red !important;}




                          AVOID !IMPORTANT
                              except on leaf nodes




Thursday, June 24, 2010
.nav {color: red !important;}   X

                          AVOID !IMPORTANT
                              except on leaf nodes




Thursday, June 24, 2010
!IMPORTANT



                           518
                          declarations using important



 12% have greater than 50
Thursday, June 24, 2010
div.error{...}




                          STYLE CLASSES
                               rather than elements




Thursday, June 24, 2010

Recommended for you

Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy

Not so much to say

The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing

Invited Remote Lecture to SC21 The International Conference for High Performance Computing, Networking, Storage, and Analysis St. Louis, Missouri November 18, 2021

distributed supercomputerdistributed machine learning
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant

Password Rotation in 2024 is still Relevant

passwordmanagementrotation
X
              div.error{...}




                          STYLE CLASSES
                               rather than elements


                  .error{        most of the code goes here   }



Thursday, June 24, 2010
X
              div.error{...}




                          STYLE CLASSES
                               rather than elements


        .error{                  most of the code goes here   }
     div.error{                                               }
       p.error{                         exceptions only       }
      em.error{                                               }
Thursday, June 24, 2010
html body .myModule div .hd{...}
.myModule2 .hd {...}


                              GIVE RULES THE
                             SAME STRENGTH
                          Use cascade order to overwrite previous rules




Thursday, June 24, 2010
X
html body .myModule div .hd{...}
.myModule2 .hd {...}


                              GIVE RULES THE
                             SAME STRENGTH
                          Use cascade order to overwrite previous rules



                          .myModule .hd{...}
                          .myModule2 .hd{...}

Thursday, June 24, 2010

Recommended for you

Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf

To help you choose the best DiskWarrior alternative, we've compiled a comparison table summarizing the features, pros, cons, and pricing of six alternatives.

data recoverydatadiskwarrior
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx

How do we build an IoT product, and make it profitable? Talk from the IoT meetup in March 2024. https://www.meetup.com/iot-sweden/events/299487375/

iot
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024

Everything that I found interesting about machines behaving intelligently during June 2024

quantumfaxmachine
1           Text


                          DUPLICATION
                              CSS kudzu on steroids



Thursday, June 24, 2010
GREP IS YOUR FRIEND
                    look at the stylesheets globally rather than per page




Thursday, June 24, 2010
margintoo many? You need reset.css




Thursday, June 24, 2010
518
                          declarations reset margin to zero


  64% > 10
 14% > 100
Thursday, June 24, 2010

Recommended for you

Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf

As a popular open-source library for analytics engineering, dbt is often used in combination with Airflow. Orchestrating and executing dbt models as DAGs ensures an additional layer of control over tasks, observability, and provides a reliable, scalable environment to run dbt models. This webinar will cover a step-by-step guide to Cosmos, an open source package from Astronomer that helps you easily run your dbt Core projects as Airflow DAGs and Task Groups, all with just a few lines of code. We’ll walk through: - Standard ways of running dbt (and when to utilize other methods) - How Cosmos can be used to run and visualize your dbt projects in Airflow - Common challenges and how to address them, including performance, dependency conflicts, and more - How running dbt projects in Airflow helps with cost optimization Webinar given on 9 July 2024

apache airflowdbtdbt-core
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf

Profile portofolio

Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces

An invited talk given by Mark Billinghurst on Research Directions for Cross Reality Interfaces. This was given on July 2nd 2024 as part of the 2024 Summer School on Cross Reality in Hagenberg, Austria (July 1st - 7th)

augmented realitycross realityvirtual reality
float
                          too many? You need grids




Thursday, June 24, 2010
733
                          declarations floated elements


  56% > 10
 13% > 100
Thursday, June 24, 2010
font-size            headings may be disguised in class names




Thursday, June 24, 2010
FONT-SIZE



                             889
                          declarations changed the font-size


 78% >10
 23% >100
Thursday, June 24, 2010

Recommended for you

HOW DID FACEBOOK
                REDUCE DUPLICATION?
                          let’s look at an example




Thursday, June 24, 2010
MEDIA BLOCK EXAMPLE




Thursday, June 24, 2010
ALL OF THESE ARE THE
                       SAME OBJECT




Thursday, June 24, 2010
WHAT DO WE KNOW?

                          ❖ Can be nested
                          ❖ Optional right button

                          ❖ Must clearfix




Thursday, June 24, 2010

Recommended for you

WHAT DON’T WE KNOW?

                          ❖ Image width and decoration vary
                          ❖ Right content is unknown

                          ❖ Width unknown




Thursday, June 24, 2010
SEPARATE STRUCTURE
                        FROM CHROME




Thursday, June 24, 2010
A FEW LINES OF HTML...

            <div class="media attribution">
              <a href="http://twitter.com/stubbornella" class="img">
                <img src="mini.jpg" alt="Stubbornella" />
              </a>
              <div class="bd">@Stubbornella 14 minutes ago</div>
            </div>




Thursday, June 24, 2010
4 LINES OF CSS...




Thursday, June 24, 2010

Recommended for you

Thursday, June 24, 2010
HTML SIZE
                      reduced by 50%




                                   by Stefan Parker
Thursday, June 24, 2010
“Due to these efforts, we cut our average
            CSS bytes per page by 19% (after gzip) and
            HTML bytes per page by 44% (before
            gzip).”



                          Jason Sobel
                          http://www.facebook.com/note.php?note_id=307069903919
Thursday, June 24, 2010
LET’S KEEP TALKING...
                                www.stubbornella.org
                                  @stubbornella

                                  http://phpied.com
                                  @stoyanstefanov


                 OOCSS Project: http://github.com/stubbornella/oocss/

Thursday, June 24, 2010

Recommended for you

More Related Content

Viewers also liked

Building the Media Block in ReactJS
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS
Nicole Sullivan
 
Frameworks
FrameworksFrameworks
Frameworks
Ryan Levick
 
The World of Social Objects
The World of Social ObjectsThe World of Social Objects
The World of Social Objects
JESS3
 
The jQuery Divide
The jQuery DivideThe jQuery Divide
The jQuery Divide
Rebecca Murphey
 
Mapping History on Open Street Map
Mapping History on Open Street MapMapping History on Open Street Map
Mapping History on Open Street Map
frankieroberto
 
Automating your workflow with Gulp.js
Automating your workflow with Gulp.jsAutomating your workflow with Gulp.js
Automating your workflow with Gulp.js
Bo-Yi Wu
 
Object Oriented CSS
Object Oriented CSSObject Oriented CSS
Object Oriented CSS
Nicole Sullivan
 
The Real Life Social Network v2
The Real Life Social Network v2The Real Life Social Network v2
The Real Life Social Network v2
Paul Adams
 
CSS Wish List @JSConf
CSS Wish List @JSConfCSS Wish List @JSConf
CSS Wish List @JSConf
Nicole Sullivan
 
Spring Web Views
Spring Web ViewsSpring Web Views
Spring Web Views
Emprovise
 
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScriptWeb Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
brucelawson
 
HTML5 Who what where when why how
HTML5 Who what where when why howHTML5 Who what where when why how
HTML5 Who what where when why how
brucelawson
 
The Home of the Future: CSS Layouts
The Home of the Future: CSS LayoutsThe Home of the Future: CSS Layouts
The Home of the Future: CSS Layouts
Peter Gasston
 
Leveraging HTML 5.0
Leveraging HTML 5.0Leveraging HTML 5.0
Leveraging HTML 5.0
brucelawson
 
Don't feed the trolls
Don't feed the trollsDon't feed the trolls
Don't feed the trolls
Nicole Sullivan
 
Open Educational Resources Initiative in Macedonia
Open Educational Resources Initiative in MacedoniaOpen Educational Resources Initiative in Macedonia
Open Educational Resources Initiative in Macedonia
Irina (Shumadieva) Micov
 
Testing The Legacy: Making Existing Applications Testable Without Epic Efforts
Testing The Legacy: Making Existing Applications Testable Without Epic EffortsTesting The Legacy: Making Existing Applications Testable Without Epic Efforts
Testing The Legacy: Making Existing Applications Testable Without Epic Efforts
Alex Leonov
 
Does agile mean having even less time for testing?!
Does agile mean having even less time for testing?!Does agile mean having even less time for testing?!
Does agile mean having even less time for testing?!
Dr. Alexander Schwartz
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing Us
Nicole Sullivan
 
Bruce Lawson: Progressive Web Apps: the future of Apps
Bruce Lawson: Progressive Web Apps: the future of AppsBruce Lawson: Progressive Web Apps: the future of Apps
Bruce Lawson: Progressive Web Apps: the future of Apps
brucelawson
 

Viewers also liked (20)

Building the Media Block in ReactJS
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS
 
Frameworks
FrameworksFrameworks
Frameworks
 
The World of Social Objects
The World of Social ObjectsThe World of Social Objects
The World of Social Objects
 
The jQuery Divide
The jQuery DivideThe jQuery Divide
The jQuery Divide
 
Mapping History on Open Street Map
Mapping History on Open Street MapMapping History on Open Street Map
Mapping History on Open Street Map
 
Automating your workflow with Gulp.js
Automating your workflow with Gulp.jsAutomating your workflow with Gulp.js
Automating your workflow with Gulp.js
 
Object Oriented CSS
Object Oriented CSSObject Oriented CSS
Object Oriented CSS
 
The Real Life Social Network v2
The Real Life Social Network v2The Real Life Social Network v2
The Real Life Social Network v2
 
CSS Wish List @JSConf
CSS Wish List @JSConfCSS Wish List @JSConf
CSS Wish List @JSConf
 
Spring Web Views
Spring Web ViewsSpring Web Views
Spring Web Views
 
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScriptWeb Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
 
HTML5 Who what where when why how
HTML5 Who what where when why howHTML5 Who what where when why how
HTML5 Who what where when why how
 
The Home of the Future: CSS Layouts
The Home of the Future: CSS LayoutsThe Home of the Future: CSS Layouts
The Home of the Future: CSS Layouts
 
Leveraging HTML 5.0
Leveraging HTML 5.0Leveraging HTML 5.0
Leveraging HTML 5.0
 
Don't feed the trolls
Don't feed the trollsDon't feed the trolls
Don't feed the trolls
 
Open Educational Resources Initiative in Macedonia
Open Educational Resources Initiative in MacedoniaOpen Educational Resources Initiative in Macedonia
Open Educational Resources Initiative in Macedonia
 
Testing The Legacy: Making Existing Applications Testable Without Epic Efforts
Testing The Legacy: Making Existing Applications Testable Without Epic EffortsTesting The Legacy: Making Existing Applications Testable Without Epic Efforts
Testing The Legacy: Making Existing Applications Testable Without Epic Efforts
 
Does agile mean having even less time for testing?!
Does agile mean having even less time for testing?!Does agile mean having even less time for testing?!
Does agile mean having even less time for testing?!
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing Us
 
Bruce Lawson: Progressive Web Apps: the future of Apps
Bruce Lawson: Progressive Web Apps: the future of AppsBruce Lawson: Progressive Web Apps: the future of Apps
Bruce Lawson: Progressive Web Apps: the future of Apps
 

Similar to 5 Mistakes of Massive CSS

Designing a One-Size-Fits-All University Web Template, and other Impossible B...
Designing a One-Size-Fits-All University Web Template, and other Impossible B...Designing a One-Size-Fits-All University Web Template, and other Impossible B...
Designing a One-Size-Fits-All University Web Template, and other Impossible B...
thisisdrew
 
44275732 chef
44275732 chef44275732 chef
44275732 chef
bunnythedog
 
From where OpenVBX came from to how we open sourced it
From where OpenVBX came from to how we open sourced itFrom where OpenVBX came from to how we open sourced it
From where OpenVBX came from to how we open sourced it
minddog
 
20100627 sobe2
20100627 sobe220100627 sobe2
20100627 sobe2
Shu Shimbo
 
Plone Conference 2010 – Where we go from here
Plone Conference 2010 – Where we go from herePlone Conference 2010 – Where we go from here
Plone Conference 2010 – Where we go from here
Eric Steele
 
Designing With Type :: FontConf 2010
Designing With Type :: FontConf 2010Designing With Type :: FontConf 2010
Designing With Type :: FontConf 2010
Kyle Meyer
 
HTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduHTML5/CSS3 @ Baidu
HTML5/CSS3 @ Baidu
Zi Bin Cheah
 
From AARGH to AAAHH: Web Content Strategy
From AARGH to AAAHH: Web Content StrategyFrom AARGH to AAAHH: Web Content Strategy
From AARGH to AAAHH: Web Content Strategy
micajobe
 
FITC 2010 Slides
FITC 2010 SlidesFITC 2010 Slides
FITC 2010 Slides
jkosoy
 

Similar to 5 Mistakes of Massive CSS (9)

Designing a One-Size-Fits-All University Web Template, and other Impossible B...
Designing a One-Size-Fits-All University Web Template, and other Impossible B...Designing a One-Size-Fits-All University Web Template, and other Impossible B...
Designing a One-Size-Fits-All University Web Template, and other Impossible B...
 
44275732 chef
44275732 chef44275732 chef
44275732 chef
 
From where OpenVBX came from to how we open sourced it
From where OpenVBX came from to how we open sourced itFrom where OpenVBX came from to how we open sourced it
From where OpenVBX came from to how we open sourced it
 
20100627 sobe2
20100627 sobe220100627 sobe2
20100627 sobe2
 
Plone Conference 2010 – Where we go from here
Plone Conference 2010 – Where we go from herePlone Conference 2010 – Where we go from here
Plone Conference 2010 – Where we go from here
 
Designing With Type :: FontConf 2010
Designing With Type :: FontConf 2010Designing With Type :: FontConf 2010
Designing With Type :: FontConf 2010
 
HTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduHTML5/CSS3 @ Baidu
HTML5/CSS3 @ Baidu
 
From AARGH to AAAHH: Web Content Strategy
From AARGH to AAAHH: Web Content StrategyFrom AARGH to AAAHH: Web Content Strategy
From AARGH to AAAHH: Web Content Strategy
 
FITC 2010 Slides
FITC 2010 SlidesFITC 2010 Slides
FITC 2010 Slides
 

More from Nicole Sullivan

Why are you here?
Why are you here?Why are you here?
Why are you here?
Nicole Sullivan
 
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceCreating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
Nicole Sullivan
 
CSS Power Tools
CSS Power ToolsCSS Power Tools
CSS Power Tools
Nicole Sullivan
 
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
Nicole Sullivan
 
Taming CSS Selectors
Taming CSS SelectorsTaming CSS Selectors
Taming CSS Selectors
Nicole Sullivan
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The Fabulous
Nicole Sullivan
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?
Nicole Sullivan
 
Pourquoi la performance?
Pourquoi la performance?Pourquoi la performance?
Pourquoi la performance?
Nicole Sullivan
 
Design Fast Websites
Design Fast WebsitesDesign Fast Websites
Design Fast Websites
Nicole Sullivan
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
Nicole Sullivan
 
After YSlow "A"
After YSlow "A"After YSlow "A"
After YSlow "A"
Nicole Sullivan
 

More from Nicole Sullivan (11)

Why are you here?
Why are you here?Why are you here?
Why are you here?
 
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceCreating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
 
CSS Power Tools
CSS Power ToolsCSS Power Tools
CSS Power Tools
 
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
 
Taming CSS Selectors
Taming CSS SelectorsTaming CSS Selectors
Taming CSS Selectors
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The Fabulous
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?
 
Pourquoi la performance?
Pourquoi la performance?Pourquoi la performance?
Pourquoi la performance?
 
Design Fast Websites
Design Fast WebsitesDesign Fast Websites
Design Fast Websites
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
 
After YSlow "A"
After YSlow "A"After YSlow "A"
After YSlow "A"
 

Recently uploaded

Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
BookNet Canada
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
Stephanie Beckett
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
Sally Laouacheria
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
Bert Blevins
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
Andrey Yasko
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 

Recently uploaded (20)

Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 

5 Mistakes of Massive CSS

  • 1. TOP 5 MISTAKES OF MASSIVE CSS! Nicole Sullivan & Stoyan Stefanov Thursday, June 24, 2010
  • 2. FIND US AT... @stubbornella @stoyanstefanov Thursday, June 24, 2010
  • 3. WHY OPTIMIZE CSS? • It blocks progressive rendering test: http://www.phpied.com/files/css-loading/table.php • It’s verbose (property value pairs cannot be minified like JS) text-decoration: underline != td: u Thursday, June 24, 2010
  • 4. TOP 1000 STUDY 1. Grab top Alexa sites 2. Start Fiddler 3. Load each site 4. Export from Fiddler Thursday, June 24, 2010
  • 5. <?php $file = file('alexa.txt'); foreach ($file as $url) { launch($url); } function launch($url) { try { $ie = new COM("InternetExplorer.Application"); $ie->Visible = true; $ie->Navigate2($url); while ($ie->ReadyState != 4) sleep(1); $ie->Quit(); } catch (Exception $e) {} } ?> Thursday, June 24, 2010
  • 6. 42% DON’T GZIP CSS Thursday, June 24, 2010
  • 7. 44% HAVE MORE THAN 2 CSS FILES 56% 44% Thursday, June 24, 2010
  • 8. 56% SERVE CSS WITH COOKIES Thursday, June 24, 2010
  • 9. 62% DON’T MINIFY would get more than 10% savings from YUI compressor Thursday, June 24, 2010
  • 10. 21% HAVE >100K OF CSS 21% 11% 11% 44% 24% Thursday, June 24, 2010
  • 11. HASTE TRACE-BASED PACKAGING homepage homepage Date CSS files CSS weight files weight Nov 2008 487 1.7MB 24 69KB May 2009 706 1.9MB 15 64KB http://velocityconference.blip.tv/file/2293221/ David Wei & Changhao Jiang Thursday, June 24, 2010
  • 12. KUDZU Was introduced to the United States between 1935 and 1950 by the Soil Conservation Service to prevent soil erosion. Thursday, June 24, 2010
  • 14. “OBJECT ORIENTED CSS SOUNDS GREAT, BUT WE HAVE A GIANT MESS!” how do we get from here to there? Thursday, June 24, 2010
  • 15. FACEBOOK DECIDED TO GO ON A DIET The CSS was one piece of the puzzle Thursday, June 24, 2010
  • 16. Jason Sobel - Perf Manager Fu MANY PIECES Nan Gao Kyle Delong - PHP David Wei & Changhao Jiang BigPipe Marcel Laverdet - Tom Occhino - JS XHP Makinde Shaun McIntyre - Adeagbo - JS Automated Spriting Thursday, June 24, 2010
  • 17. THEY REDUCED THEIR RESPONSE TIME BY HALF in only six months Thursday, June 24, 2010
  • 18. WHAT IS OBJECT ORIENTED CSS? A philosophy? A framework? A tool? Thursday, June 24, 2010
  • 19. MORE LIKE AN EVOLUTION OF THE LANGUAGE it makes CSS more powerful Thursday, June 24, 2010
  • 20. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} Thursday, June 24, 2010
  • 21. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} Until now, we focused all our effort here Thursday, June 24, 2010
  • 22. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} But, the architecture lives here Thursday, June 24, 2010
  • 23. MUCH LESS CODE easier to work with newbies Thursday, June 24, 2010
  • 24. GRIDS • 574 bytes • 14 lines of code • Percentage widths adapt to different page sizes • Includes halfs, thirds, fourths, and fifths • No gutters • Infinite nesting and stacking Thursday, June 24, 2010
  • 25. GRANULARITY FAIL + STALE RULES + UNPREDICTABILITY + DUPLICATION + SPECIFICITY WARS = MASSIVE CSS Thursday, June 24, 2010
  • 26. 5 Text GRANULARITY FAIL the CSS objects shouldn’t match the PHP objects Thursday, June 24, 2010
  • 32. WE WANT TO DO THE SAME THING WITH CSS Thursday, June 24, 2010
  • 33. CREATE THE BUILDING BLOCKS Thursday, June 24, 2010
  • 34. MOST SITES GET THE GRANULARITY WRONG and their architecture is set up to fail Thursday, June 24, 2010
  • 35. HOW? FIRST, A VISUAL INVENTORY Thursday, June 24, 2010
  • 36. TAKE A PHP OBJECT Thursday, June 24, 2010
  • 37. BREAK IT DOWN Thursday, June 24, 2010
  • 40. HEADINGS Heading - 16px bold #3B5998 Heading - 16px normal #333333 Heading - 15px bold #3B5998 • 12px headings eliminated Heading - 15px normal #333333 Heading - 14px bold #3B5998 • Blue only for links Heading - 14px normal #333333 Heading - 13px bold #3B5998 • Bold for all titles Heading - 13px normal #333333 • Chad Little went through Heading - 11px bold #3B5998 the entire site eliminating Heading - 11px normal #333333 duplicates. Thursday, June 24, 2010
  • 41. IT’S ALL ABOUT PATTERN MATCHING but you have to take a step back Thursday, June 24, 2010
  • 42. PHP OBJECTS != CSS OBJECTS you will be tempted, beware! Thursday, June 24, 2010
  • 43. 4 Text STALE RULES CSS gets crufty Thursday, June 24, 2010
  • 44. STALE IS TWO THINGS ❖ Truly stale - rules that are no longer used on the site ❖ Rules used on subsequent PV or activated on user action Thursday, June 24, 2010
  • 45. WHAT KIND DO YOU HAVE? Thursday, June 24, 2010
  • 46. WHAT KIND DO YOU HAVE? ❖ Try dust-me selectors Thursday, June 24, 2010
  • 47. WHAT KIND DO YOU HAVE? ❖ Try dust-me selectors ❖ Track them over time - ‣ changes are more important than an absolute number Thursday, June 24, 2010
  • 48. 3 Text UNPREDICTABILITY Make each object predictable and location independent Thursday, June 24, 2010
  • 51. A Heading should not become a Heading in another part of the page. Thursday, June 24, 2010
  • 52. AVOID EXAMPLE #weatherModule h3{color:red;} #tabs h3{color:blue} ❖ Global color undefined for h3, so it will be ‣ unstyled in new modules, ‣ developers forced to write more CSS for the same style Thursday, June 24, 2010
  • 53. HOW DO YOU TEST FOR UNPREDICTABLE CODE? #foo h3{...} #bar h3{...} #baz h3{...} grep h[1-6] Thursday, June 24, 2010
  • 54. h1-h6 How many? You need site-wide headings Thursday, June 24, 2010
  • 55. 511 declarations setting styles for h1-h6 56% >10 9% >100 Thursday, June 24, 2010
  • 56. HEADINGS BEFORE 958 declarations h1-h6 Facebook Thursday, June 24, 2010
  • 57. HEADINGS AFTER: 25 Chad Little - Facebook Thursday, June 24, 2010
  • 58. 2 Text SPECIFICITY WARS lobbing specificity grenades over the cube wall Thursday, June 24, 2010
  • 59. SPECIFICITY SCREWS UP THE CASCADE and the cascade kind of rocks, so how do we use the good parts? Thursday, June 24, 2010
  • 61. .mod .hd{...} .ie .mod .hd{...} .weatherMod .hd {...} USE HACKS SPARINGLY And don’t let them change your specificity Thursday, June 24, 2010
  • 62. .mod .hd{...} X .ie .mod .hd{...} .weatherMod .hd {...} USE HACKS SPARINGLY And don’t let them change your specificity .mod .hd{color: red; _zoom:1;} .weatherMod .hd{...} Thursday, June 24, 2010
  • 63. #navigation{...} #header{...} AVOID STYLING IDS IDs impact specificity and can’t be reused IDs are for JS Thursday, June 24, 2010
  • 64. X #navigation{...} #header{...} AVOID STYLING IDS IDs impact specificity and can’t be reused IDs are for JS Thursday, June 24, 2010
  • 65. .nav {color: red !important;} AVOID !IMPORTANT except on leaf nodes Thursday, June 24, 2010
  • 66. .nav {color: red !important;} X AVOID !IMPORTANT except on leaf nodes Thursday, June 24, 2010
  • 67. !IMPORTANT 518 declarations using important 12% have greater than 50 Thursday, June 24, 2010
  • 68. div.error{...} STYLE CLASSES rather than elements Thursday, June 24, 2010
  • 69. X div.error{...} STYLE CLASSES rather than elements .error{ most of the code goes here } Thursday, June 24, 2010
  • 70. X div.error{...} STYLE CLASSES rather than elements .error{ most of the code goes here } div.error{ } p.error{ exceptions only } em.error{ } Thursday, June 24, 2010
  • 71. html body .myModule div .hd{...} .myModule2 .hd {...} GIVE RULES THE SAME STRENGTH Use cascade order to overwrite previous rules Thursday, June 24, 2010
  • 72. X html body .myModule div .hd{...} .myModule2 .hd {...} GIVE RULES THE SAME STRENGTH Use cascade order to overwrite previous rules .myModule .hd{...} .myModule2 .hd{...} Thursday, June 24, 2010
  • 73. 1 Text DUPLICATION CSS kudzu on steroids Thursday, June 24, 2010
  • 74. GREP IS YOUR FRIEND look at the stylesheets globally rather than per page Thursday, June 24, 2010
  • 75. margintoo many? You need reset.css Thursday, June 24, 2010
  • 76. 518 declarations reset margin to zero 64% > 10 14% > 100 Thursday, June 24, 2010
  • 77. float too many? You need grids Thursday, June 24, 2010
  • 78. 733 declarations floated elements 56% > 10 13% > 100 Thursday, June 24, 2010
  • 79. font-size headings may be disguised in class names Thursday, June 24, 2010
  • 80. FONT-SIZE 889 declarations changed the font-size 78% >10 23% >100 Thursday, June 24, 2010
  • 81. HOW DID FACEBOOK REDUCE DUPLICATION? let’s look at an example Thursday, June 24, 2010
  • 83. ALL OF THESE ARE THE SAME OBJECT Thursday, June 24, 2010
  • 84. WHAT DO WE KNOW? ❖ Can be nested ❖ Optional right button ❖ Must clearfix Thursday, June 24, 2010
  • 85. WHAT DON’T WE KNOW? ❖ Image width and decoration vary ❖ Right content is unknown ❖ Width unknown Thursday, June 24, 2010
  • 86. SEPARATE STRUCTURE FROM CHROME Thursday, June 24, 2010
  • 87. A FEW LINES OF HTML... <div class="media attribution"> <a href="http://twitter.com/stubbornella" class="img"> <img src="mini.jpg" alt="Stubbornella" /> </a> <div class="bd">@Stubbornella 14 minutes ago</div> </div> Thursday, June 24, 2010
  • 88. 4 LINES OF CSS... Thursday, June 24, 2010
  • 90. HTML SIZE reduced by 50% by Stefan Parker Thursday, June 24, 2010
  • 91. “Due to these efforts, we cut our average CSS bytes per page by 19% (after gzip) and HTML bytes per page by 44% (before gzip).” Jason Sobel http://www.facebook.com/note.php?note_id=307069903919 Thursday, June 24, 2010
  • 92. LET’S KEEP TALKING... www.stubbornella.org @stubbornella http://phpied.com @stoyanstefanov OOCSS Project: http://github.com/stubbornella/oocss/ Thursday, June 24, 2010