Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

BIG CSS

No description
by

Bree D

on 6 August 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of BIG CSS

BIG CSS
Best
Practices

Cascading Style Sheets
A style language that defines the look
& formatting of html documents.
What is CSS?
Application
Specificity
Cascade
Styles cascade from one style sheet to another, so that multiple style sheets can be used in a single HTML document.
A method of conflict resolution within the cascade.
Elements inherit styles from their parent container.
Allows for the separation of content from design.
A simple syntax that consists of a list of rules.
[HTML]
[CSS]
p

{

color: blue;
font-family: Helvetica;
}
Selector
Declaration
Property
Value
Each rule contains:
One or more
selectors
and a
declaration block
.
Not So Simple
E.g.
* Browser
* User
* Author
- screen
- print
- browser specific
- inline
- embedded
- external
Calculated based on 4 categories:
E.g. If you set the body tag to use color: red then the text for all elements inside the body will also be red unless otherwise specified.
Inheritance
Actually, a 5th category trumps all:
5.
!important declaration
Highest
specificity
value
Lowest
specificity
value
Inline
ID
Class,
pseudo-class,
attribute
Element

Specificity
0
0
0
0
Every selector has its place in the specificity hierarchy
The highest value wins
Calculating specificity
Inline
ID
Class,
pseudo-class,
attribute
Element

Inline
ID
Class,
pseudo-class,
attribute
Element

Inline
ID
Class,
pseudo-class,
attribute
Element

Inline
ID
Class,
pseudo-class,
attribute
Element

<p
style
=
"color: white;">
#ID

{color: white;}
.class

{color: white;}
div

{color: white;}
1
0
0
0
0
1
0
0
0
0
1
0
0
0
0
1
Inline
ID
Class,
pseudo-class,
attribute
Element

Inline
ID
Class,
pseudo-class,
attribute
Element

Inline
ID
Class,
pseudo-class,
attribute
Element

Inline
ID
Class,
pseudo-class,
attribute
Element

SMACSS
Specificity wars!
Best Practices?
CSS becomes bloated
Specificity increases
Difficult to tell what
rules take precedence
Code by firebug
1.
Inline styles
2.
IDs
3.
Classes, attributes, pseudo-classes
4.
Elements, pseudo-elements
For each rule, count the number of selectors in each category, and concatenate the numbers
The HTML is clean, but the CSS is very messy
As the CSS grows, so too does the specificity.
#sidebar
.
advanced

