Audit Your Theme

hello welcome to my presentation audit

your theme the slides are available on

the mid camp session page so if you want

to download and follow along great or

grab them afterward my name is andrew

olson I go by Andy I'm a front-end

developer from the Chicago suburbs I

work for a company called bounteous we

have offices around the country

we're often hiring so if you are

interested come talk to me we also have

a table out there I've been working with

Drupal since 2008

fun fact about me I'm a musician and I

played in a band at Lollapalooza

so today the agenda is we're gonna talk

about how to analyze your theme we're

gonna look at the theme folder and look

at theme files just to get a tour of

your Steve I'm gonna demonstrate some

helpful tools that are going to help you

with analysis of your CSS I'm gonna

provide some refactor pro tips and

finally I'm gonna discuss a way to

measure over time the size of your theme

so why did you decide to attend this

presentation perhaps you fall into one

of the following buckets the first

bucket is perhaps your theme has grown

over time on the screen you see a wheel

barrel that contains four buckets full

of delicious cherries right maybe when

you first started out with your site and

your theme your you just had that one

bucket full of cherries and then you had

an integration you had another site yeah

it's something else go on and by the end

you have this really heavy wheel barrel

so perhaps that's one of the reasons

you're here to audit your thing the next

one is a really fun bucket the launch is

complete you know there's some nice in

the screen there's a icy bucket with

tasty beverages in there you know

perhaps though at the end of the launch

you had to consume a few of those

beverages and compromise along the way

and after it launches maybe a really

good time after celebrating your

successes to look back at your theme

perhaps you're stuck with it on the

screen there's a cat it's not too happy

about being in the bucket so you might

have inherited a project and you really

want to understand what's going on

inside your theme it's a big project on

the screen there's a waterfall and

there's four kids with buckets throwing

water at each other there's a lot of

front Enders on this project and you

really got to understand the lay of the

land and set up some rules final bucket

perhaps you're new to theming on the

screen there's a baby in this bucket and

he's playing water so regardless of

whichever bucket you're in let's begin

so again we're gonna talk about how to

analyze your theme questions to ask

yourself and ultimately after we inspect

all these theme files what you're going

to do is take some mental notes and

actual notes as you audit it and

ultimately all the audit is going to

lead to action so the first thing that

you're going to want to look at is your

info your theme info diamo file that

right away is going to tell you what

type of theme you have whether it's a

sub theme or a parent theme on the

screen you're seeing an info file for a

project that's a DA project that's using

the ZURB foundation as the base theme

and that's a sub theme on top of that so

as soon as I see that it's a ZURB

foundation theme and if I'm new to this

project I probably want to go out to

drupal.org & Co are there any fixes has

has this theme been patched is there any

enhancements to it another thing to if

it's a theme you're not familiar with is

this still being actively maintained

what's the kind of activity and support

that's going on so you can just by

looking at this file it's going to tell

you quite a bit another thing on this

screen here

I don't think it's working that's okay

down at the bottom there there's a

component libraries so right away just

by looking at this file I see that

there's a pattern lab instance going on

so I can get a good idea of where my

other theme files it's a little bit more

complex in this case so the next file I

suggest looking at is your libraries

file so in your themes you're gonna

really going to tell you what's going on

with loading your CSS in your j/s

appropriately again are you using

front-end framework so like ZURB

foundation or a bootstrap just you can

get an idea of what's going on is there

some sort of JavaScript complexity going

on in this file so the whole point of

this is just to get a lay of the land

and understand kind of the hot areas of

the theme that you're working on another

thing is web fonts are you hosting them

or is it an external dependency so right

here on the screen you've seen a

library's example file and at the bottom

it's a little hard to see but we're

inheriting we're going out to Google and

using a Google font maybe you want to

change that

the next file to look at is your theme

dot theme file this'll give you a good

idea to look at your hooks

how many template overrides are you

really looking at this is a good gauge

to how complex and how many overrides

are going on and just get a good idea of

the complexity you theme that

breakpoints EML so are you using a

responsive image module if so this is a

great way to see your screen sizes and

if you aren't using the responsive image

modules this might be a really good time

as you're auditing to implement that to

really optimize your mobile experience

so you don't want to ask yourself some

of these questions again just by we've

looked at some files now let's just kind

of look at the directory so is your site

using automation are you using gulp are

you using grunt perhaps yarn is your

site using sass or less I'm partial to

sass and a lot of the projects have been

using sass does your site use a pattern

library later today Brian Perry is going

to be talking about using an external

design system with pattern labs

definitely check that out but again you

just want to understand your theme and

what those external dependencies

