Checkout my Getting Started with React video course on Skillshare. It is 100% free.

Why use the :root pseudo selector to define CSS variables

o my shame, I have found about the CSS :root selector only a few weeks ago when I was changing some styling in the WordPress theme of this blog.

I've seen a piece of code similar to the one below:

:root {
    --color__success: #1fc281;
    --color__info: #00b9f2;
    --color__warning: #f4cc31;
    --color__danger: #e83337;
}

I've recognized the declarations of the CSS variables but what was that :root thing doing there !?

And started to read more about it.

Long story short. The :root is referring to the highest-level parent of a given specification. In the HTML specification, the :root is essentially the same as the html selector.

But, CSS is also designed for SVG. So, we can use :root to select the highest-level parent of a given specification even if is HTML, CSS or XML.

This means that if we want to define global properties, like CSS color variables, we will use :root and those variables will be available both in HTML and SVG.

:root { 
    margin: 0; 
    padding: 0; 
    --main-color: #ff1100; 
}

html {
    color: var(--main-color);
}

svg {
    fill: var(--main-color);
}

And also keep in mind that root is a pseudo selector. This means it will have a higher specificity that the html element selector.

:root { 
    background-color: red; 
    color: white; 
} 
html {
    background-color: red; 
    color: white;
}

How CSS resolves conflicts: the specificity rule

There are two main ways of how CSS deals with conflicting rules: specificity and cascading. In this article, we will focus on specificity.

Take the following example:

div p { color: green;}
p { color: red;}     

Applied to this HTML:

<body id="home-page" class="blog">
    <div class="intro">
        <p> some content</p>
    </div>
</body>

The cascading rule in CSS will indicate that the paragraph should be reb, given the last rule. However, we will see that the paragraph is green. And that is because of the first rule is more specific than the last rule.

ok, but what happens if we have a CSS like this one:

#home-page.blog { color: green;}
.intro .blog p { color: blue; }
#home-page { color: orange;}
body div p { color: red;}      

With the HTML being the same, what color will the paragraph be in this case?

How CSS specificity is calculated?

The CSS power can be determined by calculating the sum of all the selectors that are used in that statement. For this we can use the following table:

The most powerful selectors are the ID's (100 specificity points) , followed by classes (10 specificity points), and finally the elements selectors (just 1 specificity points each).

The pseudo-class selectors (for example :hover, :before or :after) and the attributes selectors have the same power as a class selector (10 points).

So, with this knowledge, let's calculate the specificity levels in our example:

#home-page.blog { color: green;}
// one ID and one CLASS
// #home-page(100) + .blog(10)  = 110

.intro .blog p { color: blue; }
// two CLASS and one ELEMENT
// .intro(10) + .blog(10) + p(1) = 21

#home-page { color: orange;}
// one ID 
// #home-page (100) = 100

body div p { color: red;}       
// three elements  
// body(1)  + div(1) + p(1) = 3    

So the first rule gets the most specificity power, with 110 points making the text green colored.

Also, keep in mind that specificity is more powerful than cascading. However, if we have conflicting rules, with the same specificity then the result will be determined based on the cascading / order.

Example:

div p { color: green;}
// div (1) + p (1)  = 2

body p { color: blue; }
// body(1) + p (1)  = 2

// same specifity; the last rule wins
// paragraph is blue

What about the specificity of !important and inline styles

In normal circumstances, we should avoid as much as possible to use both !important and inline styles. But if we have to, keep in mind that inline styles count as 1000 points, and !important is even more powerful with 10.000 points.

So the full table of specificity points looks like this:

Alright friends, that's all for now! Have a fantastic day šŸ™‚

Defining names for lines in CSS grid

The CSS Grid uses lines to position the elements. By default, we can use line numbers to place the elements.

But if you find notations like .header { grid-column: 1 / 3; } confusing then we can define name for these lines.

The name defining is done in the grid-template-columns (and, if needed, in the grid-template-rows):

.container {
    display: grid;
    grid-template-columns: [article-start] 2fr [picture-start] 1fr [nav-start] 80px [nav-end];
}

So now we can say:

.header {
    grid-column: article-start / nav-start;
}
.article {
    grid-column: article-start/picture-start;
}
.picture {
    grid-column: picture-start / nav-start;
}
.navigation {
    grid-column: nav-start / nav-end;
}

