Downloaded 12 times
![How to Calculate SpecificitySelector Types1. ID selectors (e.g., #example).2. Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover)0 , 0 , 0 , 01 point ifIt’s Inline1 point foreach IDselector1 point foreach classselector1 point foreach typeselector](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2frocksolidcssarchitecture-160918012141%2f75%2fRock-Solid-CSS-Architecture-5-2048.jpg&f=jpg&w=240)
![BaseBase rules are the defaults. They are almost exclusively single element selectorsbut it could include attribute selectors, pseudo-class selectors, child selectors orsibling selectors. Essentially, a base style says that wherever this element is onthe 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 styledusing type selectors sothey have low specificity.](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2frocksolidcssarchitecture-160918012141%2f75%2fRock-Solid-CSS-Architecture-18-2048.jpg&f=jpg&w=240)
Uploaded byJohn Need
PPTX, PDF654 views
Rock Solid CSS Architecture
The document outlines the evolution and significance of CSS, detailing its history, architecture principles, and methodologies such as OOCSS, BEM, SMACSS, and Atomic CSS. It explains concepts like separation of concerns, specificity in selectors, and various architectural approaches to make CSS more maintainable and scalable. Additionally, it introduces tools like Atomizer for dynamically generating stylesheets to optimize CSS usage.
More Related Content
Similar to Rock Solid CSS Architecture
Recently uploaded
Rock Solid CSS Architecture
- 1.
- 2.The Genesis ofCSS.In the beginning there was the <blink> tag.And the W3C gods saw that this was bad and separated the presentation from thecontent.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 concernsand our code will be forever maintainable.”And there was great rejoicing on the Interwebs.
- 3.A Bit ofActual CSS History1986 Saw the introduction of Standard Generalized MarkupLanguage (SGML) which included style sheets.1992 ViolaWWW, the browser/editor developed by Tim Berners-Lee had style sheets that were hard-coded into the program1994 - First Proposed in 1994 by by Håkon Wium Lie1996 - first W3C CSS Recommendation (CSS1)1998 - CSS2 Recommendation.2003 First Working Draft Module of CSS3 ReleasedAug 2007 Basic box modelApr 2011 Multi-column LayoutJun 2011 Color Module Level 3Sep 2011 Selectors Level 3Nov 2011 Template Layout ModuleJun 2012 Media QueriesSep 2014 Backgrounds and Borders Module Level 3Håkon Wium Lie - CTO Opera Software
- 4.The CascadeUser-agent declarationsUsernormal declarationsUser important declarationsAuthor important declarationsAuthor normal declarations!!
- 5.How to CalculateSpecificitySelector Types1. ID selectors (e.g., #example).2. Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover)0 , 0 , 0 , 01 point ifIt’s Inline1 point foreach IDselector1 point foreach classselector1 point foreach typeselector
- 6.Specificity Examples <liid=”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,00,0,0,20,0,2,00,1,0,00,0,3,10,1,2,1
- 7.Why We NeedCSS ArchitectureRuleSortingAlgorithmRule SetThis worksThis Doesn’t
- 8.The Holy Grailof CSS ArchitectureMaintainabilityScalabilityTestabilityReusabilityPredictability
- 9.The Separation ofStyle from ContentWhen it launched in May 2003, itcontained only five designs.In February 2005, The Zen of CSSDesign was published by CSS ZenGarden creator Dave Shea andweb designer Molly Holzschlag.The book is based on 36 designsfeatured at the Zen Garden site.CSS Zen Garden
- 10.Object Oriented CSS,OOCCSNicole Sullivan - FirstIntroduces OOCSS at WebDirections North in 2008https://github.com/stubbornella/oocss/wikiNicole Sullivan, contributor to many open sourceproject such as CSS-Lint, currently anEngineering Manager at npm, Inc.
- 11.Separation of Structurefrom 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>BeforeAfter
- 12.Separation of Contentfrom 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>BeforeAfter
- 13.Block-Element-Modifier, BEMIntroduced byYandex, one of the largest internetcompanies in Europe, operating Russia’s most popularsearch engine.BEM is a class naming convention that forces you to organizeyour 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
- 14.Defining TermsBlock :A functionally independent page component that can be reusedElement : 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 blockclass name. i.e. “contact-form_submit-buttonBlocks 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”
- 15.
- 16.A Quick BEMExample<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;}BLOCKELEMENTSMODIFIER
- 17.Scalable and ModularArchitecture for CSS, SMACSSAn architecture based on CSS categorization.Jonathan Snook1. Base2. Layout3. Module4. State5. Theme
- 18.BaseBase rules arethe defaults. They are almost exclusively single element selectorsbut it could include attribute selectors, pseudo-class selectors, child selectors orsibling selectors. Essentially, a base style says that wherever this element is onthe 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 styledusing type selectors sothey have low specificity.
- 19.Layout RulesLayout rulesdivide the page into sections. Layouts hold one or more modules together..layout-grid { … }.layout-grid .row{ … }.layout-grid .cell { … }Style layout rules with classesthat start with “layout-” andthen the name of the layout.
- 20.ModulesThese are there-usable bits like sidebars, navigation, page-footers. The bulk of your CSSgoes here..module-search-widget{ … }.module-search-widget button{ … }.module-search-widget .search-field{ … }Prefix your module classnames with “module-”and the module name.
- 21.StateState classes representchanges in application state. Use state classes to show howthings look when things are collapsed, in an error state, or expanded..is-error{ color: red;}.is-error input {border-color: red;}State classes start withthe prefix “is-”
- 22.ThemeTheme rules arethe overrides necessary to create different themes. They mostly controlcolor, 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;}
- 23.Atomic CSSAtomic CSScan 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 oneproperty. That’s ACSS.CSS is a plague of locus sent by Håkon Wium Lie to destroyall that holy with web development.If you agree with this statement then Atomic CSS is for you.
- 24.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;}
- 25.Atomizer<div class="foo BdC(#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 theAtomic classes you're actually using in your project (no unused styles!), or predeclare styles inconfiguration.
- 26.It’s All AboutHow you Separate Your ConcernsStyle ContentOOCS, AtomicHTMLCSSJSBEM, SMACSSHTMLCSSJSHTMLCSSJSHTMLCSSJS
- 27.Who does thisguy think he is?John NeedFront End Code MonkeyGalen HealthcareTwitter : @JohnNeedGitHub : https://github.com/johnneedCodePen : http://codepen.io/johnneed/Linked In : https://www.linkedin.com/in/johnneedRead about the origins of the <blink> tag herewww.montulli.org/theoriginofthe<blink>tag