possibly are more more folders that you

can look into as how many templates that

you have how are they organized are they

are all your templates in one folder or

do they have subfolders so classy has

multiple folders Bartek just has one

folder for all the template files how

many different content types

do you have on your site again we're

really trying to tease out complexity

and get a real good understanding of

what's your theming on the site lastly

is your site using the asset injector so

you might look at a page here saying how

is where these Styles come in from the

asset injector can be a great thing but

can also be pretty disorienting when

you're looking at styling is being in

your site formally and d7 was the CSS

injector and the jas injector personally

I liked that module out production

because it's a great way to get fixes

out quickly but for every rule you write

with this asset injector you really need

to go back to your theme and enhance

your theme it's just a really quick fix

you should not be theming in the asset

injector module

so now that we've gone through the theme

files and we have a better understanding

of the theme let's take a step back and

look at the project so does your site

have analytics maybe you built the site

like three or four years ago what kind

of browser support is happening today

what are your top 20 most requested URLs

you know how much mobile traffic

are you receiving and that'll really

help you optimize and use the tools that

we're going to go through next another

thing that I like to do is if you

inherit a project in the original

developer is available ask them

questions after you get a good feel for

what's going on in the theme ask them to

navigate the site with specific tasks

and they're gonna tell you amazing

stories along the way that you would

never anticipate definitely listen to

what they say don't lead them to what

you think is going on because it's a

great opportunity to just kind of

interview and have them navigate the

site and you get a good feel for what's

going on in the site and again how you

can optimize your theme and of course

review your findings with them and all

these things as you audited and you came

up with these good incentives like maybe

I should add the breakpoint module or

this content type looks completely dead

you know all that's going to lead to

action and so what I'm going to go over

next are some tools that are gonna

really help you size up your CSS and I'm

going to first talk about Parker Parker

is a stylesheet analysis tool and it

runs metrics on your style sheets it

reports on the complexity

again the slides are out on the mid

campsite definitely go out there these

links can go directly there but what you

do is you go to the github repository

clone it install with NPM locally and

you can either measure local CSS files

or point it to remote CSS files that's a

really great tool we're gonna look at

the output of it but what's great is it

outputs JSON and I'm gonna get to that

later about how to measure over time so

you download it install it point it to a

file and this is what the JSON looks

like so as you can see in this case I

just I compiled all my sass into one CSS

file this this theme was using the ZURB

foundation you can see the stylesheet

size is 192 k and then the next things

that it has are it goes gives you a

number for rules selectors identifiers

and declarations I don't know about you

but when I first saw this in JSON I'm

like what are those again so let's have

a quick CSS 101 here so everything here

is a CSS rule the h1 is the selector the

color is the property and the value is

the hex value and those together make a

declaration so now having that little

helpful graphic up in the top right

explaining it tells you that there's

has about 2,000 selectors and next up

we're gonna talk about identifiers so

identifiers are not IDs they're the

measure of parts per selector and I have

some examples up on the screen here

again the first one is just a class

that's one identifier all the way down

to the last 105 ident

so that's what that number is telling

you so and then obviously declarations

that's account there so really what do

these numbers mean

your mileage really might vary but the

next set of output from Parker is really

gonna help us provide more insight into

what's going on so the next set talks

about selectors per rule again just

linking that graphic in the top right

that number is you're gonna want

selectors per rule to be as close to one

as possible so lots of selectors per

rule suggest that we're playing the

exact same declaration or styles to a

number of different selectors if that's

the case then we could probably create a

single catch-all selector that handles

all the cases which would make our CSS

smaller and abstract patterns into more

reusable selectors let's take a look at

an example so on the Left we have a lot

of selectors right but really what that

is doing is it's just styling a form

element it's what we can do is write it

into one class we're reducing a lot of

our selectors and for all we have to do

is just add this class to any one of

those inputs or text areas so right

there we've reduced the size and we're

heading ourselves towards writing

reusable CSS to get to the most out of

it

so again selectively to rule we want as

one next your identifies for selector

should be should be between one and two

anything higher than two means that

we're being really specific with that

CSS rules so therefore we're limiting

the ability to reuse our styles

so remember identifiers are not IDs it's

the measure of the parts of the selector

so the next thing I want to talk about

is specificity it's a very hard word to

say I practiced all might that's the

Pacific so let's take a small refresher

into what specificity is for CSS that's

going to help us determine what that

rule is so far a refresher you can

generally read the values on the screen

from left to right and think of them as

a number so an inline attribute is gonna

be the most select most specific and

then elements are the least

so obviously 1000 is gonna be higher and

