Duration 38:02
16+
Play
Video

RailsConf 2019 - The Joy of CSS by Cecy Correa

Cecy Correa
Software Engineer at Thinkful
  • Video
  • Table of contents
  • Video
RailsConf 2019
April 30, 2019, Minneapolis, USA
RailsConf 2019
Request Q&A
Video
RailsConf 2019 - The Joy of CSS by Cecy Correa
Available
In cart
Free
Free
Free
Free
Free
Free
Add to favorites
1.07 K
I like 0
I dislike 0
Available
In cart
Free
Free
Free
Free
Free
Free
  • Description
  • Transcript
  • Discussion

About speaker

Cecy Correa
Software Engineer at Thinkful

Cecy has close to a decade of experience working in tech in a variety of roles, from marketing to support engineering. She transitioned into software engineering in 2015 and enjoys working with APIs, and teaching people how to code.

View the profile

About the talk

RailsConf 2019 - The Joy of CSS by Cecy Correa


“I try to avoid it” or “just use !important” are things I hear developers say when it comes to CSS. Writing CSS that yields beautiful websites is an art, just as writing well-organized, reusable CSS is a science. In this talk, we’ll mix both art and science to level up your knowledge of CSS. We’ll revisit the basics to build a stronger CSS foundation. Then, we’ll step it up to SCSS, Flex, and pseudo-classes to build more advanced logic. And lastly, we’ll take a peek at what’s coming next with CSS Variables, Grid, and Houdini. By the end of the talk, you’ll be excited to work on CSS again!

Share

Hello. And welcome to the joy of CSS. I'm so glad people are pumped about CSF. My name is Ceci Korea. I'm an engineer at thankful. We are 100% online coding bootcamp and I'm actually really excited to be giving the talk today. Cuz I'm really really into teaching people about code and one of the things that I first thought was a HTML and CSS and it can be an awesome experience because when someone is just getting started and this is like the first time they've ever written code and they

start putting stuff on his page and they start changing colors and stuff like that. It can be really exciting. And if you make that a positive a positive experience, then you gain hopefully someone else I will be a fan of coding forever. So I'm I'm really into talking about those sort of basic subjects cuz I feel like that's where the Difference between you can really make a difference when you're teaching someone how to code. So I'm really excited today to be talking to you about CSS specifically CSS near and dear to me because like many

people that grew up in the 90s or thereabout. I got my star doing anything computer-related with geocities. I will absolutely admit. I had a geocities website. I have tried to look for it. I'm gone on the Wayback machine and I have not been able to find it. If any of you I dare you to find it if if you are able to find any you can just tweet at me. I'm abscess in Korea Correa on Twitter. Do you find it and you're like a wizard and you send it to me. I'm going to be so grateful. But since I don't have that site right now that I can show

you I can describe it to you and I can absolutely tell you that my dear City's website had a space background. I was using Comic Sans cuz I wanted to I was using it on ironically and I absolutely had a under construction gift because how else would know that I do. You know, if the site was still under construction. I was still figuring things out. I was still figuring myself out years later has completely new generation of coders came into the picture who were introduced to coding through Myspace.

Yes, because Myspace allowed you to style your page with CSS. And if you knew a little bit of CSS, there were a lot of things you could do. I remember spending so much time changing the borders of all of my containers and then playing around with the cursers you remember you can add little like space dust your cursor. There's so many things you could do in a lot of the things I wouldn't do now knowing what I do. Best practices but that's really where my my love for CSS in Milo for programming really grew and it

gave me a lot of confidence to things like maybe this is something that I can do. So for a lot of us, I got our start in this way playing around with sage EO cities or Myspace a lot of us come from non-traditional background a lot of us tend to be women a lot of listen to be underrepresented minorities. So when we talk about things like CSS in JS and people look at CSS, not so seriously just missing it like it's just Layout logic it's not really anything fancy. It's not really worth of learning is

