Presented at: Chicago Coder Conference 2017
“CSS Isn’t Scary: How to Stop Worrying and Love Front End” is aimed at programmers who’ve written enough CSS to feel frustrated and is intended to help developers feel more comfortable with CSS.
This talk was delivered at Chicago Coder Conference 2017 to an audience of mixed skill levels and knowledge of CSS.
In this talk, I covered some of the most common complaints about CSS and why they make writing CSS seem so scary.
Between struggling with positioning, fighting the cascading nature of CSS, and wrapping your head around declarative programming, writing CSS can just feel so frustrating. When you can’t really write tests, you might end up just guessing and checking your work, and you end up going to a dedicated front end engineer to make the tiniest changes to your website.
Some of the most frustrating parts of CSS are also its strengths, however.
CSS is flexible enough to allow other languages (like HTML and Javascript) to style a page, and it’s relatively easy to generate using other languages. CSS is made of simple things (just selectors and name/value pairs!) but can also stand alone and do amazing things without any help from Javascript. It’s also fundamentally open source, so you can almost always look at the CSS for a website, dissect it, and learn something new from someone else’s code.
I’ve found that the best way to overcome a fear of writing CSS is to learn how to write better CSS, and think of it like any other programming language. This includes applying successful strategies for writing back end code to work with CSS, such as pseudo-coding and reading documentation.
In this talk, I explain lots of helpful tips for improving your CSS, including understanding selector specificity, writing simpler code, and keeping your code free of repetition.
Transcript
Delivered by Fen Slattery
This is CSS isn’t scary: How to Stop Worrying and Love front-end and my name is Stephanie Slattery. I’m a friend and engineer at Clique Studios and I’m going to be taking you on a wonderful journey through the land of hating CSS. In this video I’m going to cover.
Why CSS is scary, why it’s secretly great, and how you can write better CSS to be a bit less intimidated by it.
A lot of the common complaints I hear when mentoring folks are helping engineers who are less well-versed in front end is issues with positioning and CSS. I have a fabulous tweet to prove this to you. It says I hate CSS because shit doesn’t align properly. Not changing colors in Seattle. That’s not so bad. We can figure that one out but positioning. Let’s not even get into it. It’s so hard to get things to look how you want it to be in the right spot. Scary and intimidating. What’s another reason why CSS is so scary. I think this image is pretty much required to be in any article or any presentation about the problems with the CSS. This illustrates issues with overflows display properties. Why is it so hard to get things to align correctly to get things to live in the box you want them to be in. And let’s not even talk about vertical centering. Here’s another good tweet. Argh. I swear i hate the CSS You fix something just to have something else break. It’s an endless cycle. Because of that CSS is cascading. It’s so easy to accidentally break something when trying to fix something else. You write a line of code in somewhere else entirely something else breaks.
It is an endless cycle. What else. Today I figured out why I hate CSS. I can’t test it. How do I know I did it right.
Definitely another reason why CSS can be scary compared to other languages is that it seems like you can’t test it right before writing Python or Ruby or ph peer so many other languages that we use on the web.
We can write tests we can automatically tell if we’re doing if our code is doing what we wanted to do. Not normally the case NCSA us. On top of that. You don’t even get me output errors right. If I’m writing some javascript and I leave out a semicolon or spell the method wrong or something like that I’m going to get an error. My browser is going to be unhappy. It will give me an error on the console. Not true for the CSS. Every browser is going to do its best to interpret what you wrote even if you forget a semicolon or curly bracket. It’s just going to silently fail and that. Is no good.
While some see as a scary it’s declarative.
Now that’s a little hard to think about when you may be used to object oriented or functional programming in CSS. This means that the last rule that we declare takes precedence over all the other rules. Unless there’s a more specific selector then that takes precedence. A declarative language also doesn’t have loops which can be hard to think about and there’s no such thing as scope. Everything we write in CSS is completely global. Every statement I write every property is used on everything unless the selector says otherwise it can be a bit intimidating to have everything be global and none of those helpful things like loops we’re used to from other languages. And all of this is frustrating enough and scary enough to make you quit the internet. This person says CSS is enough for me to think this Internet thing is not all it’s cracked up to be. OK. That might be an exaggeration but it’s overwhelming it’s scary right. Soon after you don’t quite trust your own code enough you’ll end up needing a dedicated front end engineer like me or someone else to make even tiny changes to your site for you. This can lead to the idea that either CSS is impossible and you need some just wizard to do it all for you. Or the idea of I don’t understand it it must be it must be stupid will. It’s an easy thing to do. Somebody else somebody else’s problem which isn’t good for anybody right. So we end up with this somewhat common idea. Linux developers that CSS is awful.
I hope that by the end of this video I can successfully convince you that CSS is actually awesome. OK so we’ve talked about why CSS is scary. Why is it so great. There are a lot of things that can make CSS less intimidating. But believe me once you learn the language a bit more you’ll realize that it’s awesome. The first one. Is a bit heavy a bit scientific. It’s called the separation of control principle. So this is an idea in computer science. According to Wikipedia it is a design principle for separating a computer program into distinct sections such that each section addresses a separate concern and a concern a set of information that affects the code of a computer program. This simplifies development and maintenance of your code and it’s awesome. So if you think about how the front end of the web is constructed we have out dealing with the physical content that’s on the page. We have CSSA telling us how it’s presented. And javascript telling us how content interacts and behaves with the user. We have separation of controls because we have these three separate concepts HVM LCS us javascript. Before we had SS available to us. Everything was done in HMO. You might remember in line style HMO before the SS had to do both semantic content and style. See. That’s what’s a separate everything out. Easier to develop. It’s easier to maintain and that’s awesome. CSS is flexible. So I mentioned that we do have we follow the separation of controls principle on the front end of the web.
But CSS is also flexible enough that you can let each team in javascript do styling for you. We can write inline styles. We don’t have to use the CSS. And we can use javascript to affect positioning and all sorts of properties of objects NHT amount. CSS doesn’t have to do all of it and that’s pretty cool.
Very flexible CSS is made of simple things. So at the end of the day it’s a pretty simple language.
It’s just selectors that have name value pairs. Let’s take a look. We have. The end of the day some kind of selector. Now that might get complicated but it’s just something to select what parts of the HD and what we’re talking about. And then we have a name value pair.
And I again those might get a little complicated. They might be a little hard to remember.
But this is all CSS is. It’s just these three simple things. And that’s pretty cool. CSS is easy to generate an output to.
Fien building and drag and drop tools like Squarespace or Microsoft Frontpage exist because CSS is really easy to generate. Again because it’s made of these simple little things selectors a name value pairs.
It’s pretty easy for other code to generate CSS that’s also stands on its own.
Sure we have HGL and Javascript but there are amazing things that can be done with just CSS on its own. Just take a look at code pen and scroll that the front page and you’ll see amazing things like animated books that could have their pages turn on mouseover or detailed simulations of our solar system moving and changing and orbiting. These can be done with just CSS no complicated graphics programs or 3D modeling software needed CSS is also open source. CSS isn’t a secret. Whenever you write your CSS you’re writing open source code. When you go and put it on your web site I can see it right there in the browser right there in that I have tools. I can see everything you did. Now you might be using some sort of tool to kind of hide it to give things. Less helpful class names. But I can still look at everything you’ve done and learn from it. It’s one of the biggest values of open source is being able to share code and learn and develop to New techniques. Nothing secret.
So for all these reasons this is pretty great. Has a lot of powerful things a lot of beautiful things that other languages might not have. And now I know what you’re thinking. Stephanie that’s pretty cool. But. That doesn’t mean it’s easy to write. Totally totally fair point. So let’s talk about how to write better CSS. When I have mentored new web developers before on the front end concepts than CSS. I find that one of the easiest ways to get rid of this idea that CSS is intimidating that it’s scary is to go through principles of how to write better success. So let’s start. First of all I want to get you some guiding principles you can use to think about CSS when you’re writing in. The first of which is that it’s just another programming language. If you know some other way to write code. You have certain techniques you use a mental models for writing that code like pseudo coding. Right. The idea of writing out what your code might look like just in plain language. And then thinking of how you would convert those concepts into the proper syntax of your language. Also when you’re writing other kinds of code you plan you think about what you’re doing right. You know just get some check. OK well maybe we all do that but that things go better when we plan and when we pseudo code right. That’s something we can do in CSS. If you have a design already. You can sort of sketch on top of it and think about.
How would I create this as a div. OK and what would its properties be. How much padding would it have and you could sort of sketch that out almost like pseudo code or if you don’t have a design some sort of wireframe or sketch of what the site will end up looking like can really be helpful as a way to write CSS. You’ll find yourself already thinking of how everything should relate what is the index value thing should have what positioning. It’s much easier when you plan before you write CSS.
We can understand specificity. So we talked about this before. Right. The most specific selector is the one that wins out. It’s the one that ultimately gets to apply its properties to the items on your page. So what what’s more specific than something else. What will ultimately end up winning the most specific thing you can have. CSS is an in-home style and I guess I shouldn’t really say in CSS. That’s in HTML right. You’re putting that. Right in line with her H.T. about that’s going to override any other selector you’re right. The next most specific thing are ideas. These can be very difficult to overwrite because they are very specific. Max all sort of tie are classes. Attributes selectors and pseudo classes. So attribute selectors think of things like type radio for an input. And pseudo classes are like hover. And the least specific thing that we can use to select something to be strident are elements and pseudo elements elements are parts of a page like a div or in H1 and pseudo elements or things like before and after. Now it’s important when you understand this to not guess and check for specificity. Don’t just hope that you’ve written something that’s more specific than something else. You know these are rules about what’s more specific but also you can go through. And really calculate this. But let’s look at an example. So I have a wonderful tool I’ll recommend to you. It’s specificity calculator. I’ve got a link right there for you.
It’s a way to understand CSS specificity and the best way I can show you this is with an example. So let’s take a look at the first line up here. So we have a list item specifically the first child of its parent inside of that second level. And inside of that every item belonging to the class called Title. Wow that seems pretty specific right. So what we can do is sort of kept up these different sort of specific selectors. Let’s see we don’t have any inline styles so we will zero right there under inline styles. Next we look at ideas no ideas. OK. Then we look at those classes attributes and pseudo classes. Now this site hopefully highlights them for us. It’s really great. We can see that we have first child and title first child being a pseudo class and title being a class. So that’s two items in that specificity category. And last we look at those elements and pseudo elements we have to apply and H-2 cool. OK. So let’s say we’re trying to compare this selector to another one and we want to know which ones more specific. We’ve entered in the second one below here. We can see that we have. Item belonging to the Nav. ID inside of that items belonging to the selected class. Direct children that are anchor elements that are currently being covered. And this is pretty specific. So how can you figure out which one is more specific. We do that same thing. We title up the categories here. So we have no in styles receiving is zero there. We do have one ID that’s that Nav. ID.
Then we have two classes attributes and pseudo classes that are selected class and the hover pseudo class. And we have one element that’s the anchor element. So now we we have these sort of tallied up totals and we compare from left to right. See which one wins. All right. So neither of these have inline styles. So we move to the right which one has more ideas. Ha. The one on the bottom has one ID the selector on top has no IDs so we can see if this lever selector is more specific and it will win out. Now it doesn’t matter if that selector on top had I don’t know 20 classes which don’t. So we may see a with 20 classes but if it did it still wouldn’t win because the one on the bottom has a single ID. Now we would begin to look at quantity. Let’s say if the selector on top had two IDs at it and the one on the bottom had one ID. The one on top would have two IDs which was more than one ID. So it would win out. Again if you’re still not quite used to thinking of specificity like this I really recommend using a tool like the one I’ve shared with you here. Just copy and paste your selectors right on in there and it’ll tell you which one is more specific and it’ll explain why it’s fantastic. OK. So we can think about how to understand specificity that these look like really complicated selectors to me right.
I know I wouldn’t want to be thinking about these if I don’t have to. My next tip is don’t over specify. Let’s look at the lecture I’ve written here. It is. When we read it as as English in the home area in the hero area in the claim area for all things with the logo class for any H-2 they should be displayed in my block. That is a hard sentence to follow and it’s hard to think about the more long and specific are selectors are the harder they’re going to be to override and change in the future. I mean just look at this it’s got three ideas right. In order to write something more specific that could override this I would need to use for IDS or an inline style you know where re. Don’t over specify. Inevitably your code is going to grow and change over time as you’re adding onto it or another developer’s adding on to it and changing it. We want to keep things as maintainable as possible. I don’t want to tie things just to General HTL component. This is mostly because it’s hard to find code like this later. Right. I might be trying to style a specific buttons somewhere on a page that’s an anchor tag. And for some reason it doesn’t look how I want it to. I might have to go digging around and find where this selector is that’s changing every single anchor tag. So don’t be too specific but don’t be too broad unless you really mean to style everything.
Every single H.T. of a component that has an anchor tag in that way be just as specific as you need to be say what you mean right. Another helpful tip for CFF is to not use important flags. Here’s an example of what this says if you’re not familiar with it my selector is just grabbing things that belong to a pink text class. And I am saying that they need to have the color pink and that this is important. Properties with the important flag mean that we should respect this above any selector that might be more specific. This is like a force override the right. We might have an incredibly specific selector somewhere else that says that. Items like there should be I don’t know. Brian. This is not a very specific selector it’s just got one class but because it has that important flag. Well it’s going to override everything. I sometimes find when I’m working with junior web developers that they don’t know what an important flaggers they’ve never seen it before. Suddenly one day they learn about important flags and he hears it everywhere. It’s easier than learning specificity right. I can just force this to be more specific by putting an important flag on my day is done. Which can work for making a simple little site that only you are maintaining and you write the code and then you’re done. That’s OK. But if you’re writing a bigger web site with multiple developers or one that you might hand off to somebody else to work on in the future this is going to be a mine. Right. It’s going to be difficult to find these important flags because I can write a very very specific selector.
And it will never win out because of is important like exists on another line of code. So unless you absolutely have to do not use important flags. They just make things trickier. What else. Well don’t use important flags but absolutely do not write inline styles. So if you’re somebody that’s been writing code for the web for a while you might remember the glory days of styling only being done in line in HCM out like this. Right. Would write style and put something that kind of looks like CSS in their right color red font size 14 pixels as we saw before when we looked at that specificity sort of chart amongst styles are the most specific thing you can write. It doesn’t matter what I write in CSS this is overwriting it. It’s saying for this bit of code don’t even look at that CSS just look at what’s right here. Is there a color in the CSS. We don’t care. We specify the in line. This is one of the things that will make your life very frustrating and makes us that’s very intimidating if you do it because for the most part when you’re looking to change around styling you’re going to be looking in CSS far too heavy handed with your specificity.
Don’t use in lifestyles are important flags. Try to not write really complicated selectors but also don’t tie your styling to just an HCM element unless you really mean just style everything belonging to that element. So now that you understand specificity a better more we can get into some more detailed ways to make your life with CSS easier. First off try to use a single class as your selector. And in this example here I am styling something based on just a single class that I’ve called Hero text like instead of something like this where it’s the hero class. Things inside of it that are in a paragraph like.
Anchor tags inside of that one that makes sense to you. That’s well documented. And it’s easy for other people to understand. If everything’s being tied to just a single class. That’s great. It’s going to be really easy to override if you need to later and then make your HTML pretty simple. Also keep it dry. This idea of dry d r y standing for. Don’t repeat yourself if you’re used to reading other code You’ve maybe heard of this concept before.
Don’t repeat code somewhere else. What’s an example of that. Well here I have just a little snippet of HMO. It’s got two classes a fun title and a pink title. And I’ve written some success. With my fun title selector. I’ve said anything that belongs to the title class should have the font family of comics fans the best font of all on and somewhere else in mind. SS I’ve said anything in belonging to the pink title class should have that Comic Sans font family. That should be the color pink. Now you can see here I’ve repeated the same line of CSSA twice. What’s the way I could make this more dry and not repeat myself. Well. I’ve got that same line of HTL up there. I could write a different selector using the comma operator. This means everything belonged to the title class and also everything belonging to the title class should have this font family. I still say that the pink title should be pink. Pretty cool. Definitely an improvement. I’m not repeating that seems that same CSS property. How can I make this even better. I’ve changed my Each channel up a bit.
You can see I now just have this idea of a title class and also a picked title. Everything that’s being given the title class should have the font family of comic sans. And everything with a pink title should be pink. Now this means that I can apply that title class wherever I want the font family to be comic sans. And this pink title where I want everything to be pink. Now it might seem like a subtle difference but I’m making my CSS less complicated and easier to read this way. That I’ve also sort of made it more useful right. I no longer have to use very specific classes for titles to be pink or CSS or whatever. Just all titles should have that font family. Now. Here’s something really fun. CFS trans Pilar’s can make this even easier. So what does the CSS trans BOTELER. Well if you’ve heard of something like last. Or SAS. Or s.c.s that. You are familiar s.c.s that’s transpires. This is a different way of writing code that. Mostly looks like CSS. That trans piles itself into CSSA. This will allow us to easily apply that title styling to every kind of tile class I make. And I won’t have to add in more classes for my HMO.
Now see CSS trims Pilar’s do a ton of other awesome things. I really encourage you to look them up a lot more than I can really fit in in this video. You get wonderful features like variables and arrays and loops. All those things you might be more used to thinking about. What are other things that can make our lives easier. Yes yes. We can organize it.
So if you’re writing something pretty simple you might just put all your CSS one file in. But anything beyond maybe a page or two. You’re going to begin to have lots of selectors lots of properties.
It can be easier to use multiple CSS models of course name them appropriately. Maybe even put some comments in the file explaining what’s in it. Also organize your code within the file.
If I have an entire file that’s just for my home page I may have a comment to label the area that’s my hero. A comment to label the area that’s my footer and every other piece of the page and to make it easier for me to find it later and easier for other people to follow up and work on my code. Another helpful organizational tool is a file that you might call hack’s dot CSS and you know things that are really specific or have an important flag stuff like that. We put it all in a specific single file that makes it easy for us to go back later. And fix it and improve it. Ryan what should go in this file. Anything that uses magic numbers like very specific numbers are a magic number. And 4. Has something has absolute positioning. And we’re moving at 72 pixels from the top. That’s kind of a magic Where’s that number coming from right. We might read a comment saying why it’s so specific. We also should put code in here for using overly specific selectors important flags or for having to write code to undo restyle that somewhere else in the code. I love using hacks Nazi CSS\ files especially on teams were multiple people that are writing CSS for a single web site.
I love to put comments in there saying why I had to do it. Maybe I ran out of time. Maybe I was rash. Maybe I had to match a design pixel perfectly and this is what it took. I’d also write some suggestions of how it could be improved in the future. And if you ever have some spare time reading through the hacks Nazi CSS file and refactoring the code is a really great way to improve your CSS. This also keeps the rest of your CSS. Everywhere else super clean and looking good. So it’s much easier for code reviews. And there is so much more you can do to help improve your life of CSS. You can learn how the box model works. The ideas of like margins and padding and all that you can use Fluxbox. But that makes vertical centering so much better. You can pick a preprocessor. That’s what we talked about before last Sassi SPSS. You can also implement a naming methodology for your classes like bam or. Oh yes that’s the stand for block element module and object oriented Yes. It makes organization a name and great. You can also use visual diffs to test your code. There are a lot of there are a lot of tools that will take a snapshot of your website and compare them pixel by pixel to tell you what’s different can be a good way to test if your CSS does what you want it to. You can also use a Linter. Now you might use lynchers for other languages you write.
They also exist for CSS. This is a tool you use in your ID that tells you if the code you’ve written is semantically correct. If it follows the rules of the SS I will help you out a lot. You can also look at dev tools in your browser open on up dev tools look at how your site ultimately is being rendered. Dev tools are fantastic, especially in Chrome because it’ll let you know. What’s overwriting what. Which is your selectors are actually being used. You can also use a CSS reset file then do a lot of weird things browsers might do and make it easier CSS you to write clean code on top of them. So I hope that after all this I’ve convinced you that CSS is awesome. Or mostly half way. Hopefully you have some new tools some new ways of thinking to help you be a little less scared of the CSS.