win over something that's 100 let's look

at some quick examples so this is an

inline style it's got one so it's 1,000

in this case we have 1 ID one class and

one thing to keep in mind is this isn't

base ten rules so you could have 0 1 10

how specific things are

lastly universal selector is just

neutral so it's all zero and important

automatically wins so whenever you have

an important that's always gonna win and

if it's the last important that's always

gonna matter and that's the great thing

about Parker is it'll count how many

importance you have we'll get to that

screen here in a second but really so

the specificity as I've been talking

about this you want to write a class

based theme and get the most reuse out

of it so that value should be as close

to 10 as possible if it's larger than 10

it means we're writing really

specific CSS and again there's no

guiding principles to this perhaps you

have something in a certain part of the

page and you want to contain it in an ID

and make it really specific to control

that like ul less you want them to be

inline in a certain region so again it's

just a general rule of thumb but when

you're looking at styling and writing

CSS you want to make it as reusable and

it's flat as possible and what's great

about this tool is these values help

guide you along the way

total IDs should be close to zero

because IDs you can only have one on the

page so you're again being really

specific with it so ideally IDs you want

to do not have it so many IDs you want

to write it a class and make it reusable

as I said they the total important

keywords it counts however many times

importance are in there again I'm using

the zero foundation framework and some

other things but this tells me I should

probably understand how come there's 113

of importance in my CSS file on at least

the action you just go hmm that smells a

little funny these reports are great and

again over time it outputs JSON you can

see how things grow and improve the

other great thing I love about Parker is

that spits out the total media queries

and so you're getting you just get a

listing right away of all the media

queries it's great great quick tool

the other great thing it does is it

spits out all the unique colors so you

can inspect this and then if you're

writing SAS you can

beat a stick at your UX people for

making 50 different Reds or blues you

know reel it in write a variable it's

all right there so Parker I think is a

really great tool what I really like it

for is measuring the size of your CSS

files that's something that's great when

you output your JSON you get a quick

measurement of it and then you can see

it how big it rose it gives you those

quick metrics to say am i writing a

class-based reusable stylesheet system

it finds all your color values and MIDI

queries for you so you don't have to

hunt and peck around or squeeze the

browser and take a little notes you know

it's all right there and also just a

little bit of a witch hunt on your

important declarations cons that's not

possibly not a full picture of the site

again we compiled all of our CSS into

one file perhaps I'd want to just have

if I'm using the ZURB foundation

framework that's what's great about this

tool it's a local tool I could just

recompile to only just have our theme

settings and just take a look at that

because ZURB foundation I can't really

control how they're writing their CSS or

improving it but I have full control

over mine so you might want to just

portion that off

the downside of Parker is it was last

updated in July of 2016 and so that led

me to say there's something a little bit

more modern out there again still a

great tool though but I came across

analyze CSS sounds very familiar write

checks this is because it's pretty much

the same tool go to github install with

NPM measures local or remote outputs

JSON I'm not gonna go as deep into

analyze CSS as I did for Parker but the

metrics are pretty pretty close but it

does just it gives you more options

again in my slides I have links you can

check it out their github page goes

through all these metrics really

but the thing that I really like about

analyze CSS at it has this offenders

list so this tells you that super long

specific CSS rule so you can just go to

that portion say what is going on here

why are we completely controlling all

the CSS in here can we make it more

reusable and less specific very similar

pros and cons to to Parker but wait

there's a newer tool brand fairly brand

new at the end of the year there's a

project called project Wallace it's a

style sheet and analysis tool but what's

cool about it there's two different

options there's an online option so you

go to their site and you give them their

info and the gentleman I follow him on

Twitter haven't spoken with him but the

the maker of project Wallace does a

pretty good job about privacy and

gathering he's very sensitive to

gathering this information but what it

does is it's an online visual tool so as

you can see the other tools were

command-line and outputting these

numbers he's just done a really good job

of making them reports and fancy reports

so there's also a command line to output

JSON as well but it's it's a pretty cool

site I want to explore it a little bit

more of this talk may evolve as I get

her into it so next up enough of those

tools I just want to talk briefly about

lint if you're not using lint you should

be CSS linting is an amazing amazing

thing it helps your team write really

good code it doesn't actually let me

correct that it doesn't help you write

code if you implement lint right it

makes you fight better code so CSS is

great linting for javascript can be a

little challenging if you're not using a

like grunt or

yarn to compile all UJS but on our teams

for code reviews we use an online lint

to just make sure that we're writing

could JavaScript I'm going to go quickly

through some refactor pro tips again as

you ought it as you're looking at all