something that I've heard about CSS. There's a lot to unpack there. A lot of feelings are like under the surface. And it all comes down to almost like dismissing this community people like me who come from non-traditional backgrounds who this is how we started this with our Gateway into the development and what we do now, which might be completely different then back when we were just playing around with gifts into your city's so there's there's a lot there. So I really wanted to have a talk when I talk about the SS and why I find it

really just wanted to work with and also wanted to talk about some reasons why some people might not find it for me to work with and try to address. To try to bring that Joy back into CSS. So I want to talk about tips for making CSS better for your day-to-day kind of borrowing from Bob Ross. I'm going to try to think about putting together a painting so we got to start with that bass. You always started by painting a basement. He would always paint the clouds and paint the mountain nobody like the base for his Painting and then after that he would fill in some of those trees.

So we're going to have some happy little trees and talk about some more Intermediate A CSS type of things that you can do just asking what's coming is so exciting with CSS. Grid. We have variables we have Houdini. It's there hasn't been a better time to be doing TSN stand right now. So let's get started. So the base let's talk about some basic pain points that people might have so painfully number one that I typically see people struggle with is targeting a specific element just gets into something called CSS specificity

and most people are familiar with the basic principles of this. So you have an element Like A P tag and then I crossed supersedes dad and then an ID supersedes. That's the basics of CSS specificity. Most people get that. But what happens when you start adding more things into The mix things can get dicey. So this is where learning CSS specificity with Star Wars really helped me gain, a better understanding of how to better Target different elements. Now, this beat are not my idea of these are ideas that I found the very first time that I try to explain CSS. I came

across this post on stuff and nonsense from a fella named Andy Clark and he was talking about CSS through Star Wars specificity specifically, it's pretty easy to understand to Stormtroopers. So to element tags, what about a class? Okay a class is like Darth Maul solo been more powerful. What about Okay, it's a little bit more powerful. What about two elements in our class? Okay, we're getting there. What about two classes? Wow, okay, that's to Darth Maul's that's pretty darn specific. What about An element a class and element at a class. Okay. Now we have two Stormtroopers.

We have to Darth Maul's we're getting pretty specific and ID Darth Vader. Okay. Now we're getting there now. We're trying to realizing that progression of how the mix of things kind of effects. Specificity right? What about an element in the lady? Okay. That trumps all of that. What about a half an almond? And then I D? Okay, that's like a Darth Vader and Stormtrooper and Darth Maul together. Wow, that's pretty specific. Okay to classes and then ID to

Darth Maul's in a Darth Vader. Okay, that's pretty darn powerful Emperor. Okay. That is pretty powerful and that trumps pretty much everything else and then you have important it's his death star and it should absolutely be treated like the Death Star that's when going back to the CSS in JS argument. I specifically remember reading someone who said you don't need to learn CSS just use important and they said this on ironically because I checked and they said they were absolutely serious and the thing about

using important a lot is that it's kind of like Andy Incredibles when the bough Guy talks about how he wants to give everybody super powers because when everybody super nobody is and it's the same thing with important. Once you start using important a lot when everything is important nothing is so you really want to use it sparingly and just take the time to really dig through CSS specificity. If you want to learn more about it. I highly recommend he just Google the specificity Star Wars. You'll probably come out come across this blog post. And if you want to learn or practice CSS

specificity a little bit more there's this great thing called CSS Diner is over at fluke out. Get home. IO and this is a series of drills that you can do to level up your CSS specificity. So for example here is just like the plates we would like we was at the coat over here and we see okay play. We did it feel like the Bento boxes. Just like this and you keep on going and it'll get progressively way way harder, but it gets hard. So I highly recommend that you go through that. cool All right

number to code is not drive hard to read usually this is because of bad habits by 10 to see when people are creating layouts so bad naming conventions and not thinking about reusability. So A very wise person once said that there are only two hard things in computer science cache invalidation and naming things and naming things in CSS is no different. It's it can be a pain. It can be hard. So it one of the things I typically see people do you have to have this layout you have maybe like a pricing table. This is actually a pricing table that I saw on a product

