jaime martínez op wordcamp antwerpen 3 maart 2018 · een modulaire aanpak tijdens development...
TRANSCRIPT
![Page 1: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/1.jpg)
Een modulaire aanpak tijdens development
Jaime Martínez op WordCamp Antwerpen
3 maart 2018 @jmslbam / @levellevel
![Page 2: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/2.jpg)
1. Het landschap
![Page 3: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/3.jpg)
Welk probleem proberen we op te lossen?
![Page 4: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/4.jpg)
Het bouwen van een project dat meerdere jaren blijft
draaien en uitgebreid kan worden door verschillende
personen binnen Level Level
![Page 5: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/5.jpg)
Zelfs slechte code kan functionerenEchter, wanneer code niet clean is, kan dit een
development team op de knieën brengen.
Clean Code: A Handbook of Agile Software Craftsmanship
![Page 6: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/6.jpg)
2. Analyse
![Page 7: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/7.jpg)
![Page 8: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/8.jpg)
![Page 9: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/9.jpg)
![Page 10: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/10.jpg)
![Page 11: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/11.jpg)
![Page 12: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/12.jpg)
![Page 13: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/13.jpg)
![Page 14: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/14.jpg)
![Page 15: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/15.jpg)
single.php— content —
Non-modulaire aanpak
![Page 16: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/16.jpg)
3. Het probleem
![Page 17: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/17.jpg)
archive.phptitel
titel
Non-modulaire aanpak
single.php— content —
![Page 18: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/18.jpg)
archive.phptitel
titel
single.php— content —
comment.php— Review —
Non-modulaire aanpak
![Page 19: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/19.jpg)
Buttons… Buttons everywhere
Andere HTML Verschillende CSS Classes Verschillende bronnen
HET PROBLEEM
![Page 20: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/20.jpg)
Buttons… Buttons everywhere
1/3 kan weg
HET PROBLEEM
![Page 21: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/21.jpg)
4. De opties
![Page 22: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/22.jpg)
Quick fix en doorgaan1
Onderdelen herschrijven2
Compleet opnieuw beginnen3
Clean starten4
Wat kun je doen?DE OPTIES
![Page 23: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/23.jpg)
5. De oplossingen
![Page 24: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/24.jpg)
Seperation of concernDE OPLOSSINGEN
![Page 25: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/25.jpg)
archive.phptitel
titel
single.php— content —
comment.php— Review —
Non-modulaire aanpak
![Page 26: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/26.jpg)
archive.phpsingle.php comment.php
JS vote
getRating()
review rating: 2
HTML
Modulaire aanpak
![Page 27: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/27.jpg)
single.php
JS vote
getRating()
review rating: 2
HTML
archive.php comment.php
Modulaire aanpak
![Page 28: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/28.jpg)
Source: https://schlessera.github.io/wcut-2017/#/modularity-0
Modulaire aanpak
![Page 29: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/29.jpg)
Modulaire codebase
![Page 30: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/30.jpg)
Modulaire codebase
![Page 31: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/31.jpg)
ComponentenDE OPLOSSINGEN
![Page 32: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/32.jpg)
Stop denken in pagina’sx
Start te denken in componenten of zelfs in kleinere onderdelen
v
ComponentenDE OPLOSSINGEN
![Page 33: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/33.jpg)
Ja!
![Page 34: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/34.jpg)
Extenden met CSS classesDE OPLOSSINGEN
![Page 35: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/35.jpg)
Extenden met CSS classes
DE OPLOSSINGEN
![Page 36: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/36.jpg)
Extenden met CSS classes
DE OPLOSSINGEN
Learn from frameworks
![Page 37: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/37.jpg)
teaser teaser-magazine
![Page 38: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/38.jpg)
teaser teaser-post
teaser teaser-post
teaser teaser-video
teaser teaser-magazine
![Page 39: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/39.jpg)
teaser teaser-post teaser-1x2
teaser teaser-post teaser-1x1
teaser Teaser-video teaser-1x1
teaser teaser- magazine teaser-2x1
![Page 40: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/40.jpg)
Flexibiliteit binnen CSSDE OPLOSSINGEN
![Page 41: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/41.jpg)
Flexibiliteit binnen CSS
DE OPLOSSINGEN
v
x
v
Pass op voor CSS specificity
Geen ids
Nest niet te diep
body.page-homepage .teaser-video .button-play
.button & .button-video-play
.my-menu__item & .my-menu__item—active
x Echt, geen id's.
![Page 42: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/42.jpg)
Flexibiliteit binnen CSS
DE OPLOSSINGENCSS technieken
Onderzoek technieken zoals
• SMAACSS
• ACSS
• BEM
Gebruik LESS of SASS
Is niet verplicht ;)
![Page 43: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/43.jpg)
OOP (Object Oriented Programming)
DE OPLOSSINGEN
![Page 44: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/44.jpg)
teaser teaser-magazine
![Page 45: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/45.jpg)
OverervenOBJECT ORIENTED PROGRAMMING
Clarkson object
Post
Video Post
Magazine Post
Model View Control
![Page 46: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/46.jpg)
OverervenOBJECT ORIENTED PROGRAMMING
Clarkson object
Post
Video Post
Magazine Post
![Page 47: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/47.jpg)
Gebruik een template engineDE OPLOSSINGEN
![Page 48: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/48.jpg)
Dit is een sidebar
https://level-level.com/clarkson-core-op-wordcamp-nederland-2016/
Content
![Page 49: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/49.jpg)
TWO COLUMN
PAGE SINGLE
![Page 50: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/50.jpg)
So use Clarkson ;)
![Page 51: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/51.jpg)
6. De redenen (almost there)
![Page 52: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/52.jpg)
Dus waarom?DE REDENEN
Minder support tickets
1 Herbruikbare code
2 Uitbreidingen worden eenvoudiger
3 Testbare code
4
Klant blij, wij blij.5
![Page 53: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/53.jpg)
Omarm de modulariteit
DE REDENEN
Splits complexiteit op
Stapje bij stapje
Spreek best-practices af met je team
![Page 54: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/54.jpg)
Jaime Martínez op WordCamp Antwerpen 2018
Een modulaire aanpak tijdens development
![Page 55: Jaime Martínez op WordCamp Antwerpen 3 maart 2018 · Een modulaire aanpak tijdens development Jaime Martínez op WordCamp Antwerpen 3 maart 2018 @jmslbam / @levellevel](https://reader034.vdocuments.site/reader034/viewer/2022042302/5ecd163a381ce046273d92cf/html5/thumbnails/55.jpg)
Resources
● Clarkson: Twig, WordPress Models and WordPress:
http://wp-clarkson.com/core/ & http://wp-clarkson.com/theme
● Clarkson Video: Clarkson talk op WordCamp NL 2016 via WordPress.tv
● Modern CSS: https://medium.com/statuscode/an-answer-to-how-to-get-good-with-css-3dfcfd862107
Dit bovenstaande artikel linked zelf ook weer naar hele goede artikelen.
● CSS Methodes : http://clubmate.fi/oocss-acss-bem-smacss-what-are-they-what-should-i-use
● CSS specificity: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-
know/ & http://www.htmldog.com/guides/css/intermediate/specificity/
● Render template parts : hm_get_template_part()