Name: Use glamorous with existing CSS
Uploaded: 2017-08-15T23:33:24-05:00
Description: Glamorous works great with whatever CSS framework you’re currently using. In this lesson we’ll see how to make glamorous integrate with your existing CSS solution so you can migrate overtime.

Glamorous works great with whatever CSS framework you’re currently using. In this lesson we’ll see how to make glamorous integrate with your existing CSS solution so you can migrate overtime.

Use glamorous with existing CSS



We're including Bootstrap here. That's why we have these different types of alerts that we can use from the Bootstrap class names. We want to migrate this over to use glamorous.

Let's go ahead and we'll import glamorous from glamorous. We're going to use a couple glamorous component factories. We want to create components that render DIVs, and have these class names that we provided.

Let's go ahead and we'll create an alert that is a glamorous DIV. I'll go ahead and swap out all of these DIVs with the alert. Now, nothing is going to change here, it's still just going to render a DIV, and now we want to move these class names to be rendered by this alert rather than inline here when we're rendering the alert.

One of the things that you can pass to a glamorous component factory like glamorous DIV is a class name. We'll provide alert here, then we can actually get rid of all instances of alert in our class names.

Everything is still rendering exactly as it was before. We'll go ahead and save that just to make sure.

Let's say we want to get rid of the class name idea all together, and instead it provide a prop that determines which type of alert we show. For each one of these we're going to provide a type prop, and that will be given the type of alert that we want to be showing. We see all the specific type styling has been removed, and we need to add that now.

Each one of these alerts needs to be able to apply the right class name based off of the type. We need to have this be dynamic based off of of props. The way that we do that is we can provide any number of arguments to a glamorous component factory, and that will apply the styles that we want to have applied, or in this case, the class name.

For dynamic styles, we can provide a function, and that function is going to accept our props, so we'll say props is this function. This function is going to return us a string, and that string is going to be alert- props.type. That gets us rendering the correct class for the given type.

We can do the same thing with the root class name here, and this root class name is coming from our index CSS. Let's go ahead and we'll jump into there, and copy that over for our reference. We'll just put that right here.

With that, let's go ahead and follow the same process of making a root DIV that is a glamorous DIV. Here, we'll replace the DIV with root and everything looks exactly the same.

Now let's go ahead and remove that root class name. We'll put it inside of this DIV, so we get a styling properly and we get rid of that class name.

Now let's go ahead and change this root class name to CSS and JS, so we can actually delete the CSS and just use the CSS in our JavaScript. We're going to reference this.

I'm actually going to remove the root class name, change that to an object, so we are going to lose our styles there, and I'm going to paste it right in here.

Now I'm getting a bunch of red underlines, because this is actually not in JavaScript, this is CSS in JavaScript. We need to change the syntax a little bit, so that it is actually valid to JavaScript.

With CSS and JS, there are just a couple of differences here. One of them is, when you have hyphens here, you can just use quotes around the property names. We'll go ahead and stick with that for now.

Then you have to quote around the values. You can't use semi-colons here. These are going to be commas, and we'll just go ahead and quote around this value as well.

We have our CSS being applied properly. We're not using any class names at all here, we're just using components. One other more common way to reference CSS properties in CSS and JS is, instead of using these quotes, anytime that you come across a hyphen, you change that to camel casing instead, and you'll get the same thing.

One other final thing is, if the property is just a number, then you can actually remove the string and just provide a number for the pixels. Ultimately, if we wanted to get rid of Bootstrap or something in just CSS and JS, then we could look at the styles for alert, and apply those in place of the alert class and do the same thing for each of the alert types.

One last thing that I should probably mention is that the whole process of changing the snake case to camel case and all of this property-updating stuff is tedious. Especially if you're migrating a big code base from CSS to CSS and JS, it's kind of annoying.

There are plug-ins for editors. Here is one for Adam, just called CSS and JS. You can select the CSS, that you just paste it in in JavaScript. Press a keyboard command and it will update that to CSS and JS syntax.

There is a similar one for VS code, if that's your flavor of IDE. You can use these tools to lower the friction of migrating from CSS to CSS and JS.

Use glamorous with existing CSS

Share this video with your friends