that I was looking at recently. So this is totally a real layout and usually what I see when people try to implement something like this is that do them things like fox-one box-to-box 3 + Sometimes you might get something like yellow box green box blue box. Now this works, but it can be improved. So typically when people use that powered of box one box to box 3, they're focusing on the things are different among the boxes. But what you really want to do try to make us a little bit more reusable is to

focus on the things that are similar between the boxes and then handling the exceptions as different classes. And then also try to use things are going to be more reusable in the future super example how I would approach something like this is creating a pricing Base Class that has all of the elements that these boxes have in common. So, for example, they all have the same width and height. They all seem to have the same border. They all seem to have the same border radius. They all seem to have the same box Shadow and then after that you can handle the exceptions which of the yellow

the green tax in the blue background. You could handle it by adding classes like Green blue, but I would preferably like to use something a little bit more semantic like micro large and maybe like highlight because if you were to name this yellow green and blue what if marketing says, you know what that yellow is not texting. So well, we want to make that purple now all of a sudden you have a class called yellow that you're going to have to rename purple and you're going to have to find all of the used to just everywhere and change that I wear if you named it something I live in West

likes a micro then all you would have to do is change the color in that class and boom that's it to do. I when I'm breaking down a problem in CSS further reading on naming their is this standard called bem bem block element modifier that a lot of people like to use and then there are also other Alternatives like Pleasant been a soup CSS and a bem. I think that it all comes down to preference if you typically Do stuff on your own and might come down to your personal preference. If you do things as part of a

team in my Merit an evaluation little of the all of the different options out there and a talk with your team to figure out what best suits your needs but there's definitely a lot of patterns that you can leverage their. The next thing I want to talk about is color. So it's more of a tip that I actually took me a long time into my career as a developer to figure out what was happening in color in CSS. So so you have a problem where someone says can you define but can you make the button the blue button? Can you make a blower and then you're like Sure,

there is a way that you can do it. So let's talk about how hex colors work. Many of you if you're using a hex code in your CS as you might have seen something like a hashtag and then alphanumeric string typically 6 or 3 characters long and usually it's red green and blue red red green green blue blue depending on the values if the valley is for red and green and blue are the same then you can just use 360 RGB. So if you have a color like cereal cereal and is 0 is 0% of that color and F is a hundred percent of that color. Then what would

0% red 0% green and 100% blue bee. Blues if we had something like this, so 100% read a Seer person green 0% blue. It's red. So what I like to do when I break down something like this is play around with the values. So right now here we have a hundred percent red some grain and little bit of blue what happens if I turn up the green all the way and give that 100% we get yellow what happens if I make blue Sierra percent boom. We got. Yellow. So then if you start looking at this, you can start seeing how that value progresses and that spectrum

and I think it's really interesting. So now if someone says Hey, I want you to make this thing blue, you can literally use something like this to try to increase the value of that blue color and play around with the other values for for red and green and then try to arrive at something. That's more blue. Or you can talk to a designer and they'll give you a better color. But just in case you can play around with it. Also another Pro tip if you literally just type Color Picker in to Google it pops up this really useful Color Picker that you can use and play around

with I actually use it all the time. I used to go to a website called colourlovers a lot to pick out a different light color scheme. And now I pretty much just use this color picker picker whenever I need to like get a quick color whenever I'm designing something typically for myself cuz usually a designer will give you a really nice colors to work with Okay. So now it's part of our time for our talk to talk about adding some of those little Happy Trees to try to add a little bit more to our painting. So the first thing I want to talk about here is how we can level up are SATs or

scss. Some of the things that I typically like to to do is to break up your files. Sometimes like coming to a project and I end up seeing like a super large CSS file a CSS file and one that can be really wanting to work with cuz you don't really know what you're looking at. So I file structure that I tend to like I got this from the South Way. Cam is a spinning things out in two modules partials and vendor in your modules folder. You would have things like your variables you're mixing stuff that doesn't get compiled into the CSS or stay on your

