257 reads

What You Don't Know About CSS

by EmilioContreras97May 3rd, 2020

Too Long; Didn't Read

CSS could help you to get some features you might think is possible only with other tools or programming languages. The use of variables on your CSS code is important when you have a theme for your web page, and you are constantly applying the same values in different selectors or screen sizes. Without CSS, the world of web development wouldn't be the same. The importance of CSS goes beyond every knowledge or every thought people could have of it, and if you start getting into the darkest territories of this language, you will find out that CSS is essential.

Companies Mentioned

featured image - What You Don't Know About CSS

Since I've been learning CSS, I have met a lot of programmers saying or claiming that CSS is not a hard language or it is not a programming language. However it is or not, it's clear that without CSS, the world of web development wouldn't be the same. Thus, some people could think this language could be learned from one day to another, or it is not interesting at all. This language has a very easy to understand format, so every person who sits in front of a screen and see this

is going to understand at least the fundamental aspects of the code, like color, background-color, and font-size. This language uses a lot of words that people use constantly. Nonetheless, the importance of CSS goes beyond every knowledge or every thought people could have of it, and if you start getting into the darkest territories of this language, you will find out that CSS could help you to get some features you might think is possible only with other tools or programming languages.

The image above isn't a painting or a digital illustration, it's been made by Diana Smith using pure and only CSS. Believe it or not.

Variables.

In the first level of this dark and thrilling territory, you could find, and most of you would know, you can declare variables on the CSS code, but why would you like to understand this and what could you do with it. Well, let me show you an example.

The use of variables on your CSS code is important when you have a theme for your web page, and you are constantly applying the same values in different selectors or screen sizes. You could find a nice example on this Codepen. Try to change your screen size and notice what happens.

To declare a global variable is common to use the :root selector.

:root {
  --background: #888;
}

After declaring your global variable, you could use it every time you would want, using the follow function var(--variable).

:root {
  --background: #888;
}

div {
  background-color: var(--background);
}

/* the code above is equal to */
div {
  background-color: #888;
}

If you rather using one variable in a certain selector you can define the variable with two dashes (--) inside the selector as it is shown in the next code

div {
 --background: #888;
 backgorund-color: var(--background);
}

As you have seen in the past code examples, every time you would like to call the variable you should use the follow function var(--variable); but in case you haven't declared a value for the variable, you could use a second parameter to apply.

div {
  --background: ;
  background-color: var(--background, blue);
}

The use of variables when you are developing sometimes is essential and is going to help you to keep your code DRY, especially when you are working on responsive designs and you are using the same properties all along your CSS code.

Cycles .

When you read cycles probably the first thought you would have is the code property you use if you want to run the same code over and over again, each time with a different value. Look at the next example and think if there is any way to make it without using JavaScript or any other language but CSS.

After reviewing the code, you might think it is very easy to make using only CSS and HTML; but let me tell you the main point of this Codepen is that you can define the yellow containers iterating them with CSS. If you open the CSS code, at the end of it you will find

.item:nth-last-of-type(2) {
  background: yellow;
}

the page content is declared as a grid, and each container in the grid is declared with a .item class. With a pseudo-selector

:nth-child

:nth-last-of-type

you evaluate the condition of all the containers with a

background: yellow

. Having said that, we can start playing with the number of yellow containers and its position, so if we write this

:nth-last-of-type(3n)

instead of

:nth-last-of-type(2)

and we look for the code displayed, we are going to find out that the number of yellow containers changed as its position. Now, as you can see, we can find a yellow container every 3 containers with no background-color. Keep in mind, that we are not counting the article containers with border colors of red and blue.

Let see how it's displayed with different values and pseudo-selectors:

.item:nth-child(3n) {
  background: yellow;
}

.item:nth-last-of-type(6n + 2) {
  background: yellow;
}

Now you know that CSS gives you the chance to iterate some properties. Obviously, you will have a way more opportunities if you use JavaScript or any other programming language, but this CSS property could help to create really nice animations and designs.

Counter Reset

This content has been created with pure CSS only. Some of you would thing this is not possible, and you need to use JavaScript. Take a look in the Codepen HTML and JavaScript code editors, and see what's there: NOTHING! That's right, with pure CSS you can make a counter using the property

counter-reset

The value for the counter reset starts with the name you want to give to the counter, in this case the name of the counter is "contador"

counter-reset: contador

and then, you have to give it a starting number, in this case: 100

counter-reset: contador 100;

body {
  counter-reset: contador 100;
  animation: contar 30s forwards alternate infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  
  &::after {
    content: counter(contador);
    font-size: 16em;
  }
  
}

The next part of the code starts animating the counter with a

@keyframe

rule, which has to have an animation name ("contar").

@keyframes contar {
  @for $i from 100 through 1 {
    #{$i}% {
      counter-increment: contador #{-$i};
      background: hsl($i * 3.6,100,40);
      color: #fff;
    }
  }
}

From here we are going to give it a property named

counter-increment

which has to start with the name of the counter given and the counter instruction of start decreasing the counter one by one declared using the next code

#{-$i}

As you can see, create animating counters is very straight forward. This is one of my favorites CSS properties and it was a surprise for me when I learned it.So far, we have reviewed three CSS properties that some new developers might don't know, and I'm sure there's a lot undiscovered possibilities out there waiting for us to learn them from the most darkest and thrilling levels of the CSS world. Once you start exploring the deepest areas of CSS, you can't start and then, you will find out there's infinite possibilities to be creative and could improve your web developing skills.This article has been made by me, inspired by an Edteam conference.I want to thank you for taking your time to read this article. Here is my Github profile, feel free to give your feedback. Emilio Contreras.

L O A D I N G
. . . comments & more!