this stuff it may be a really good time

to organize your CSS atomic design for

the win SMAC structure maybe it's a good

time to implement BM you know other

things again those tools were really

great to last out all your color

variables for sass you can write some

really good variables mix-ins to make

things more reusable and more consistent

throughout your theme javascript

definitely be using Drupal behaviors

always use Drupal behaviors some great

article at the end a lull about article

that's really great about using Drupal

behaviors and also yay for da only low

JavaScript when you need it so if you

have a complex component that's a great

time to refactor so what did all this

all these tools do I alluded to you can

output JSON right but ultimately after

you audit it you've done all that work

what you want to do is you want to

benchmark that and then measure it over

time so what I'm proposing is adding a

metrics folder in every theme and so

what you can do is take that output from

project Wallace written by Sprint so all

you have to do is you can add this as

part of your automation tasks and just

run it through Parker or command-line

tool I'll put that JSON and just put it

right in your theme so that way nobody

who's probably gotten that call that the

home page is slow right when did that

occur well perhaps if we use these

metrics we can see that the size of the

CSS file doubled over the last sprint

because we did

raishin so by measuring this over time

you're able to see and track then go

back in and have better answers for

what's going on also see your

improvements so not only can you export

the JSON and put it there why not just

add like a txt file called theme metrics

and again sprint by Sprint measure the

home page load time use lighthouse

there's a li scores as well so for

accessibility your site might not be

accessible now you can automate these

things put them in this folder and track

it over time

so measuring tells us where we've been

and gives us clues on how to improve and

these tools definitely do that I hope

you enjoyed the presentation

there's myth camp two three one please

rate my session and I'm available for

questions here's the references

to get online any questions about the

tools no you can I'm sorry if that was

up there I didn't update my slide that's

okay I was this I was incorrect I've

given this presentation before and I

thought it was only for one file but you

can do multiples yes so there's ways to

go to multiples yeah did you see I know

you did this on a specific project like

how much stuff did you tear out and fix

it's in progress the question was how

I'll rephrase it but how did this help

me with the project I was on I been on a

project and it's grown over three it's

coming up on four years and then my gut

I just had a feeling things were getting

a little large so when I ran it it was

like it is really large but I couldn't

say what tipped me over that edge if it

was just like a slow trickle that's

gonna just fill up the bathtub you know

so that's what got me thinking about

this project and outputting it measuring

over time is because I didn't have a

good answer for it

but in the end it allowed me to go

through and say oh there's certain

content types that we don't use anymore

on this project so we could just take

them all that CSS out so I'm backing

things out like 20k out of time

also some things that were done rather

quickly

I would redo and make him more reusable

so we established a pattern repeated it

and didn't really go back and optimize

for so that's that's how I saw this but

again having a benchmark is always good

hopefully you never have to look at it

but it's there if you need it

another question so it's JSON so you

probably could put it through something

but that project Wallis that I'm still

exploring their online looks really good

so check out the link at the end but it

does it is more visual but there is a

good way that you could take the JSON

and yes you know I think I think I was

amazed how they like one task like doing

something on one site that's very clean

and very streamlined there's so much

faster and then you get on to a site

where there's just really high

specificity and you're just in a war and

that's your whole weekend to some pass

that you like a half an hour on another

site and it's really hard to explain

that to management and it's also just

really hard to come up with realistic

estimates but I think you could really

just look at this data it just

summarized was just it's a great tool to

possibly help estimate we can see what's

going on sometimes you know I I'm guilty

of it I write really specific rules when

I write a style and that something's

overriding it I'm like I'm just gonna

specify the heck out of this certain

thing and it shows it shows in blue it

shows in complexity of what's going on

and it's not reusable sometimes like oh

I really like that button you did on

that form I'm like good luck trying to

pull that thing out of there because

it's in the header it's in this form and

it's for this form you know I wrote all

those specific tasks for it so yeah it's

a god it's a great time to slow down and

say everybody should get this button

what is this button called is it a

reversible button so that again I think

it's a great tool that's a great

question

it doesn't the question was what about

unused classes I don't know of these

tools that I've explored so far if it's

a way to say hey this is dead weight

that's why at the beginning of the

project I was talking about content

types and analytics reports to kind of

find out what's not used anymore so

that's how I would solve that mystery

but I don't have a way of running the

CSS to say this isn't used in the markup

if somebody knows of a good tool I think

there might be an audit tool that does

that but I don't know of one that tells

you hey all this CSS is not used in your

site I think we're at time I'm happy to

talk you could tell I'm really excited

about these tools

thanks so much great for my session

Thanks

[Applause]