partials. That's where you have most of your layout stuff must have your logic so you can have a partial for a header. You can have a partial for a sidebar stuff like that. You can even bring it down further into a partial for typography. That's something that I tend to use a lot cuz Type Styles can get pretty lengthy pacifically how I like to structure my own projects and then you can have a vendor folder where you can have a third-party code. Another advantage of this is that your main scss file is going to be essentially a bunch of

imports, but I think that this might be a might be a little bit easier to try to parse because you essentially say, okay, I need to change something in the matter, you know, there's a partial to her or you can go to partials header and check it out. So I feel like it might give people live in One Direction or a little bit more of a place where to start when they start when they are on board until project. Another thing is naming your worse and this kind of goes back to this idea of trying to name things in a way. There is more reusable. One of the things I see a lot

is vardon aiming like this. This is perfectly fine. And it's reasonable you have variables in SAS that allows you to say value. So if you have a value for a red dots for e242 probably not going to remember that you probably don't want to type that all the time so throw into a variable call it something like red and make sense. But for me an optimization and I like to make here is to maybe name is something a little bit more reusable like primary because what happens when again someone says, hey, you know, what? We don't really want all of these things to

be red. We want these things now to be yellow. So now you have to change the name of the variable and then change it everywhere else where it's used mine to you if you're using an ID those type of things. Can be fairly easy, but personally I just few already started with a name. That's a little bit more reusable then all you have to do is just change that value and I find that to be a little bit easier if you ever need to go back to that code. Same thing can be said for font Styles. So instead of something like naming a variable after the font, which is something that I also tend to be a

lot. I tend to like are you seeing a pattern where I'm using something like more descriptive like body or headlines dub head that way again, if that needs to be changed then I just change it in that place and then everything else propagates. I always try to think in terms of powerful make sense. So I'm always trying to see like what are things I can come by and try to make something to make me laugh life a little bit easier later on so one mix and I typically use a lot in my projects is something like this where

I want family font size font color and then just was just one line. You can specify all of that. You can even read some of your variables like body and then passed in Things like the size and the color and then that way you stay to yourself three lines of code and you turn that into just one. So that's it for SPSS. Flex Flex is really cool. I like to think just like Video Killed the Radio Star Flex killed the clear fixed are not sure if it was ever a star

what is meat because they give you more flexibility and how you design the layout essentially allows parent container to figure out how it should feel its own space and it's also a space agnostic. So it allows you to move out or position things for his on a croissant delete and vertically, so it makes things like creating a navbar just that much easier. So for example, this is a typical pattern that you see you might have a baby content container and then a sidebar container in the old way you would likely have something like container and it would have a with and then you would have

a sidebar. That would have a float when you have a man that would also have a float and each of those things would have a with stop worked but with flags actually a lot simpler, cuz once you say display Flex, the default direction for Flex is row. So just saying display Flex will default that to a row type of display. So we get this for free. And then after that only have to do it specified the width of the sidebar and then based on that main knows that it just needs to occupy the rest of the space so you don't really need to I specify I mean if you don't want to so

for example, I have a code pin where we can play around with this. This is actually something that I ended up doing for my current work. We wanted to do something where we had this like schedule and I used Flex to essentially tell this container we want all of this. To take up all of the space in this just to take up what it needs to and I did that by using this property called grow. So here if I say Flex grow one. I'm essentially just telling this little box. Hey, we want this to take up as much of the space as possible and then the rest can just be sort of like figured out. So this

is how I was able to get this alignment, which if I hadn't use flex it would be much more of a pain to try to accomplish and this lives right now on this website. It ended up being a little bit different I once we ship that but it started off like this. So this is something that you can totally use today to try to create some neat components. All right. That's an example in Pride. And then I should have clicked out of that. I should have just taken you to flexbox. Froggy. This is actually How I

Learned Flex so flexbox froggy is a game that uses Flex to have you help the Frog get to its Lily Pad. So here it'll give you some instructions like hey, you can use to justify content to try to line the Frog and how they find the lily pads to hear. You can say justify-content. We probably want Flex end. So this means go all the way to the end of the Fleck. Space so now the froggy goes all the way to the end here. Let's see. justify content Center Yay, I'm so literally this is 24

