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-typebackground: yellow:nth-last-of-type(3n):nth-last-of-type(2)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-resetThe 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: contadorcounter-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@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#{-$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.