Upload
john-need
View
286
Download
0
Embed Size (px)
Citation preview
Rock Solid CSS Architecture
The Genesis of CSS.
In the beginning there was the <blink> tag.
And the W3C gods saw that this was bad and separated the presentation from the content.
The content they called “HTML” and the presentation they called “CSS.”
And the web developers cried “Blessed are we, for now we have separation of concerns and our code will be forever maintainable.”
And there was great rejoicing on the Interwebs.
A Bit of Actual CSS History1986 Saw the introduction of Standard Generalized Markup Language (SGML) which included style sheets.
1992 ViolaWWW, the browser/editor developed by Tim Berners-Lee had style sheets that were hard-coded into the program
1994 - First Proposed in 1994 by by Håkon Wium Lie
1996 - first W3C CSS Recommendation (CSS1)
1998 - CSS2 Recommendation.
2003 First Working Draft Module of CSS3 Released
Aug 2007 Basic box model Apr 2011 Multi-column Layout Jun 2011 Color Module Level 3 Sep 2011 Selectors Level 3 Nov 2011 Template Layout Module Jun 2012 Media Queries Sep 2014 Backgrounds and Borders Module Level 3 Håkon Wium Lie - CTO Opera
Software
The Cascade User-agent declarations
User normal declarations
User important declarations
Author important declarations
Author normal declarations
!!
How to Calculate Specificity
Selector Types
1. ID selectors (e.g., #example).
2. Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover)
3. Type selectors (e.g., h1) and pseudo-elements (e.g., :before).
0 , 0 , 0 , 01 point if It’s Inline
1 point for each ID selector
1 point for each class selector
1 point for each type selector
Specificity Examples <li id=”catTwo” class=”cat-li” style=”color:red”>
<article id=”myArticle” class=”my-article”> <h1 id=”myHeadline” class=”my-headline”> Hello Kitty </h1> <ol> <li id=”catOne” class=”cat”>Calico</li> <li id=”catTwo” class=”cat cat-2”>Calico</li> </ol></article>
li + li: {color: blue;}
.cat:nth-child(2){color: purple;}
#catTwo:{color: green;}
.my-article .my-headline ol .cat-2{color: green;}
#myArticle .my-headline ol .cat-2{color: yellow;}
1,0,0,0
0,0,0,2
0,0,2,0
0,1,0,0
0,0,3,1
0,1,2,1
Why We Need CSS Architecture
Rule Sorting
Algorithm
Rule Set
This worksThis Doesn’t
The Holy Grail of CSS Architecture
Maintainability
Scalability
Testability
Reusability
Predictability
Simplicity
The Separation of Style from Content
When it launched in May 2003, it contained only five designs.
In February 2005, The Zen of CSS Design was published by CSS Zen Garden creator Dave Shea and web designer Molly Holzschlag. The book is based on 36 designs featured at the Zen Garden site.
CSS Zen Garden
Object Oriented CSS, OOCCS
Nicole Sullivan - First Introduces OOCSS at Web Directions North in 2008
https://github.com/stubbornella/oocss/wiki
Nicole Sullivan, contributor to many open source project such as CSS-Lint, currently an Engineering Manager at npm, Inc.
Separation of Structure from Skin<div class=’widget’> <input/> <button>Click Me</button></div>
.widget{ height: 100px; width: 100px; border: solid 1px blue; background-color: yellow;}input{ width: 90px; border: solid 1px blue; background-color: yellow;}button{ width: 30px; border: solid 1px blue; background-color: yellow;}
.widget{ height: 100px; width: 100px;}input{ width: 90px;}button{ width: 30px;}.skin { border: solid 1px blue; background-color: yellow;}
<div class=’widget skin’> <input class=’skin’/> <button class=’skin’>Click Me</button></div>B
efor
e
Afte
r
Separation of Content from Container<header> <h2>Lorem</h2></header><footer> <h2>Ipsum</h2></footer>
header h2{ width: 200px; height: 260px; padding: 20px; color: blue;}footer h2{ width: 200px; height: 260px; padding: 30px; color: red;}
.global-size{ width: 200px; height: 260px;}
.header-h2{ padding: 20px; color: blue;}
footer-h2{ padding: 30px; color: red;}
<header> <h2 class=”header-h2 global-size”>Lorem</h2></header><footer> <h2 class=”footer-h2 global-size”>Ipsum</h2></footer>
Bef
ore
Afte
r
Block-Element-Modifier, BEMIntroduced by Yandex, one of the largest internet companies in Europe, operating Russia’s most popular search engine.
BEM is a class naming convention that forces you to organize your CSS into reusable chunks of single-responsibility.
BEM uses only class selectors for styling on id’s or tag names.
Class names have up to three parts separated by underscores.
block-name_element-name_modifier-name
Defining TermsBlock : A functionally independent page component that can be reused
Element : A composite part of a block that can't be used separately from it.
Modifier : An entity that defines the appearance, state, or behavior of a block or element.
Blocks can be nested inside of other blocksBlocks do not control their positions. No padding, margin, or position stylesBlocks have semantic class names. i.e. “contact-form”
Elements are nested inside of blocks.Elements have semantic class names that are composites of their block class name. i.e. “contact-form_submit-button
Blocks can be nested inside of other blocksBlocks do not control their positions. No padding, margin, or position stylesModifier class name describe their appearance. i.e. “contact-form_submit-button-error”
Some BEM Visuals
Blocks
Elements
Modifiers
A Quick BEM Example
<form class=”contact-form”> <input type=”text” class=”contact-form_email_error” /> <textarea class=”contact-form_message”></textarea> <input type=”submit” class=”contact-form_submit” value=”submit”/> </form>
.contact-form { border: solid 1px blue; background: white; Width: 20em; }
.contact-form_email { width: 90%; margin: 1em auto; border: solid 1px grey; }
.contact-form_email_error { width: 90%; margin: 1em auto; border: solid 1px red;}
.contact-form_submit { width: 90%; margin: 1em auto; border: solid 1px grey; }
BLOCK
ELEMENTS
MODIFIER
Scalable and Modular Architecture for CSS, SMACSSAn architecture based on CSS categorization.
Jonathan Snook
1. Base
2. Layout
3. Module
4. State
5. Theme
Base
Base rules are the defaults. They are almost exclusively single element selectors but it could include attribute selectors, pseudo-class selectors, child selectors or sibling selectors. Essentially, a base style says that wherever this element is on the page, it should look like this.
h1 { font-size: 2em;}p { color: grey; line-height: 1.6em; font-family: helvetica, sans-serif; }input[type=”text”]{ border: solid 1px blue;}…
Base rules are styled using type selectors so they have low specificity.
Layout Rules
Layout rules divide the page into sections. Layouts hold one or more modules together.
.layout-grid { … }
.layout-grid .row{ … }
.layout-grid .cell { … }
Style layout rules with classes that start with “layout-” and then the name of the layout.
Modules
These are the re-usable bits like sidebars, navigation, page-footers. The bulk of your CSS goes here.
.module-search-widget{ … }
.module-search-widget button{ … }
.module-search-widget .search-field{ … }
Prefix your module class names with “module-” and the module name.
State
State classes represent changes in application state. Use state classes to show how things look when things are collapsed, in an error state, or expanded.
.is-error{ color: red;}
.is-error input {border-color: red;}State classes start with the prefix “is-”
Theme
Theme rules are the overrides necessary to create different themes. They mostly control color, fonts and and other non-layout rules. This part is optional if you don’t need themes.
/* in module-name.css */.mod { border: 1px solid;}
/* in blue-theme.css */.mod { border-color: blue;}
Atomic CSS
Atomic CSS can be characterized as the principles of Reductio ad absurdum applied to OOCSS.
Why stop at separating structure from skin? Let’s keep on seperating until every class has only one property. That’s ACSS.
CSS is a plague of locus sent by Håkon Wium Lie to destroy all that holy with web development.
If you agree with this statement then Atomic CSS is for you.
Goodbye Stylesheets, Hello “inline”
<p class=”large-para”>
.large-para { line-height: 2em; font-family: sans-serif; font-size: 1.6em;}
<p class=”ls-2 ff-sans fs-16”>
.lh-2 {line-height: 2em;}
.ff-sans {font-family: sans-serif;}
.fs-16{ font-size: 1.6em;}
Atomizer
<div class="foo Bd C(#0280ae) Ta(c)"> <p class="Op(0) foo:h>Op(1)">Lorem ipsum</p></div>
Atomizer is a tool for creating Atomic CSS. Generate an Atomic stylesheet dynamically from the Atomic classes you're actually using in your project (no unused styles!), or predeclare styles in configuration.
It’s All About How you Separate Your Concerns
Style Content
OOCS, Atomic
HTMLCSSJS
BEM, SMACSS
HTMLCSSJS
HTMLCSSJS
HTMLCSSJS
Who does this guy think he is?John NeedFront End Code MonkeyGalen Healthcare
Twitter : @JohnNeed
GitHub : https://github.com/johnneed
CodePen : http://codepen.io/johnneed/
Linked In : https://www.linkedin.com/in/johnneed
Read about the origins of the <blink> tag here
www.montulli.org/theoriginofthe<blink>tag