levels. It does get dicey and it's kind of similar to CSS Diner that I showed you earlier and I think this can really help cement those ideas of Flex. If you're looking for a way to either learn or level up the next pseudo elements elements are highly underrated and sometimes just nod leverich as much as you could so some of the suit that you might see are things like last of type last child and some type and child. So I'm a big fan of using something like this to try to create layout. So here I'm going to try to both combined flex and then use

a suit of class to try to create an app for a real quickly. So first of all, let's say that you want that sign ups ETA to be red. So that I can pop so here you could say something like this. best of type and then you can say to this going to be color red. And now it's red and then with flags if we say that we wanted to create an owl bar. That was a horse on all we could just say. Play Flex is going to look ugly because there's no spacing. But now we just

had a little bit of space. Oh, yeah, that's right. It's always different when you're coding in front of people. You just suddenly become the stupidest person on Earth. So boom obviously, this is a very bare-bones type of now, but now you can start to see how are you saying things like Santa Claus with flax you can start getting somewhere really quickly. Alright, the other little cousins that I tend to use a lot arhitect active hover disabled specifically. I use checked quite a bit to build things like navigation

or toggles. So here is another codepen that I can show you where I created a very basic again, very bird Bones menu. This could be almost like a mobile menu if you wanted to where I'm using a label that will later be invisible and I'm using the State student class checked to see if that label is checked apply different styles to a different class. So the first thing I want to do is Do I have any new clothes which is this x right here in this is going to become a button where you click on it and it will close the toggle. So let's actually add those

Styles right now. Have a bit of a style try to add it and make it look a little more like a button and then I'm going to stay many clothes at the start of display none. So now you can't see that close button. And then now I'm going to leave that check box visible so you can see the interaction. So the next thing is to set menu as a default value of display none. So now you can't see the menu. So now if. Checkbox is checked. oh, yeah actually have to on, now that functionality

so here in the checkbox is checked what I'm saying is if this is checked then I want the menu to be displayed and I want menu open which is this label with the three dots which is essentially just my Quickie way of trying to have a hamburger icon. I want that to be display none. And I also want that when this checkbox is checked. I want many clothes to display you feed functionality just based on that one check mark and then you can see when I be selected all the Styles go away. If it is checked you can see that the button to close is toggled and that the menu

at is displayed if you add some CSS animations on top of this you can start getting some really nice fancy functionality fairly quickly. So now if I finally set this menu toggle to display none. Checkbox do so, but it's just it's just hidden. It's still there. Functionality is still there. So again, these are some ways that you can get some pretty I would say fancy functionality would just CSS not even having to write any JavaScript. tool so let's talk about the future cuz the

future is really exciting. First thing is CSS variables. So now we have variables if you use something like SPSS, you might be used to that little dollar sign but now we have variables in SPSS you define them and use them fully differently. So you use two dashes. Then you name the variable you give it a value and then to use them you have to call VAR and then give it the value of the variable that you want. So it's a little bit different than what you might be used to another big difference between the

variables in SPSS in the variables in SPSS is that they are scoped. So if you want Global variables right now, you have to maybe add them to the route and then if you want local variables to add them to a specific class or selector. So here we would have a primary color of blue as a global variable but four. BTN that would actually be read because that local variable would take precedent over the Level one. Can you use it? This is changing all the time last time that I checked this it wasn't

asked largely supported but now it really seems like most of the major browsers kind of supported so might be worth looking into CSS grid is another thing that is in the future but not really it's almost really here and it's really neat. So the difference between CSS grid and say Flex is that CSS grid with specifically designed with layout in mind the back in the Before Time in the long long ago. We used to build layout with things like tables and divs things that weren't meant for us to use for layout. That's why they were painful to work with and I think that's why a lot of

