kristofer walters (knowit oslo) #maintainable.css ...€¦ · lorem ipsum lorem ipsum dolor sit...
TRANSCRIPT
![Page 1: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/1.jpg)
// Kristofer Walters (Knowit Oslo)
#Maintainable.CSS {
// The Next Frontier Of// Front-End Engineering
}
![Page 2: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/2.jpg)
<blink color=”#FF0000”>Best practices
considered harmful
</blink>
![Page 3: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/3.jpg)
Maintainable Code
* Easy to understand* Easy to fix* Easy to add new stuff* Easy to adjust for new environments
![Page 4: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/4.jpg)
Separation of Contentand Presentation
![Page 5: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/5.jpg)
<aside id=”articles”><div class=”article”>
<h3>Lorem Ipsum</h3><p>…</p><a href=”…”>Read more</a>
</div>
…
</aside>
![Page 6: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/6.jpg)
#articles { … }.article { … }.article h3 { … }.article p { … }.article a { … }
![Page 7: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/7.jpg)
#articles {color: #009682;
left: 785px;
font-size: 0.8125em;
…
}
![Page 8: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/8.jpg)
$my-brand-green: #009682;
@function rel-font-size($size) {@return ($size / $context-size) * 1em;
}
#articles {color: $my-brand-green;
left: $page-width – $main-col-width;
font-size: rel-font-size(13);
…
}
![Page 9: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/9.jpg)
Don'tRepeatYourself
![Page 10: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/10.jpg)
background: -moz-linear-gradient(top, #CCC 0%, #FFF 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#CCC), color-stop(100%,#FFF));
background: -webkit-linear-gradient(top, #CCC 0%,#FFF 100%);
background: -o-linear-gradient(top, #CCC 0%,#FFF 100%);
background: -ms-linear-gradient(top, #CCC 0%,#FFF 100%);
background: linear-gradient(to bottom, #CCC 0%,#FFF 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#ffffff',GradientType=0 );
![Page 11: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/11.jpg)
@import “compass/css3/images”;
.button {@inlude background-image(
linear-gradient(left top,#FFF, #CCC));
}
![Page 12: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/12.jpg)
.article {float: left;
…
}
.article:after, .article:before {content: " ";
display: table;
}
.article:after {clear: both;
}
// IE 6/7 - trigger hasLayout.article {*zoom: 1;
}
![Page 13: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/13.jpg)
@import “compass/utilities/clearfix”,
.article {float: left;
@include clearfix;
…
}
![Page 14: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/14.jpg)
![Page 15: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/15.jpg)
<aside id=”articles”><div class=”article”>
<h3>Lorem Ipsum</h3><p>…</p><a href=”…”>Read more</a>
</div>
…
</aside>
![Page 16: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/16.jpg)
#articles { … }.article { … }.article h3 { … }.article p { … }.article a { … }
![Page 17: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/17.jpg)
.article h3 { … }
![Page 18: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/18.jpg)
.article h3 { … }#sidebar .article h3 { … }
![Page 19: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/19.jpg)
.article h3 { … }#sidebar .article h3 { … }.author-page #sidebar .article h3 { …
![Page 20: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/20.jpg)
.article h3, .article h4 { … }#sidebar .article h3,#sidebar .article h4 { … }.author-page #sidebar .article h3,.author-page #sidebar .article h4 { …
![Page 21: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/21.jpg)
ObjectOrientedCSS
![Page 22: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/22.jpg)
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis
ac volutpat ultricies, massa nisl laoreet risus, id faucibus dui urna
sollicitudin velit.
Read More
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis
ac volutpat ultricies, massa nisl laoreet risus, id faucibus dui urna
sollicitudin velit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis
ac volutpat ultricies, massa nisl laoreet risus, id faucibus dui urna
sollicitudin velit.
Read More
![Page 23: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/23.jpg)
<div class=”article”><h3>Lorem Ipsum</h3>
<p>…</p>
<a href=”…”>Read more</a>
</div>
![Page 24: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/24.jpg)
<div class=”mod”><div class=”inner”>
<div class=”hd highlighted”><h3 class=”h3”>Lorem Ipsum</h3>
</div><div class=”bd”><p>…</p>
</div><div class=”ft”><a href=”…”>Read more</a>
</div></div>
</div>
![Page 25: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/25.jpg)
.mod { … }
.hd { … }
.bd { … }
.ft { … }
.h3 { … }
.highlighted { … }
![Page 26: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/26.jpg)
BlockElementModifier
![Page 27: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/27.jpg)
#{block}#{block} + #{element}#{block} + #{modifier}#{block} + #{element} + #{modifier}
![Page 28: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/28.jpg)
.global-nav { … }
![Page 29: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/29.jpg)
.global-nav { … }
.global-nav-item { … }
.global-nav-logged-in { … }
![Page 30: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/30.jpg)
.global-nav { … }
.global-nav_item { … }
.global-nav--logged-in { … }
![Page 31: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/31.jpg)
.global-nav { … }
.global-nav_item { … }
.global-nav--logged-in { … }
.global-nav_item--disabled { … }
![Page 32: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/32.jpg)
.global-nav { … }
.global-nav_item { … }
.global-nav--logged-in { … }
.global-nav_item--disabled { … }
.global-nav--logged-in .global-nav_item { … }
![Page 33: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/33.jpg)
.globalNav { … }
.globalNav-item { … }
.globalNav_loggedIn { … }
.globalNav-item_disabled { … }
.globalNav_loggedIn .globalNav-item { … }
![Page 34: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/34.jpg)
<ul class=”nav nav_loggedIn”><li class=”nav-item”>
<a href=”nav-link”> … </a></li>
<li class=”nav-item nav-item_cur”>
<a href=”nav-link”> … </a></li>
</ul>
![Page 35: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/35.jpg)
Scalable and ModularArchitecture forCSS
![Page 36: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/36.jpg)
Base RulesLayout RulesModule RulesState RulesTheme Rules
![Page 37: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/37.jpg)
@import url(“base.css”);@import url(“layout.css”);@import url(“modules.css”);
@import url(“theme.css”);
![Page 38: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/38.jpg)
@import “base/*.scss”;@import “layout/*.scss”;@import “modules/*.scss”;
@import “theme/*.scss”;
![Page 39: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/39.jpg)
SOLID?
![Page 40: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/40.jpg)
Single responsibility principle
A class should have only a singleresponsibility
![Page 41: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/41.jpg)
Open/Closed principle
open for extension,closed for modification
![Page 42: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/42.jpg)
Liskov substitution principle
objects in a program should bereplaceable with instances oftheir subtypes without alteringthe correctness of that program
![Page 43: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/43.jpg)
Interface segregation principle
many client-specific interfacesare better than one general-purposeinterface
![Page 44: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/44.jpg)
Dependency inversion principle
depend upon abstractions,not upon concretions
![Page 45: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/45.jpg)
![Page 46: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/46.jpg)
Individuals and interactionsover processes and tools
Working softwareover comprehensive documentation
Customer collaborationover contract negotiation
Responding to changeover following a plan
![Page 47: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/47.jpg)
![Page 48: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/48.jpg)
![Page 49: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/49.jpg)
![Page 50: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/50.jpg)
“Always code as if the person who ends up maintaining your code is a violent psychopath who knows where you live.”
![Page 51: Kristofer Walters (Knowit Oslo) #Maintainable.CSS ...€¦ · Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, turpis ac volutpat ultricies,](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa177dd9d4ab974d003dd82/html5/thumbnails/51.jpg)
[email protected] @kwltrs
Sass http://sass-lang.com/
Compass http://compass-style.org/
OOCSS https://github.com/stubbornella/oocss/wiki
BEM http://bem.info/method/
SMACSS http://smacss.com/