Check out below the full working example.

See the Pen
Using names for CSS grid lines
by JS Craft (@js-craft)
on CodePen.

Defining multiple names for the same lines

But wait, there is more! We can define more that one name for a line.

It would be cool to define our article with something like article-start to article-end.

However, the article-end will be the starting point for the picture section. This means that we will then have to write for the picture: grid-row: article-end / nav-start; instead of an ideal grid-row: picture-start / picture-end;

In most cases, the ending point for something is the starting point for something else. So, therefore, the need to have multiple names for the same line.

We can implement this by just adding an extra name in the square brackets.

.container {
  grid-template-columns: 
      [article-start] 
      2fr 
      [article-end picture-start] 
      1fr 
      [picture-end nav-start] 
      80px 
      [nav-end];
}

So that we can now say:

.picture {
    grid-row: picture-start / picture-end;
}

Check out here the codepen with multiple names for the same lines. Cheers!

How and why to use the repeat function in CSS Grid

Let's say we have a layout made of 10 equal-width columns. Then the container element will look like this:

.container {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

It's a bit troublesome to write a line where you paste ten times the same 1fr. Imagine how fun it's to read this line. Luckily we have the repeat function for situations like this one.

.container {
    grid-template-columns: repeat(10, 1fr);
}

A big readability improvement. You tell the function how many times to repeat, and what to repeat.

If works for both the grid-template-columns and grid-template-rows.

We can give it also a pattern to repeat:

.container {
    grid-template-columns: repeat(3, 1fr 50px);
    // it will create 6 columns
    // 1fr 50px 1fr 50px 1fr 50px 
}

Using the CSS grid repeat function with named lines

And we can even use it with named lines.

.container {
    grid-template-columns: repeat(3, [col-start ] 1fr [col-end] );
    // it will create 3 columns
    // [cstart ] 1fr  [cend] [cstart ] 1fr  [cend]  [cstart ] 1fr  [cend] 
}

Given the fact that we will have the same name for the columns, we will need to a second parameter in the grid-column to indicate instance number of the name we want to place an element:

.my-element {
    grid-column: cstart 2 / cend 2;
}

Using the repeat function with auto-fill

But what if we want to have a layout where we want to have as many columns of 200px as they fit in the width of the container? Well, for this we can use the auto-fill:

.container {
    grid-template-columns: repeat( auto-fill , 200px );
    // it will  make as many 200px columns as possible 
    // eq: your screen is 1500px , it will make 7 columns
}

And that's all for now, folks! Have a fantastic day!

CSS Attribute selector – case insensitive option and select by multiple attributes

Some days ago I have written a short intro to the attribute selector in CSS. I have found out two new tricks for this selector that I want to share with you today.

Case-insensitive CSS attribute selectors

First, the attribute selector is case sensitive. This can be especially troublesome for the data- attributes.

Take for example the following set of tags:

<div data-status="OPEN">First widget</div>
<div data-status="open">Second widget</div>
<div data-status="open">Third widget</div>

Give the case sensitivity the following selector will target only the first div.

// will target only the first div
div[data-status="OPEN"] { color: red;} 

But, we have the i flag in the attribute selector. And with it, we can target tags no matter the capitalization.

// will target all the divs
div[data-status="OPEN" i] { color: red;} 

Pay atattion to the fact that the i flag will not work in IE.

CSS attribute selector for multiple tags

The second trick is the ability to target tags based on multiple attributes.

For example, if we want to target all the h1 tags that have both a rel="main subject" and a title="important note":

<h1 rel="main subject" title="important note">Multiple Attributes</h1>    

Then we can write

h1[rel="main subject"][title^="important note"] { 
    color: red; 
}

Learned this one from the excellent CSS Tricks article: The Skinny on CSS Attribute Selectors.

How to style empty cells – using :empty and empty-cells

There are cases when we don't have data for all the cells in a table. If you want an easy way to make these specific cells to stand out we can use the :empty pseudo-class selector.

See the Pen
Table with empty highlighted
by JS Craft (@js-craft)
on CodePen.

And we can even chain the :empty with the the :before pseudo-class and give the user more context about what the empty cells represent:

See the Pen
mdeVNQq
by JS Craft (@js-craft)
on CodePen.

Also, the table element has a special CSS property named, you guessed it, empty-cells.

See the Pen
Hide empty cells
by JS Craft (@js-craft)
on CodePen.

The downside with this empty-cells prop is that you can only hide the cels. So for better customization of the cells the :empty may be a better fit.

Have fun, and enjoy the simple things in CSS.

Javascript – using default values for function parameters and when destructuring

I still find myself writing code like the one below:

function myFunction(name) {
    if (typeof name !== 'undefined') {
            name = "unknown person";
    }
}

Even if with the ES6 default values for paramters the code can be made just into this:

function myFunction(name = "unknown person") {
    // code here
}

And we can have the default values even when using the destructuring statements.

Let's say that we have:

const myName = {
    first: "Js",
    last: "Craft",
};
const { prefix, first, last } = myName; 
console.log(prefix + " " + first + " " + last);
// will output: undefined Js Craft
// because prefix is not set in the myName obj

But, if we define default values for the destructed properties:

const myName = {
    first: "Js",
    last: "Craft",
};
const { prefix = "Mr", first, last } = myName; 
console.log(prefix + " " + first + " " + last);
// it will output: Mr Js Craft

So, keep calm and use default values!

The grid layout: the grid-column and grid-column properties are using line numbers

When placing elements in a CSS grid it's very important to remember that the grid is using the lines number to place the elements.

Take for example the following layout.

For the columns, we have 4 lines. So, for the footer element when we are declaring grid-column: 1/4 we are saying that the element starts from line 1 and ends at line 4.

The same is true also when using grid-column We are not referring to cells, but to the actual line numbers.

This was for me one of the aha moments when using the learning the grid layout.

Below you have the full code for this layout.

See the Pen
CSS Line Numbers
by JS Craft (@js-craft)
on CodePen.

And in the next post, we will see how we can even actually give names to both the columns and rows lines.

Making a responsive CSS grid layout with just 3 properties

What if I told you that you only need to know only 3 CSS properties to make a fully responsive CSS grid like the one below:

Let's start with the HTML layout. Just a container and the divs corresponding to the articles and header + footer:

<div class="container">
  <div class="header">Header</div>
  <div class="art first">Article 1</div>
  <div class="art second">Article 2</div>
  <div class="art third">Article 3</div>
  <div class="footer">Footer</div>
</div>

First, we will need to set up our container to grid and add a bit of gap between the cells :

.container {
  display: grid;
  grid-gap: 10px;
}

The most important part is made of defining the actual grid. If we would put this layout in an Excell table, it would look like this:

This can be translated into CSS by using the grid-template-areas property:

.container {
 grid-template-areas: 
    "h  h  h"
    "a1 a2 a3"
    "f  f  f"; 
  display: grid;
  grid-gap: 10px;
}

And now to place the HTML elements in the corresponding CSS grid cell we can use the grid-area prop:

.header { grid-area: h; }
.art.first { grid-area: a1; }
.art.second { grid-area: a2; }
.art.third { grid-area: a3; }
.footer { grid-area: f; } 

Making the CSS grid responsive

In order to make this one responsive, we can just change the table layout:

So a media query to and again grid-template-areas to the rescue.

@media only screen and (max-width: 600px) {
  .container {
    grid-template-areas: 
        "h"
        "a1"
        "a2"
        "a3"
        "f";
  }
}

We could have also used the display:block, but the idea is just to show how flexible and useful grid-template-areas can be to manage our layout configurations.

And that's all folks! Just 3 properties (grid-area, grid-gap and grid-template-areas ) to make a fully responsive CSS Grid layout.

You can see below the full working codepen for this example. Cheers!

See the Pen
Simple CSS Grid
by JS Craft (@js-craft)
on CodePen.

Fun games to learn CSS Grid and Flexbox

You may know that I like video games. Never been a gamer, but after all, I've started to code because of games.

I have discovered 3 funny games that aim to teach how to use the CSS Grid Layout and Flexbox.

The first two are focused on my favorite, the CSS Grid: cssgridgarden.com and gridcritters.com.

And the third one is aimed to flexbox, the flexboxfroggy.com.

The games can help a lot to teach and strengthen the basic concepts of CSS Grid and Flexbox. But, you will need to put them into practice. So get yourself a nice code editor and start messing around!

For example try to replicate the login page of sites like https://www.facebook.com/, https://www.instagram.com/. Or whatever site you like the most and it's simple enough to replicate.