people didn't have a good experience using CSS you had to do all these hacks to get these very basic things like layouts but no longer CSS grid was specifically made with layout in mind and CSS grid is two-dimensional whereas Flex is one-dimensional. So the difference is You might be wondering. Well, we have CSS grid then why do we need Flex for so grid is really meant to be used with more like a larger scale layout still say you might use grid to lay out an entire page. Where do you might use

flex to do little layouts within a component so I can to go back to the number example, you might use the actual grid to place the nest bar but the spacing in the alignment within the navbar you might use flex for that. So it really CSS grid and flex are meant to be used to sort of like side-by-side time. Now, if you want to learn more about CSS grid, you can go to CSS grid garden and you bet y'all were going to go and look at it right now. Now if this looks a little bit like

flexbox, froggy, And I meant to I believe it was maybe some of the same people or at least inspired by flexbox Froggy and this is how I learn CSS Grid. It's a really effective way of learning these things and also kind of fun. Now I could have swore I had a slide for can I use CSS grid and again, it looks to be mostly there for most of the major browsers. So definitely still definitely a good time to start learning that right. Now now we have CSS Houdini Seasons Houdini is really really interesting because it's essentially making CSS extendable

from Houdini. Glitch. Me which is put together by Sam Richard. Who does that's a lot of work with the CSS Houdini project. He explains CSS Houdini as much like service workers are a low level JavaScript API for the browser's cache Houdini introduces low-level JavaScript API for the browser browser to render engine. So this means that you are able to extend CSS. So yeah you can now Write JavaScript in your CSS. So here in this example, you can see we're actually using this background

canvas variable. It takes some parameters and it actually has some JavaScript in there to do something rather needs. So we've kind of Gone full circle from this idea of like CSS in J's will now we also have Js and CSS and it's very exciting time to be alive and be doing all of these things. So let me show you Pierre Chrome Labs has a lot of really need examples and you can also go and poke around at all that code. So for example, we have this one that I really like the starboard and you're like, okay this just in boxes.

Also, if you think about it, does this not kind of remind you of back in the day a lot of the geocities stuff I used to have so again, we're going back full circle. Another one that I tend to like, nope. I don't think it was this one, but I haven't seen this one. I leave are some of these don't actually work. this one founder effect. Okay, this is crazy. It's a little bit when you take into consideration that this is at the very beginning stages. You can start

to think about some things that you can do once this gets to a more stable position. So I'm very excited about CSS Houdini. I really feel like I'm starting to become a thing. It just felt like home. What is this new thing is like so exciting. I feel like CSS Houdini's also kind of like bad words are like opening us up two more possibilities of what he can do with CSS. I see we're able to see you from my dad. It is not super supported yet, but you can check out is Houdini ready yet. Calm to see the status of that

projects. And if you want some further reading a CSS Houdini rocks is really good. And then also Houdini. Glitch. Me talks a lot more about all the different apis for Houdini and to wrap things up. Just wanted to say is that yes if you serve CSS is very exciting and remember that we don't make mistakes. We just have happy little accidents. Thank you.

Cackle comments for the website

Buy this talk

Access to the talk “RailsConf 2019 - The Joy of CSS by Cecy Correa”
Available
In cart
Free
Free
Free
Free
Free
Free

Access to all the recordings of the event

Get access to all videos “RailsConf 2019”
Available
In cart
Free
Free
Free
Free
Free
Free
Ticket

Interested in topic “IT & Technology”?

You might be interested in videos from this event

September 28, 2018
Moscow
16
166
app store, apps, development, google play, mobile, soft

Similar talks

Eric Weinstein
Director of Engineering at ZipRecruiter
Available
In cart
Free
Free
Free
Free
Free
Free
Braulio Carreno
Principal Software Engineer at ActBlue Technical Services
Available
In cart
Free
Free
Free
Free
Free
Free

Buy this video

Video

Access to the talk “RailsConf 2019 - The Joy of CSS by Cecy Correa”
Available
In cart
Free
Free
Free
Free
Free
Free

Conference Cast

With ConferenceCast.tv, you get access to our library of the world's best conference talks.

Conference Cast
575 conferences
23117 speakers
8618 hours of content