Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca
If you’re working on a large project with a lot of hands in the CSS pot, then your CSS may be doomed to code bloat failure. Scalable and modular CSS architectures and approaches are the new hotness and rightfully so. They provide sanity, predictably and scalability in a potentially crazy coding world. This session will give an overview of some the most popular approaches, including OOCSS, SMACSS, CSS for Grownups, and DRY CSS as well as discussing some general principles for keeping your CSS clean, optimized, and easy to maintain.
Let’s face it… while CSS is as basic a language as you can get, it can be a challenge to master - especially when it comes to implementing large scalable projects. Without some sort of framework, it’s easy to end up in specificity spaghetti with severely duplicated code, browser performance issues, and generally unmaintainable, unsemantic, and unscalable CSS code.
Adopting a design pattern like OOCSS will help you eliminate these nightmares and make crafting your CSS a joy once again. This workshop will examine the importance of a modular CSS architecture, profile the core principles of OOCSS, allow you to try your hand at module implementation, and touch on a few of the pros and “cons” of the system.
Extended slides from a recent Sydney Port80 presentation. The slides cover three overall topics: 1) a quick timeline of CSS-related events, 2) key events that changed CSS and 3) a discussion on writing better CSS.
Decoupling the Front-end with Modular CSSJulie Cameron
CSS is hard. It’s a simple language, but getting it right and avoiding specificity hell can be a challenge if you don’t have the right framework to back you up. Especially in large scaling projects, you might start adding ID selectors here and !important properties there and the next thing you know you’ve backed yourself into a corner where even the smallest of UI changes will take hours to work out. Ew.
Or how about this? Ever jump into a project and find that even the slightest markup change results in broken JavaScript AND sometimes even broken backend feature tests?! WTF. Ew.
This talk will look at how taking a modular, object-oriented approach to CSS can turn frontend woes into frontend wins. We’ll examine modern CSS approaches like OOCSS, SMACSS, and BEM and demonstrate how they will help to not only decouple your CSS styles and reduce specificity conflicts, but how they will also help to decouple your CSS and HTML from your JavaScript and feature specs.
Video from SEM.js November 2014: http://youtu.be/HoQ-QEusyS0
CSS3 - is everything we used to do wrong? Russ Weakley
This presentation from Remix 2011 explores CSS3, why we should use it and some of the issues. It also explores the bigger picture. Css resets, frameworks, Object oriented CSS, pre-processors, and responsive web design.
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...Jer Clarke
Slides for a talk at the ConFoo 2012 conference in Montreal. I explain a simple yet powerful CSS architecture that avoids duplication and increases design consistency by grouping shared properties together rather than redefining them over and over. In the process I explain preprocessors like LESS and SASS, as well as the OOCSS fad, pointing out how they are insufficiently standards-compliant.
Let’s face it… while CSS is as basic a language as you can get, it can be a challenge to master - especially when it comes to implementing large scalable projects. Without some sort of framework, it’s easy to end up in specificity spaghetti with severely duplicated code, browser performance issues, and generally unmaintainable, unsemantic, and unscalable CSS code.
Adopting a design pattern like OOCSS will help you eliminate these nightmares and make crafting your CSS a joy once again. This workshop will examine the importance of a modular CSS architecture, profile the core principles of OOCSS, allow you to try your hand at module implementation, and touch on a few of the pros and “cons” of the system.
Extended slides from a recent Sydney Port80 presentation. The slides cover three overall topics: 1) a quick timeline of CSS-related events, 2) key events that changed CSS and 3) a discussion on writing better CSS.
Decoupling the Front-end with Modular CSSJulie Cameron
CSS is hard. It’s a simple language, but getting it right and avoiding specificity hell can be a challenge if you don’t have the right framework to back you up. Especially in large scaling projects, you might start adding ID selectors here and !important properties there and the next thing you know you’ve backed yourself into a corner where even the smallest of UI changes will take hours to work out. Ew.
Or how about this? Ever jump into a project and find that even the slightest markup change results in broken JavaScript AND sometimes even broken backend feature tests?! WTF. Ew.
This talk will look at how taking a modular, object-oriented approach to CSS can turn frontend woes into frontend wins. We’ll examine modern CSS approaches like OOCSS, SMACSS, and BEM and demonstrate how they will help to not only decouple your CSS styles and reduce specificity conflicts, but how they will also help to decouple your CSS and HTML from your JavaScript and feature specs.
Video from SEM.js November 2014: http://youtu.be/HoQ-QEusyS0
CSS3 - is everything we used to do wrong? Russ Weakley
This presentation from Remix 2011 explores CSS3, why we should use it and some of the issues. It also explores the bigger picture. Css resets, frameworks, Object oriented CSS, pre-processors, and responsive web design.
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...Jer Clarke
Slides for a talk at the ConFoo 2012 conference in Montreal. I explain a simple yet powerful CSS architecture that avoids duplication and increases design consistency by grouping shared properties together rather than redefining them over and over. In the process I explain preprocessors like LESS and SASS, as well as the OOCSS fad, pointing out how they are insufficiently standards-compliant.
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
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
OOCSS And The Life-Altering Awesomeness That Is Modular CSS Architecture
Prepared for the SEM.js Birthday Bash at Nutshell in Ann Arbor, Michigan on May 12, 2014
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Google's goal is to develop a system of design that allows for a unified user experience across all their products on any platform. Supported Browser Chrome,Firefox, IE9+(icons IE10+).
Tired of eating CSS soup day after day? No longer want to play stylesheet Jenga whenever you try to edit main.css? You just may need a CSS architecture. This talk will review the major CSS architectures like BEM (Block Element Modifier) and SMACSS (Scalable and Modular Architecture for CSS) while discussing the pros and cons of each.
CSS3 isn't the future, it's the present. Learn the gamut of CSS3 properties from colors, web fonts, and visual effects, to transitions, animations and media queries. Find the inspiration and resources to go forth and implement the new properties with confidence.
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...Nicole Sullivan
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.
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.
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
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
OOCSS And The Life-Altering Awesomeness That Is Modular CSS Architecture
Prepared for the SEM.js Birthday Bash at Nutshell in Ann Arbor, Michigan on May 12, 2014
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Google's goal is to develop a system of design that allows for a unified user experience across all their products on any platform. Supported Browser Chrome,Firefox, IE9+(icons IE10+).
Tired of eating CSS soup day after day? No longer want to play stylesheet Jenga whenever you try to edit main.css? You just may need a CSS architecture. This talk will review the major CSS architectures like BEM (Block Element Modifier) and SMACSS (Scalable and Modular Architecture for CSS) while discussing the pros and cons of each.
CSS3 isn't the future, it's the present. Learn the gamut of CSS3 properties from colors, web fonts, and visual effects, to transitions, animations and media queries. Find the inspiration and resources to go forth and implement the new properties with confidence.
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...Nicole Sullivan
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.
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.
Creating a Simple, Accessible On/Off SwitchRuss Weakley
Have you ever tried to style checkboxes or radio buttons and ended up pulling your hair out? This presentation will explore a few simple tricks that can be used to style checkboxes and radio buttons. In this case, we will make them look like an on/off switch.
If you're working on a large project with a lot of hands in the CSS pot, then your CSS may be doomed to code bloat failure. Scalable and modular CSS architectures and approaches are the new hotness and rightfully so. They provide sanity, predictably and scalability in a potentially crazy coding world. This session will give an overview of some the most popular approaches, including OOCSS, SMACSS, CSS for Grownups, and DRY CSS as well as discussing some general principles for keeping your CSS clean, optimized, and easy to maintain. Presented at FITC Amsterdam 2013
Templates, trainings, threats: I’ve tried everything to get content from clients and colleagues sooner—and mobile hasn’t made things easier. Instead of planning pages, now we’re asking stakeholders to prioritize and manage a million bits of modular content.
So how do we keep our subject-matter experts from feeling overwhelmed, prevent carousel-obsessed executives from endless homepage arguments, and get the content we need to make design and development decisions?
The answer is in using content strategy as a means to orchestrate, not dictate.
The web is finally coming of age with respect to increasing sophistication of the structure and presentation of visual information, the standardization of technologies to more easily create and display this information, physical devices that make this information easily accessible, and finally growing social connectivity. Presented at Rich Web Experience 2011, Ft. Lauderdale, FL.
Let There Be Peace On CSS - Cristiano Rastelli - Codemotion Amsterdam 2018Codemotion
In the last few months there's been a growing friction between those who see CSS as an untouchable layer in the "separation of concerns" paradigm, and those who have simply ignored this golden rule and found different ways to style the UI (typically applying CSS styles via JavaScript). This debate have brought division in a community that used to be immune to this kind of “wars”. This talk is my attempt to bring peace between the two fronts. To help these two opposite factions to understand and listen to each other, see the counterpart's points of views.
The Importance of Storytelling in Web Design, WordCamp Miami 2013Denise Jacobs
What if we strengthened our creations for the web by building them upon a foundation of Story? Let's explore the growing importance of storytelling in web design, how to communicate Story through all aspects of a website from content, to design, to ux; and how to apply key components of great storytelling in literature to the medium of the web.
This talk gives a light introduction to CSS3, talking about where it evolved from, what features are available in the new language, why it brings so many advantages to web designers, and how you can start using it now in your production projects.
Michael Sauers, the Commission’s Technology Innovation Librarian and author of XHTML & CSS Essentials for Library Web Design, will give a brief introduction to Cascading Style Sheets (CSS). Michael will cover items like why CSS was developed, the benefits of using CSS in creating your Web site, and give you just enough code to get you started. Time allowing, Michael will be more than happy to take your coding questions.
Slides used for my presentation to the Austin Cassandra Meetup where I discuss how Cassandra fits in to Rackspace Cloud Monitoring.
Hint: It's just a small part.
Hacking the Creative Brain - Devoxx Belgium, 2014Denise Jacobs
As tech professionals, what we need is a way to work better so that we can create more, right? Through exploring various concepts and approaches, including the neuroscience of creativity, productivity techniques, and emerging practices that spur innovation, we'll discover not only the ways in which our brains work best, but also what’s behind the times when we feel on fire with creativity and when we don't. We’ll translate this information into processes and techniques for dramatically enhanced creative productivity. Beware: this session challenges the standard norms around concentration, focus, productivity, and may change how you work…for the better.
Modular CSS is a concept that will help you write more maintainable and readable code. It is compatible with any and all CSS preprocessors and naming conventions. You may have heard of BEM, SMACSS, or OOCSS, which are methodologies that all share the key concepts of modular CSS.
Modular CSS means you avoid ever writing special snowflake CSS that's only used in one spot. It helps you standardize your code and look for patterns. It helps you dry up your code and ensure that each class has a clearly defined responsibility, and help you avoid overlap and conflicts between classes.
Essentially, if you're ever going to write CSS at scale, you owe it to yourself to understand what modular CSS is, and how it can dramatically improve the readability and maintainability of your code.
This talk is aimed at intermediate level front-end developers. We won't be covering any advanced CSS, so as long as you know the basics, you should be able to follow along just fine.
You will learn:
1. The underlying patterns of all modular CSS methodologies
2. How to write CSS that scales
3. How to write CSS that is easy to understand and maintain
4. How to write CSS that doesn't rely on context
Video: https://www.youtube.com/watch?v=Ty5jtMZXbmk
There's a movement brewing built upon leveraging the transformative power of creativity to help us work and create better so that we can produce work infused with meaning. Discover how by knowing your Why, instilling tiny habits to cultivate your creative spark, and finally, fomenting creative collaboration based on the tenets of improv and open spaces, you can take the spark of Creativity (R)Evolution and use it as the impetus to push you, your teams, and your companies to create betterness.
Good CSS troubleshooting skills are important to decrease your workload and help you work better with others. Tips for clean code and targetting, as well as solutions to modern browser bugs are covered.
Varun Vachhar
rangle.io
Overview
JavaScript frameworks allow us to build innovative and delightful experiences for our users. A common approach adopted with these modern tools is to combine all required JavaScript into one large bundle. Therefore, causing the loading performance to suffer. Especially on older devices or devices with low memory and processing power.
An alternative approach is to split your code into various smaller chunks which you can then be loaded on demand — allowing you to reduce the load time drastically.
In this session, Varun will demonstrate how you can adopt the practice of code-splitting when building applications with frameworks such as React and Vue.
Objective
Learn how to use code-splitting to improve the loading performance of Javascript heavy applications.
Target Audience
Front-end developers who build JavaScript heavy applications
Assumed Audience Knowledge
Basic understanding of web development and some familiarity with frameworks such as React, Angular or Vue.
Level
Intermediate
Five Things Audience Members Will Learn
What is code-splitting?
Different types of code-splitting
How to split a React or Vue application
How to “lazy-load” parts of the application
Removing duplicate code from chunksa
Presented at Web Unleashed 2019
More info at www.fitc.ca/webu
Andréa Crofts
League
Overview
Examining our responsibility as creators to design for disconnection.
The “restore connection” alert isn’t just for devices– it applies to people too. And it’s more important now than ever before.
Digital creators, we need to talk. The rise in mental health as a result of situational stress is a prevailing theme in today’s society, and some of the products we’re building are the root cause. But we have the power to change this. As creators of digital products, how might we enable our users to be more present in their lives? How might we invest in features like Instagram’s activity timer, despite the fact that they’re fundamentally counterintuitive to the usage metrics most behemoth tech companies are driving towards?
We have a responsibility as creators of digital products to enable others to disconnect …and re-connect with themselves, physically and mentally. This intersection is an emerging category Andrea likes to call digital health, and it’s something we can create together.
Objective
To share actionable strategies, principles and considerations for designing with digital health top of mind. Andrea will get into some #realtalk about how we can collectively create more balance and presence for the humans using our products.
Target Audience
Designers and digital creators of all kinds – especially those building digital products at scale!
Level
Open to audience members of any skill level (this is a more high-level talk)
Five Things Audience Members Will Learn
Tips and best-in-class examples of designing for digital health
Design guidelines and principles for designing with digital health in mind
Evidence-based practices to ground your future design decisions
Strategies for re-framing the success metrics of digital products
Design ethics resources
Presented at Web Unleashed 2019
More info at www.fitc.ca/webu
Luke DeWitt
REDspace
Overview
JavaScript’s popularity has exploded over the last decade, taking it from a laughable scripting language to one that powers much of the web today. Because it’s so flexible and so easy to learn, it’s extremely popular with new developers looking to cut their teeth in programming. However, these strengths are also weaknesses, as it’s incredibly easy to write bad JavaScript without even knowing it.
A lot of these newer developers jump from “Hello, World!”, to TodoMVC in order to find the library that makes their life easier. By doing this, they skip over some of the important details of not only how JavaScript works, but also how to optimize its performance to ensure the best user experience.
The Chrome profiler is a very handy tool that not a lot of developers have experience with. In this talk, we’ll take a beginner’s look at the profiler tool and examine how to use it to best improve your web application, and identify bottlenecks in your code without having to rely only on console.log statements.
Objective
To help developers understand how to better make use of the JavaScript profiler.
Target Audience
Any JavaScript developers
Assumed Audience Knowledge
Basic JavaScript
Level
Beginner / intermediate
Five Things Audience Members Will Learn
Javascript inner-workings
Profiling concepts
Identifying bottlenecks
Profiling node applications
Tooling
presented at Web Unleashed 2019
For more info see https://fitc.ca/event/webu19/
Kevin Daly RBC Ventures
Every developer has faced the difficult choice of deciding what tech stack they should use for a new project. Should you use the latest tech or something that everyone knows? Which framework is the best for your team? To survive your tech stack, developers must make trade-offs with developing on new tech stacks and the ability to maintain and scale their applications.
In this presentation, you’ll learn how to evaluate your tech stack and understand the pros and cons of using bleeding edge technology. Using his past experiences, Kevin will also share his lessons learned and how his team tackles managing their tech stack today.
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Bushra Mahmood
Unity Technologies
Overview
In this talk, Bushra Mahmood will explain how to articulate and pitch augmented reality as a viable medium to help solve problems. Learn about what makes an AR application come together on both mobile devices and headsets. Uncover different tools and methodologies for problem-solving and making a compelling story.
By properly understanding this technology and its parts, creatives can take an active role in shaping and defining this new space in computing.
Objective
Learn the tools and techniques required to pitch an augmented reality project.
Target Audience
Designers, product managers, product stakeholders.
Assumed Audience Knowledge
An understanding of product design and an awareness of AR
Five Things Audience Members Will Learn
The right language to use when explaining ‘spatial’ design
The different requirements and considerations for scoping an AR project
The tools that are currently available for AR authoring
Insights into what the near and far future will hold for this medium.
An example of an AR application pitch
Start by Understanding the Problem, Not by Delivering the AnswerFITC
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Karri Ojanen
RBC Royal Bank of Canada
Overview
Over the past number of years companies have adopted the idea of customer-centricity. People across functions can fluently talk about the importance of paying special attention to end-user needs and overall customer experience.
But innovation and forward-thinking ideas that connect both customer and business needs can’t simply be squeezed out of brainstorm sessions and sticky notes if the organization doesn’t learn how to effectively look outside of its own silos. In this session, Karri will show how to move from jumping to solutions to driving innovation by understanding the question first.
Target Audience
Designers, researchers, strategists, product managers, and technology leads
Three Things Audience Members Will Learn
Methodologies and tools to form insights out of a holistic understanding of customer challenges
How to synthesize data to form a vision of the better future
How to break the vision into manageable chunks that drive value for the business and the customer at every launch
Cocaine to Carrots: The Art of Telling Someone Else’s StoryFITC
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Alan Williams
Imaginary Forces
Overview
During dailies as an intern at Imaginary Forces, Alan’s director, Karin Fong, would follow her animation feedback with one of the scariest and empowering questions of his career, “what do you think?” Over the last eight years, Alan’s transition from technician to creative director came from a dramatic shift in how he approached and answered that question. By examining larger conceptual principles to practical application in commercial and tv/film design, such as HBO’s Vinyl and Netflix’s Anne with an E, he will share hard-learned lessons that can empower you, whether in Photoshop, behind a camera, or pitching to clients, in developing and selling your creative voice.
Target Audience
Visual communicators eager to become more evocative storytellers
Five Things Audience Members Will Learn
‘Method branding’ in a selfie culture
O.C.D. (observe, collect, dissect) & the imagination
The resuscitating power of rearrangement
Pertinence vs pipeline: the crippling cage of routine
Less pitching, more poetry
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Carl Sziebert
Google
Overview
Innovation is defined as the process of making an idea into a good or service that creates value by meeting a need or solving a problem at scale. This talk explores ways to find inspiration from everyday sources, invest in skills that foster collaboration, and identify opportunities for impact. While leveraging the core principles of and learnings from designing products for real people, Carl will examine a number methods for building creativity and innovation into our everyday work.
Target Audience
For individual contributors looking to cultivate opportunities for impact and find the right time, space, and tools to innovate in our everyday work.
Five Things Audience Members Will Learn
A bottom-up approach to framing innovation within your daily work
Identify and validate opportunities that make an impact
Prioritize, prototype, and build understanding of the problems you are solving
Collaborate locally and globally
Seek, give, and apply feedback often
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Chris Zacharias
imgix
Overview
The average website loads over 1.5MBs of content per page, making over 75 requests. Many popular websites are serving over 5MBs just to load their homepages. And these numbers represent measurements taken AFTER compression is applied. The full weight of many popular websites is pushing 20+ MBs these days. In an era where performance truly matters to the end user experience, web developers need techniques to help curtail this bloat in data down the wire.
No matter how well you optimize, there is no better way to than to delete things you do not need. How does one determine what is essential to the user experience and what is not? One answer Chris posits is to develop a hyper-lightweight version of your website which will provide critical insights into your specific performance priorities. This is a process that he has leveraged on many projects, in particular at YouTube to reduce the size of the video watch page from 1.5MBs to 100KBs. In this talk, Chris will take real-world web pages and show techniques for dramatically reducing their page weight and for identifying areas to optimize, while outlining the key steps to doing this well.
Objective
Learn a process for building a hyper-lightweight version of your website for establishing reasonable performance budgets, grounded in reality, to work from.
Target Audience
Web developers
Assumed Audience Knowledge
HTML, CSS, Javascript, some server-side awareness.
Level
Intermediate
Five Things Audience Members Will Learn
How to analyze a web page for performance issues
A holistic approach to deconstructing an existing website
A clear process for building a hyper-lightweight version of your website
Translating your findings into real performance priorities
Establishing a realistic performance budget
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Michael Fullman
VT Pro Design
Overview
An exploration of the process of creation. We live in a time where technology and inspiration are more readily available and accessible than ever before. That being said we also live in a time that mostly highlights the successes of projects and process. In this particular talk Michael wants to touch on the process of creation with technology at VT Pro, to further explore a full circle approach to inspiration and creation where often times our next project is inspired by something learned in the process of creating something else.
By exploring what went wrong and what went right in a number of different projects he’s created, Michael will touch on points where inspiration can be found in this world of seemingly endless technology; the importance of collaboration; what can be learned from the moments that don’t necessarily go as planned; and how often projects come close to failure than the audience ever knows. Lastly he wants to touch on the process of finding personal inspiration to inspire an audience, and the momentum to push further that comes from their energy.
Objective
Things often don’t go as planned, but often that’s the fun part.
Target Audience
Creative technologists and experience designers
Five Things Audience Members Will Learn
Collaborative process
Giving personality to a piece of technology
How to learn from the unexpected
We all start somewhere (the journey is just as important as the destination)
Everything is possible now
Post-Earth Visions: Designing for Space and the Future HumanFITC
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Sands Fish
MIT Media Lab
Overview
Today, the environments that humans occupy in space are designed for survival. Humans are carefully shuttled to and from space, and during their relatively short stays, they are provided with minimum supplies to remain alive and able to perform experiments. As we begin to plan less for short visits and more for life in space (such as a six to eight month trip to Mars and beyond) the question becomes: What does human culture look like in space?
This talk will explore how human culture, design, and creativity might evolve as we begin to live in space, and the unique environmental conditions that might guide us in certain directions, just as the environment on Earth has. It will discuss space tourism, living in zero gravity, and some experiments in art and design that hint at future aesthetics.
Objective
Convey what opportunities exist at the outset of a more democratized New Space age, and call out the aesthetics, ethics, and cultural frontiers we find ourselves faced with at the end of the second decade of this century.
Target Audience
Those interested in the future of human life in space
Five Things Audience Members Will Learn
The history of human culture in space
Unique design constraints and considerations when designing for zero gravity
The experience of flying in a zero-g flight
The aesthetics at play in human spacefaring — (what has been)
New forms, new materials, new ideas — (what might be)
The Rise of the Creative Social Influencer (and How to Become One)FITC
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Lindsay Munro
Adobe XD
Overview
Your social network could be more valuable than the work you’re doing today, because it could (and should) lead to the opportunities you get tomorrow. Your next post could result in your next recommendation, job, collaboration, exhibit, and next level experience.
In this session, you’ll learn how to hone and build your online social media presence to attract brands and engage in the modern-day endorsement deal. Get a behind-the-scenes perspective on the things brands look for in creative profiles and the rules of engagement.
Objective
Teach the ins and outs of what it means to be a creative social influencer.
Target Audience
Creatives looking to up level their social media presence and strike brand partnerships.
Things Audience Members Will Learn
How to set yourself up for “success” on social media
The importance of working with the right brands
Figuring out compensation and negotiating contracts
The ins and outs of disclosure and liability
How to not mess it up
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Amelie Rosser
Jam3
Overview
For the past two years Jam3 worked alongside Joy Kogawa and the NFB to create East of the Rockies, an augmented reality storytelling experience.
East of the Rockies is the first interactive AR game of its kind. The story takes users through a piece of Canadian history where Japanese Canadians were forced to leave their homes and live at internment camps during WWII.
This talk will cover the creation of the game: from concept and storyboarding, to the development process in Unity and various challenges and questions to consider from a creator’s perspective.
Objective
To let the audience in on the behind the scenes of developing an AR experience like East of the Rockies.
Target Audience
For those interested in Augmented Reality storytelling and game development.
Five Things Audience Members Will Learn
AR techniques using Unity
Storytelling in AR
Prototyping interactions in AR
Game state management using Unidux
Game optimization techniques in Unity
The Knowledge Society: Three Talks About the Future
Futurism Innovation Science
Isabella Grandic
The Knowledge Society
Overview
Join three incredible, young, and brilliant minds as they present their findings on topics that we’ll all have to deal with in the not so distant future. This series of talks will explore how exponential technologies like synthetic farming, nanotechnology, and quantum computing can be used to solve some of the world’s most difficult problems.
The speakers are all students of The Knowledge Society (TKS), a human accelerator for high school students designed to help them impact billions. TKS encourages students to take risks and think big.
Ayaan Esmail‘s talk will cover creating a proactive healthcare system
World Transformation: The Secret Agenda of Product DesignFITC
R.C. Woodmass
Crescendo
Overview
The reports are in: how we relate to technology directly affects how we relate to other humans, to our environments, and to ourselves. Are we headed for a technological dystopia, where robots are in charge and empathy is just a word for the history books? Not necessarily! Learn how the interfaces we interact with can teach us how to be better communicators, increase our understanding of each other, and how product design might be the key to building a positive future for all.
Objective
Directly address fear and skepticism about technology, inspiring all who design and build tech to think more empathetically when building UX and UI.
Target Audience
Product designers, HR specialists, and anyone skeptical about technology
Three Things Audience Members Will Learn
How to create user interfaces that are flexible enough to include everyone, even if they can’t keep up with all the different identities and new labels that people are using
What is conversation design, and how it has the power to teach people how to communicate
How AI has the potential to be more inclusive than previous data analysis systems, if we leverage its weaknesses to the human advantage
Matt Swoboda
Notch
Overview
The adoption of real-time technologies and workflows for content creation is a seismic shift in the world of video/graphics. It has a fundamental effect on not just on render times but on the entire creative process. In this session hear from someone who has been using realtime graphics for creative work for almost 20 years, and his experiences in applying it to productions such as the Ed Sheeran world tour and Cirque du Soleil.
Objective
Give the audience an overview of what really is capable in a real-time workflow today, and where things are headed.
Target Audience
Anyone who wants to take confident steps in the direction of real-time motion graphics, especially within the live, installation and AR fields.
Five Things Audience Members Will Learn
How does real-time change the creative and production process
Limitations – where does it work, where doesn’t it make sense
What real-time graphics are capable of today
What happens on a rock’n’roll tour bus
What DOESN’T happen on a rock’n’roll tour bus
Hasan Ahmad
Aquent DEV6
Overview
PWAs are a newly emerging delivery format for web, desktop apps. The fact that they can be installed on a client device and behave like natively installed apps means that special care should be taken when designing and building these types of apps, above and beyond a typical browser-only web application. One of the most important (potential) differentiators in the user experience of a PWA app vs a traditional web app is the ability to provide a high-performance UI because of their ability to do things like cache resources offline, including entire pieces of Web UI code, and the use of background services. In this talk we are going to do an exhaustive overview of the entire landscape of building PWAs from a performance-first perspective.
Target Audience
Web development teams
Assumed Audience Knowledge
Web Development fundamentals
Objective
Large enterprise applications
Five Things Audience Members Will Learn
Why PWA’s require performance engineering
What tools are available to measure performance metrics
Offline caching strategies
Host device considerations: desktop and mobile
Taking advantage of background code: Service Workers
Bhavana Srinivas
Netlify
Overview
A new web stack has emerged. A stack powered by modern browsers, API economy and Git based workflows. A stack that is not tied to specific technologies. A stack that takes into account both developer experience while building the application, and user experience when interacting with the application. A stack that delivers better performance, higher security, and lower cost of scaling for web applications.
In this talk, Bhavana will dive more into the architecture and best practices for building performant web applications using the JAMstack
Objective
Educate the audience about the JAMstack and why it powers performant sites
Target Audience
Web stakeholders who want fast, secure and performant websites
Assumed Audience Knowledge
Built a website/interacted with sites
Five Things Audience Members Will Learn
What is the JAMstack
The ecosystem around the JAMstack
How to improve the performance of your site built on the JAMstack
Example sites built on this architecture
Resources and best practices
From Closed to Open: A Journey of Self DiscoveryFITC
Midge “Mantissa” Sinnaeve
Mantissa
Overview
Midge will be speaking about his experience of switching to open source applications for his freelance work. From ditching expensive software subscriptions to going down the linux rabbit hole, he’ll take you along for the ride and show you some cool stuff along the way.
It’s an in-depth look at what happens when your digital tools become an extension of yourself and how that can in turn inspire you to get better as an artist and find your style.
Objective
Taking a critical look at how you work and why.
Target Audience
(Motion) designers, 3D & VFX artists
Four Things Audience Members Will Learn
Open Source Design Tools
Self-criticism
Inspiration
Letting go
Studio Macouno has been realizing post industrial projects for two decades. Though they’re very busy doing things like creating generative shavers for Philips and designing life size 3D printed petition elephants, those are but a fraction of what they would like to do.
In this talk Dolf will explore the projects they just don’t have time for. The things the studio would love to do but can’t do on it’s own. The things that are way out there… Those that don’t seem possible, or are just too much work. The dreams that they think are a bit too much, but they just might do anyway.
Objective
Finding, funding and founding cooperatives for creative futurist projects.
Target Audience
People interested in making things today that seem ideas for tomorrow.
Five Things Audience Members Will Learn
Some about generative design
3d printing
Art
Running projects
And making things happen
1. Scalable and Modular CSS
FTW!
The Legend of the Birth of MetaCoax
/ * Denise R. Jacobs
Future. Innovation. Technology. Creativity.
Amsterdam, Netherlands
18 February 2013 */
2. Tweeting tall tales
I am:
@denisejacobs
This fine event is:
@fitc #FITCAms
And I’m telling the tale of:
#metacoax
5. The Legend of the Birth of
MetaCoax
chapter 1
Problems in Poësia
chapter 2
The Teachings of the Masters
chapter 3
Insights and Epiphanies
chapter 4
Ousting Selector Evil
chapter 5
Triumph!
35. DRY CSS: Thinking
When looking at making a style declaration for a
selector, always have an answer to the question
"Why isn’t this part of a group?”
Then figure out how to make it one.
36. DRY CSS: Approach
Groups define shared properties.
Group selectors with shared properties, rather
than defining them separately.
While the groups have many selectors, each
property/value pair is defined only once.
37. DRY CSS: How
• Name the groups based on their role in the
design
• Use the name as an ID at the top of the list
and a class at the bottom
• Group selectors that share properties above
the properties they share
43. Outcome
CSS bytes/page HTML bytes/page
19% 44%
decrease decrease
44. OOCSS: Signs you need it
• Large number of floats = bad grid
• Large number of margins = you need a reset
css
• Large number of font-size & !important =
cascade is not being leveraged
45. OOCSS: The Gist
• Employ DRY
• Separate structure and presentation
• Modularize
46. OOCSS: Do’s
• Use CSS grids
• Keep selector chains as short as possible
• Give rules the same weight/strength
• Use <hr> as a page section delimiter
• Style classes rather than elements
47. OOCSS: Don’ts
• Avoid attaching classes to elements
• Avoid using IDs as styling hooks, use them for JS
hooks and page anchors
• Avoid the descendent selector
• Don’t over-semanticize class names
• Avoid classnames that are related to the
appearance of the style
48. OOCSS: The process
1. Determine the site-wide “legos” (ie, reusable
pieces)
2. Separate
– Container and Content
– Structure and Skin
– Contour and Background
– Objects and Mix-ins
3. Mix and match container and content objects
to achieve high performance design.
4. Skin for visual difference
49. OOCSS: The Media Module
http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
50. OOCSS: The Media Module
<!-- media -->
<div class="media">
<img class="fixedMedia" src="myImg.png" />
<div class="text">
...
</div>
</div>
51. OOCSS: The Media Module
/* ====== media ====== */
.media {margin:10px;}
.media, .bd {overflow:hidden; _overflow:visible;
zoom:1;}
.media .img {float:left; margin-right: 10px;}
.media .img img{display:block;}
.media .imgExt{float:right; margin-left: 10px;}
52. The Lumberjack
http://www.flickr.com/photos/stikeymo/308546507/
58. SMACSS: Shallow selectors 101
• Avoid tag selectors for common elements
unless completely predictable.
• Use class names as the right-most (key)
selector
• Use the child selector
59. SMACSS: On “classitis”
You’re better off adding classes to the elements
in question and repeating the class in the HTML
than having overly-specific styles.
Instead of being classitis, using multiple classes
clarifies intent and increases the semantics of
elements in question.
62. SMACSS: What’s in a name?
an example module:
.example
a callout module:
.callout
a callout module with a collapsed state:
.callout.is-collapsed
63. SMACSS: Words of Wisdom
“Constrain, but don’t choke.
Consider selector performance, but don’t waste
too much time on it.”
64. The Brit
http://www.flickr.com/photos/31363949@N02/6958447097/
65. CSS For Grown Ups
https://speakerdeck.com/u/andyhume/p/css-for-
grown-ups-maturing-best-practises
http://schedule.sxsw.com/2012/events/event_IA
P9410 (audio)
66. He lived his own nightmare
http://www.flickr.com/photos/djrue/4835062638/
67. CSS For Grown Ups
Don’t style pages, style modules.
Have a style module library that you can reuse.
68. CSS For Grown Ups
Think of your styles as being in layers:
• document – from HTML code, element
selectors
• base styles
• module styles
• layout styles
69. CSS For Grown Ups
Easy determination:
A tag as part of the selector = a document style
If you create a class for it, you release it from
the tag and make it a module style.
70. CSS For Grown Ups: Don’t
…make modules variations based on IDs, base
them on classes instead
#sidebar .promo-box = bad
.promo-box { ... } = okay
.promo-box-light { ... } = better!
71. CSS For Grown Ups: Modules
.promo-box
Related/sub-styles: module’s name extended
with two dashes
.promo-box--eco
javascript class prefixed with js:
.js-login
72. CSS For Grown Ups: Typography
.h-headline
.h-subheadline
.h-byline
.h-promo
73. CSS For Grown Ups: Helpers
“Surgical layout helpers” which are things like
paddings, margins, and gutters as separate
classes.
.margin-top {margin-top: 1em;}
79. Structure and Inform
• Utilize a naming convention to establish
structure and meaning
• Categorize styles in the document or into
multiple documents
• Employ grids for consistent page structure
81. Reduce
• Eliminate inline styles
• Write the shortest chain of elements possible
in selectors
• Drop elements: as qualifiers and selectors
• Choose classes over ids
83. Recycle & Reuse
• Leverage the cascade better to cut down on
redundant style declarations
• Modularize page components to reuse
throughout site
• Extend modules through subclassing
84. They figured out the key!
http://www.flickr.com/photos/karent/3673326282/
85. What do you do when you build?
http://www.flickr.com/photos/mdave/2878687949/
95. Eliminate qualifier selectors
Selectors like
div#widget-nav div#widget-nav-slider ul li
div.name span
Could easily be simplified into
#widget-nav-slider .name span
with the exact same outcome.
96. Eliminate the middleman
If you must use a descendent selector, then
eliminate all unnecessary elements in it:
.widget li a
would become
.widget a
97. Have the shortest chain possible
For example, instead of
#toc > LI > A
it’s better to create a class, such as
.toc-anchor
98. Reduce the Redundant
• Leverage the cascade by relying on
inheritance [oocss]
• Review, revise and reduce !important
[oocss, smacss]
99. Leverage the cascade with
inheritance
color
font-family
font-size
font-style
font-variant
font-weight
font
line-height
list-style-image
list-style-position
list-style-type
list-style
text-align
text-indent
text-transform
visibility
white-space
word-spacing
104. (2) Intermediate phase
• Clear the cruft
• Create preliminary portable styles [cfgu]
• Begin instituting modules based on design
patterns [oocss, smacss, cfgu]
• Institute a Grid [oocss]
105. Clear the cruft
• Eliminate inline styles & decrease use of
<span>
• Eliminate styles that rely on qualifiers high in
the DOM [oocss]
• Use classnames as key selector [smacss]
• Create preliminary portable styles [cfgu]
106. Eliminate styles that rely on qualifiers
high in the DOM
body.video div#lowercontent
div.children.videoitem.hover a.title {
background: #bc5b29;
color: #fff !important;
text-decoration: none;
}
127. Use an icon element
Instead of this:
<li class="favorite">
<span class="icon favorite"></span>
<span id="favorite-poem-insert-point"
class="favorite"></span>
</li>
128. Use an icon element
Do this:
<p><i class="icon icon-comment"></i>23
comments</p>
...
.icon {background-image: url( sprites.png ); }
.icon-comments {background-position: 0 -30px; }
130. Just revamping the code isn’t
enough…
“Even the cleanest code gets ruined by the first
non-expert to touch it.”
- Nicole Sullivan,
The Cascade, Grids, Headings, and Selectors
from an OOCSS Perspective
132. Styleguide Creation Process
1. Determine the unique elements and components
that will be in the styleguide. Also notate the
main colors for text, header, links, and buttons.
2. Start styling the core elements of the pages:
headings, links, tables, blockquotes, unordered
and ordered lists, and forms.
3. Style the components that override the base
styles, such as search boxes, breadcrumb
navigation, themed buttons, and variations in
modules. Include interaction styles:
hover, focus, active states.
133. Styleguide creation process
4. Add layout last and put the components into
place. Each layout could be presented as a
separate document.
5. Document your coding process: naming
conventions and the thinking behind
decisions of grouping, classifying
components, etc.
134. So everyone can access the
treasures
http://www.flickr.com/photos/lecercle/514344657/
141. The Marcot
…is Ethan Marcotte, the creator and author
of Responsive Web Design (RWD)
http://ethanmarcotte.com/
twitter.com/beep
http://www.flickr.com/photos/localcelebrity/7907876246/
142. The Dry Wind
…is Jeremy Clarke, the developer of DRY
CSS.
http://simianuprising.com/
twitter.com/jeremyclarke
143. The Ninja
…is Nicole Sullivan, the creatrice of Object
Oriented CSS (OOCSS)
http://www.stubbornella.org/
twitter.com/stubbornella
http://www.flickr.com/photos/localcelebrity/6025912453/
144. The Lumberjack
…is Jonathan Snook, the creator and
author of Scalable and Modular CSS
(SMACSS)
http://snook.ca/ & http://smacss.com
twitter.com/snookca
http://www.flickr.com/photos/splat/3742596419/
145. The Brit
…is Andy Hume, the creator of CSS for
Grown Ups (I like to shorten this to CFGU).
http://andyhume.net
twitter.com/
http://www.flickr.com/photos/angryamoeba/4674320039/
146. Djinn
…is Jennifer Dixon, front-end developer
extraordinaire
http://jdcoding.com
twitter.com/jenniration
148. My books
The CSS Detective Smashing Books #3 InterAct With
Guide & Web Standards:
#3 1/3
CSSDetectiveGuide.co InterActWithWebStandards.co
m m
twitter.com/cssdetective SmashingBook.com twitter.com/waspinteract
My chapter:
“Storytelling in Webdesign”
On the surface, the kingdom looked as if it should with all of the necessary elements in place,
While some of the builders believed in their craft/were concerned with the mastery of their craft and were committed to building structures that could scale and stand the test of time…
Others were a rag-tag bunch…
who would hastily build with whatever was handy,
ending up with each new structures of selectors shabbily tacked on to the last.New builders came and went, so that ones being added to build the kingdom had no way of know the intentions of the builders before them.
The structures of the selectors they created didn’t start off evil…
But over time, they became more established and caused problems based on their position in the hierarchy.
New selectors that came after them had to try to establish themselves by any means possible. So, no matter how ridiculous they looked, they would try to fit in by being long and unwieldy…
Or fight by making themselves !importantHe’d heard tell that there were wise masters whose teachings could guide and provide structure to the work of the architects and builders, but half-crazed and feverish with the single-minded goal of seeing the kingdom to completion as they originally planned it, his hired design and building experts poo-pooed his suggestions and dismissed the legends relegating them to mere fantasy.
Eric did not become ruler of his kingdom merely because of his impressive stature, regal bearing, and fine form. Being born of the stuff of myth himself, he knew that there had to be some verity in the legends. He sent out two of his most trusted aides Haliec and Vidad (whom he affectionately referred to at Scully and Mulder, because they were always actively seeking the truth) into the world to bring back a champion who could use this deep knowledge to bring order to the chaos within the kingdom.
He spoke to them of a new responsive world, a world where a kingdom, if built correctly, could be accessed by all peoples through all ways and methods. No seeker of information would be turned away from the treasures that a kingdom contained. Even though this wasn’t the work of the masters that they initially sought, their eyes and hearts glowed at the possibility of taking their beloved kingdom to the next level by responding to the needs of their visitors. The wisdom of the Marcot renewed their lagging hope and passion to find a person who would banish the evil selectors from their kingdom once and for all, establish order, and prepare for a future of responsive greatness.
The prophet Marcot saw the fire in their eyes and knew their hearts were pure and that they were true seekers. “There is one could help you,” he said. “Her name is Djiejh. I hear that she spreads the knowledge of the work of the masters. She may have answers for you.”
They went south to the land of the sun and sea (Mijhami), They went south to the land of the sun and sea (Mijhami), where they found Djiejh and conveyed their king’s angst, frustration, and growing concern around the large and still growing ranks of evil selectors and their renegade rules that were behind the shiny façade of their kingdom. Djiejh heard them out, [and felt honor-bound to help them] and then spoke to them of the teachings of the Ninja. “We’ve heard of the Ninja!” they exclaimed! “She’s real? She’s not just a legend?”
Djiejh spoke of the masters: The Ninja in the Area of the Bay, The Lumberjack, who hailed from the Great White North, and The Brit in the land of Londia. And finally, Djiejh related that calling upon the elemental The Dry Wind could help with the process and maintain order.
The Ninja is one of my disciples and has taken my practices to another level. Seek her in the Area of the Bay.
Large number of font-size = cascade is not being leveraged, also over-fussiness: few font sizes are readable - and small differences are not easily detectable.
Employ DRY: endeavor to create and apply as many reusable pieces of code as possible.Separate structure and presentation: avoid coupling the CSS too tightly to presentation/displayModularize: find common elements and presentation and abstract these into reusable code (aka modules)
Keep selector chains as short as possible: the browser can parse the CSS faster and it avoids specificity warsGive rules the same weight/strength so that you and mix and match them to extend an object through subclassingUse <hr> as a page section delimiter (instead of having top or bottom borders be part of an element)Style classes rather than elements
Avoid the descendent selector (i.e. don’t use .sidebar h3)Avoid IDs as styling hooksAvoid attaching classes to elements in your stylesheet (i.e. don’t do div.header or h1.title)Don’t over-semanticize class names: overly semantic names prevent reuse, and classnames should convey useful information to developers.Avoid classnames that are related to the appearance of the styleAvoid using IDs for CSS styling, use them for JS hooks and page anchors predominantly
Determine the site-wide “legos” (ie, reusable pieces), such as:Headings Lists (e.g. action list, external link list, product list, or feature list) Module headers and footers Grids Buttons Rounded corner boxes Tabs, Carousel, toggle blocks Objects and Mix-ins Skin for visual differenceSkins/themes are the module’s presentation – how it looks. The goal is very predictable skins, values that can be easily calculated or measured.
Like OOCSS, SMACSS is about identifying patterns in your design and codifying them, and has a great structure for naming classes in a meaningful and useful way
Base - defaults: single element selectorsLayout – divides the page into sectionsModule – reusable, modular part of the design: callouts, sidebar sections, product lists, etc.State – ways to describe how the module or layout looks in a particular stateTheme – describe how modules or layouts might lookIn small projects, can all be in the same file. In larger projects, multiple files are recommended.
Using a class is preferable, even if you think the element is going to stay predictable.
You’re better off adding classes to the elements in question and repeating the class in the HTML (and potentially committing “classitis”) than having overly-specific styles. Instead of being classitis, using multiple classes clarifies intent and increases the semantics of elements in question.
Some further methodologies with modules include avoiding conditional styling based on the module’s location on the page or on the website with sub-class module components, tying media-queries to the module or layout component instead of grouping them separately, which allows for the module to be kept together and for isolated testing of the module; and only using !important on state styles if necessary, but none others.
In the naming convention for modules, include the name of the module itself.
In Londia
Worked at Clearleft and The Guardianwe’ve become obsessed with web standards to the degree that we strive to keep content and session separate to ridiculous lengths. In addition to web standards, managing complexity is an important factor to consider. We need to optimize code for change, and let go of the idea that we will write HTML which we will never touch again, and do then just manage all of the presentation on the CSS side. In truth, we will always have to revamp the HTML along with the CSS.
The goal is this: when creating selectors, be aware of whether they are document, base or module, and make an effort to keep them all modular level.
But one WITH ids!
The names of the modules again should be descriptive/semantic and not tied to location or appearance:
Instead of styling headings by the elements, typographic classes are suggested, which can then be applied to h1-h6, p, dd, and any other tags, but the visual presentation will be the same:
To handle presentation issues, it’s recommended to use helpersThe above style would be the style that you could add to whatever element needed it on the page, instead of wrapping that style into a component.
Providing good information and organizing it is critical for clarity and understanding.
Distilling even further, Djieh and Djinn discovered the essence – the key!
Buoyed by their discoveries and new knowledge, they went to Poesia to implement their MetaCoax approach to taming the selectors that were running amok in the kingdom.
The goal is to make the stylesheet a little more lightweight and easier to maintain and update with the minimum amount of time and effort investment. The focus is on giving structure and organization to the stylesheet, reducing redundancy and better reuse of styles, And optimizing the selectors
Adopt a “3 or less” rule
Reduces location dependencyIncrease portabilityReduces chances of selector breakageDecreases specificity/Avoids specificity warsPrevents over-use of !importantCan make code more forgiving
Normalize.css “normalizes” the code to a common baseline rather than reseting the base styling for elements across all browsers.
the Kellum method (http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/).Instead of hiding the text offscreen using the -9999px; hack (and creating a huge invisible box in the process), this new technique hides the text while leaving it accessible to screen readers.
“
From 7500 lines to 2200 linesBetter in IE6 & IE7
…a better place for everyone – both visitors and builders alike.