a
{color: #E23D28; text-decoration: none;}
#sidebar
.advanced.disabled

a
{color: #BEBEBE; text-decoration: none;}
a
{color: #585858; text-decoration: none;}
UI heavy components
Large and complex applications
Long running projects

Large teams in multiple locations
The old standards
are failing us
Re-think how we structure, organise and architect CSS
Is there a
better way?
Don't add extra elements / classes to the HTML
Use complex descendant selectors
CSS tightly coupled to the HTML
Based on concern that HTML size will grow and download speeds will increase
Ultimately, it becomes incredibly difficult and time consuming to maintain the CSS
Simple syntax != simple to use or maintain
#sidebar
.advanced.essentials

a
{color: #000 !important;}
a {color: #585858; text-decoration: none;}
a:hover {color: #E23D28;}
a {color: #585858; text-decoration: none;}
a:hover {color: #E23D28;}
We want the link to look different, but only in the sidebar...
Set up site wide link styles:
New "Advanced Filters" functionality...
a {color: #585858; text-decoration: none;}
a:hover {color: #E23D28;}
#sidebar a {color: #FFF; text-decoration: underline;}
#sidebar a:hover {color: #FEFEFE;}:
Oh, and it needs to be disabled before a search is performed...
a {color: #585858; text-decoration: none;}
a:hover {color: #E23D28;}
#sidebar a {color: #FFF; text-decoration: underline;}
#sidebar a:hover {color: #FEFEFE;}:
#sidebar .advanced a {color: #E23D28; text-decoration: none;}
#sidebar .advanced a:hover {color: #585858;}:
Very early on, best practices were:
Real world example
Practices should adapt
with the changing times
Create quality, maintainable code that is robust over time, in the face of change
A better way
New theories and methodologies have evolved to solve these issues:
Repeatable design patterns
One to many relationship with HTML
New best practices created by developers working with the largest sites around the world (yahoo, facebook etc)
OOCSS
Nicole Sullivan (@stubbornella) - CSS ninja!
"How do you scale CSS for millions
of visitors or thousands of pages?"
OOCSS
Optimising Facebook's CSS resulted in
some interesting statistics:

Facebook blue:
261
2009 she introduced a new way of looking at CSS
Object Oriented CSS
A concept, not a framework
Media
Object

2 main principles:
Separate
structure from skin
Separate
container from content
Define repeating visual features (like background & border) as separate ‘skins’ so you can mix and match to achieve a large amount of visual variety without much code.
Avoid location-dependent styles so that any object looks the same regardless of where it’s put.
As specificity grows over time, what happens when there are no ways
to make a rule more specific than the one you’re trying to override?
ul
{...}
ul li

{...}
ul li a
{...}
ul
{...}
ul li
{...}
ul li a
{...}
Until now, we focused
all our effort in the declaration block
But the architecture
lives here in the selectors
OOCSS
Encourages code reuse and, ultimately, faster and more efficient style sheets that are easier to add to and maintain.
Non-reusable ID selector
Abstract the
common styles
.button
{



}

.box
{


}

.widget
{



}

.skin
{


}

Reusable class selectors
#sidebar h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
}
#sidebar h3,
#footer h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
}

#footer h3 {
font-size: 15px;
color: #999;
}

.hd {font-family: Arial, Helvetica, sans-serif;}

.hd-med {font-size: 12px;}

.hd-lge {font-size: 15px;}

.hd-light {color: #999;}

.hd-dark {color: #000;}

<div id="footer">
<div class="hd hd-large hd-dark">Heading
</div>
</div>
What if we want headings to appear the same in the footer, but with a different font size and colour?
Old way:
OOCSS:
Plan early
The Media Object
"The media object saves hundreds of lines of code"
The most famous example that illustrates OOCSS is the media object, created by Nicole Sullivan.
media object
The image can be any size, and the text will not wrap, while keeping a straight justification.
No need to set the width of each column of content
Benefits:
Flexible and reusable
Can be nested
<div class="media">
<a href="" class="img">
<img src=""/>
</a>
<div class="bd">
Some content
</div>
</div>
.media {margin:10px;}

.media, .bd {overflow:hidden;}

.media .img {float:left; margin-right: 10px;}

.media .imgExt {float:right; margin-left: 10px;}
The HTML
The CSS
1.
Clearfix:
Clearfix the 'media' and 'body' wrapper, using the secret benefits of block formatting context.
The Media Object
Secret Benefits of
Block Formatting Context
An abstracted object which represents a:
(a picture, a video etc)
(typically text)
Overflow: hidden / auto / scroll;
These HTML elements are displayed in the browser from top to bottom, in the order in which it appears in the markup - called the "Normal Flow".
Block-level elements
Formatted visually as blocks e.g. <div>, <p>
Take up full width available
Begin on new lines
Inline elements
HTML
elements:
Push content to the left or right, and text will wrap around
We can push elements around the page by using floats:
{float: left;}
{float: right;}
A floated box is positioned outside of the Normal Flow
Problem!
You float elements within a parent, and the parent seems to collapse?
Benefits:
1. Prevents margins from collapsing
2. Prevents text from wrapping
3. Avoid rounding problems on last column in grid layouts
Back to basics
When an element is floated, its parent no longer contains it because the float is taken outside the flow.
Why?
The Fix!
Apply {overflow:hidden;} to the parent container. By doing this, the child elements remain in the normal flow.
Why is this important?
Triggered something called the Block Formatting Context
How to trigger Block Formatting Context:
<div>
float:left;
float:left;
float:left;
overflow:hidden;
float:left;
float:left;
float:left;
No block formatting context
float:left;
float:left;
New block formatting context
overflow:hidden;
= Media Object!
You're using a grid system and you want the columns to fill the full width of the container.
But cross browser, the last box has fallen down below the others.
Because browsers have different ways of dealing with how percentages rounds to pixels (mostly seen in older browsers e.g. IE7).
In some browsers the box width is rounded up, so the combination of the box widths is larger than the container width.
Apply block formatting context to the last column.
The last column will always take up the empty space next to the floated columns, no matter how many columns you're using.
Block formatting context changes how the block interacts with floated elements:

Makes the block not wrap around the floated element
Makes the block narrower

Scalable and Modular Architecture for CSS
SMACSS
In 2011 Jonathan Snook introduced a new way of looking at CSS architecture
A style guide, not a framework
The core principle of SMACSS is categorization. By categorizing rules, we can start to see patterns and define better practices.
1. Base
2. Layout
3. Module
4. State
5. Theme
Base rules are the defaults, such as heading sizes, link styles and font styles.
Divide the page into sections
Reusable, modular parts of the design such as callouts, sidebars, product lists and buttons
html, body, form {}
a {}
Hold one or more modules together
Describe how modules or layouts will look when in a particular state
E.g hidden or expanded, active or inactive, large screen, small screen
Similar to state rules, in that they describe how modules or layouts look
.l-header {}
.l-content {}
.l-row {}
.l-constrained {}
No naming convention, as mostly single element selectors
Naming convention
Naming convention
.is- {}
.is-hidden {}
.is-collapsed{}
.is-active{}
Naming convention
Reset or normalize
No class or ID selectors
E.g. Grid systems, wrappers, rows, columns
Defines how each item relates to each other
Each module should be independent of context and work within any layout or module
Normally have no specific width (as it's the layout that provides the width constraints)
Open to extension, but closed to modification
module:
.nav {}
.box {}
Class based (.is-active)
pseudo classes (:hover)
attribute states (data-state="rotating")
@media query states
Different types of states:
Can be divided into:
.theme-bg {}
.theme-border {}
Naming convention
sub modules - components within the modules
modifiers - extend the use of the module
sub-module:
.box-header {}
.box-body {}
modifier:
.box--lge {}
.box--sml {}
Modules make up the bulk of a project, so just use the module name itself
Naming convention
RPP CSS health check
RRP uses multiple style sheets, with some basic OOCSS for buttons, rounded corners and tabs.
Duplication and specificity issues within the 2500+ lines of CSS:
!important - 112
How can we improve?
#spinner {}
#print #overview .content.rounded .attribute ul {}
[0,2,3,1]
#externalMapLinksPanel ul li > a > span {}
.targetPropertyPanel.summaryListItem {}
#sidebar a {color: #FFF; text-decoration: underline;}
#sidebar a:hover {color: #FEFEFE;}:
#sidebar .advanced a {color: #E23D28; text-decoration: none;}
#sidebar .advanced a:hover {color: #585858;}:
#sidebar .advanced.disabled a {color: #BEBEBE; text-decoration: none;}
#sidebar .advanced.disabled a:hover {color: #BEBEBE;}:
1
0
0
0
1
1
1
0
1
2
1
0
1
2
1
0
!important
1
Unique colors:
Colors:
6498
548
= lots of duplication
#button {
width: 200px;
height: 50px;
padding: 10px;
border: solid 1px #000;
background-color: #CCC;
}

#box {
width: 400px;
overflow: hidden;
border: solid 1px #000;
background-color: #CCC;
}

#widget {
width: 500px;
min-height: 200px;
overflow: auto;
border: solid 1px #000;
background-color: #CCC;
}
#button
{
width: 200px;
height: 50px;
padding: 10px;
border: solid 1px #000;
background-color: #CCC;
}

#box
{
width: 400px;
overflow: hidden;
border: solid 1px #000;
background-color: #CCC;
}

#widget
{
width: 500px;
min-height: 200px;
overflow: auto;
border: solid 1px #000;
background-color: #CCC;
}
#button
{
width: 200px;
height: 50px;
padding: 10px;
border: solid 1px #000;
background-color: #CCC;
}

#box
{
width: 400px;
overflow: hidden;
border: solid 1px #000;
background-color: #CCC;
}

#widget
{
width: 500px;
min-height: 200px;
overflow: auto;
border: solid 1px #000;
background-color: #CCC;
}
#button
{
width: 200px;
height: 50px;
padding: 10px;
border: solid 1px #000;
background-color: #CCC;
}

#box
{
width: 400px;
overflow: hidden;
border: solid 1px #000;
background-color: #CCC;
}

#widget
{
width: 500px;
min-height: 200px;
overflow: auto;
border: solid 1px #000;
background-color: #CCC;
}
Unique structure
Common visual features
Common styles combined into a reusable skin
.button
{



}

.box
{


}

.widget
{



}

.skin
{
border: solid 1px #000;
background-color: #CCC;
}

.button
{
width: 200px;
height: 50px;
padding: 10px;
}

.box
{
width: 400px;
overflow: hidden;
}

.widget
{
width: 500px;
min-height: 200px;
overflow: auto;
}

.skin
{
border: solid 1px #000;
background-color: #CCC;
}

Unique structure
defaults are shared
set default
.hd {font-family: Arial, Helvetica, sans-serif;}

.hd-med {font-size: 12px;}

.hd-lge {font-size: 15px;}

.hd-light {color: #999;}

.hd-dark {color: #000;}

<div id="footer">
<div class="hd hd-large hd-dark">Heading
</div>
</div>
.hd {font-family: Arial, Helvetica, sans-serif;}

.hd-med {font-size: 12px;}

.hd-lge {font-size: 15px;}

.hd-light {color: #999;}

.hd-dark {color: #000;}

<div id="footer">
<div class="hd hd-large hd-dark">Heading
</div>
</div>
.hd {font-family: Arial, Helvetica, sans-serif;}

.hd-med {font-size: 12px;}

.hd-lge {font-size: 15px;}

.hd-light {color: #999;}

.hd-dark {color: #000;}

<div id="
footer
">
<div class="
hd hd-large hd-dark
">Heading
</div>
</div>
#sidebar h3,
#footer h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
}

#footer h3 {
font-size: 15px;
color: #999;
}
#sidebar h3,
#footer h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
}

#footer h3 {
font-size: 15px;
color: #999;
}
override styles for h3s within the footer
extend styles
styles are not location dependent - mix & match where required
Abstract the
common styles
Find visual patterns
Abstract commonalities
Create reusable modules
media body
.media
.img
.bd
<div class="media">
<a href="" class="img">
<img src=""/>
</a>
<div class="bd">
Some content
</div>
</div>
.media
{margin:10px;}

.media,
.bd {overflow:hidden;}

.media .img {float:left; margin-right: 10px;}

.media .imgExt {float:right; margin-left: 10px;}
.media {margin:10px;}

.media, .bd {overflow:hidden;}

.media .img
{float:left; margin-right: 10px;}

.media .imgExt {float:right; margin-left: 10px;}
.media {margin:10px;}

.media,

.bd
{overflow:hidden;}

.media .img {float:left; margin-right: 10px;}

.media .imgExt {float:right; margin-left: 10px;}
.media {margin:10px;}

.media, .bd {
overflow:hidden;
}

.media .img {float:left; margin-right: 10px;}

.media .imgExt {float:right; margin-left: 10px;}
2.
Float:
Float our image wrapper (generally a link) left.
3.
Margin:
Set some margin and padding to keep everything lined up nicely.
4.
Extend:
Optionally extend the image object to allow for right alignment
.media {margin:10px;}

.media, .bd {overflow:hidden;}

.media .img {
float:left;
margin-right: 10px;}

.media .imgExt {float:right; margin-left: 10px;}
.media {
margin:10px;
}

.media, .bd {overflow:hidden;}

.media .img {float:left;
margin-right: 10px;
}

.media .imgExt {float:right; margin-left: 10px;}
.media {margin:10px;}

.media, .bd {overflow:hidden;}

.media .img {float:left; margin-right: 10px;}

.media
.imgExt {float:right; margin-left: 10px;}
<div class="media">
<a href="" class="img">
<img src=""/>
</a>
<div class="bd">
Some content
</div>
</div>
<div class="media">
<a href="" class="img">
<img src=""/>
</a>
<div class="bd">
Some content
</div>
</div>
<div class="media">
<a href="" class="img">
<img src=""/>
</a>
<div class="bd">
Some content
</div>
</div>
Only take up as much space as necessary e.g. <span>, <a>
Don't begin on new lines
Normal
Flow
In flow
In flow
Float is out
of the flow
Float: left / right;
Display: table-cell; or any of the table related values e.g. width: 10000px
Position: absolute / fixed;
Problem!
Why?
The Fix!
Goal
border – 279
font-size – 129
Corelogic orange #E23D28 - 32
IDs for styling
High specificity
High depth of applicability
Overriding styles
Next Steps
1. Look for visual patterns
2. Abstract the commonalities
Challenges
Naming conventions - can be tricky abstracting it enough to be reusable, but keeping some semantic value.
“Feel free to take this in its entirety or use only the parts that work best for you. Or don’t use it at all. I understand that this won’t be everybody’s cup of tea. When it comes to web development, the answer to most questions is ‘it depends’.”
Adapting to a new methodology - easy to fall into the old way of coding as it's quick and automatic, but not quick to maintain.
Benefits
OOCSS and SMACSS are very flexible, there's no right or wrong implementation. It can be adapted in whichever way best fits your project.
Best summed up by Jonathan Snook:
Accepting that 'classitis' is the tradeoff for modular, resusable CSS.
Aspects of SMACSS
Depth of Applicability
Selector Performance
HTML is like a tree structure of parents and children.
The depth of applicability is the number of generations that are affected by a given rule.
div.article .main .content .intro p > b
E.g.
1
2
3
4
5
6
.article .intro b
Even if it was written as:
The depth is still the same: 6 generations
A shallow depth decreases dependency on the HTML structure, so components can be easily moved around.
CSS gets evaluated from the rightmost selector (key selector), then moving to the left.
body div#content
p
{}
key
Optimize any CSS selectors that have a key selector that matches a large number of elements in the page.
div div div p a.box {}
E.g.
Although it has large depth, if you look at the class in the HTML, it may only be applied to one or two elements on the page.
key
.box * {}
key
Has a shallow depth, but is much more expensive for the browser to match, as it will need to check every single element within .box on the page.
Find a Balance

Use child selectors to minimize the depth of applicability
Avoid tag selectors for common elements
Use class names as the right-most selector
Between adding classes to everything and using deep selector rules.
Guidelines:
<ul class="nav">
<li>
<a>...</a></li>
<li>
<a>...</a></li>
<ul>
<li>
<a>…</a></li>
<li>
<a>…</a></li>
</ul>
<
li
><a>...</a></li>
</ul>

HTML
.nav
li
{float:left;}
.nav li ul
li
{float:none;}
CSS
<ul class="
nav-horiz"
>
<li><a>...</a></li>
<li><a>...</a></li>
<ul class="
nav-vert"
>
<li><a>…</a></li>
<li><a>…</a></li>
</ul>
<li><a>...</a></li>
</ul>

HTML
.
nav-horiz
> li {float:left;}
.
nav-vert
> li {float:none;}
CSS
Using Child Selectors
- higher specificity (0,0,1,3)
- lower specificity (0,0,1,1)
div.article
.main
.content
.intro
p
b
References
http://en.wikipedia.org/wiki/Cascading_Style_Sheets
http://designshack.net/articles/css/what-the-heck-is-css-specificity/
http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
http://css.maxdesign.com.au/selectutorial/advanced_cascade.htm
http://www.slideshare.net/maxdesign/css-cascade-1658158
http://www.slideshare.net/maxdesign/css-oocss-and-smacss
http://css-tricks.com/specifics-on-css-specificity/
http://lanyrd.com/2012/sxsw-interactive/spmqc/
http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us
http://blog.cbsides.com/Nicole-Sullivan-Talks-OOCSS-and-Process.html
https://groups.google.com/forum/#!topic/object-oriented-css/xYC5nhIdJVU
http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
http://tv.adobe.com/watch/adc-presents/smacss-introduction-to-a-scalable-and-modular-architecture-for-css/
http://www.slideshare.net/stubbornella/the-cascade-grids-headings-and-selectors-from-an-oocss-perspective-ajax-experience-2009
http://stackoverflow.com/questions/3293340/what-is-the-means-of-terms-normal-flow-and-out-of-flow-in-terms-of-html-cs
http://www.slideshare.net/stubbornella/the-cascade-grids-headings-and-selectors-from-an-oocss-perspective-ajax-experience-2009
http://stackoverflow.com/questions/3293340/what-is-the-means-of-terms-normal-flow-and-out-of-flow-in-terms-of-html-cs
http://themetaq.com/articles/meet-object-oriented-css-cut-the-fat-out-of-code-with-this-smart-time-savin
http://tv.adobe.com/watch/adc-presents-smacss/smacss-depth-of-applicability/
https://groups.google.com/forum/#!topic/object-oriented-css/xYC5nhIdJVU
http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/
http://tech.vg.no/2013/09/26/css-block-formatting-context/
http://www.webtoolkit.info/css-clearfix.html
http://smacss.com/book/applicability
http://webdesign.about.com/od/beginningcss/p/aacss9layout.htm
http://www.slideshare.net/maxdesign/css-floats-explained
https://github.com/stubbornella/oocss/wiki/faq
www.youtube.com/watch?v=ZpFdyfs03Ug
www.youtube.com/watch?v=8YtQwv1cUVs
www.youtube.com/watch?v=OlBM1kUrkUE
www.youtube.com/watch?v=R-BX4N8egEc&hd=1
Actually, a 5th category that trumps all:
Create quality code that is maintainable and robust over time in the face of change
Think about how we structure, organise, and architect CSS
Is there
a better way?
overflow:hidden
overflow:hidden
overflow:hidden
- higher depth of applicability (4)
- applying styles, then overriding them
- lower depth of applicability (2)
- no overriding of styles
It's normally why CSS rules don't apply to some elements, when you think they should.
next to a
Avoid the following:
Easy to extend other frameworks which use these concepts, such as bootstrap
Plan early.
Works well with mobile first, responsive designs using media queries
CSS architecture for massive, UI heavy, long running web projects.
Full transcript