A little bit about CSS

Annika Rytkonen
Nov 8 · 3 min read
source: Unsplash
source: Unsplash
source: Unsplash

Hello there, I haven’t been updating for a few days and that’s because I’ve taken a step backward since I finished my advanced JavaScript section. I felt like I am missing something and I looked at the overall picture to find out what it is.

The answer is of course CSS and to be honest I hate CSS. I remember writing it the first time, felt like it’s so easy and fun but the reality is different. CSS can be tricky and frustrating if you want to be good at it.

But I decided that I’m going to take my CSS skills to the next level. So I started another course for advanced CSS (again in Udemy) and so far I’m really satisfied with it. I have a good visual eye and I love to make beautiful looking websites.

So looking at the CSS code I have written so far, things that come to my mind that are important in CSS are the overall structure and usage of space, create and maintain easy to read and reasonable code, make sure that the code is responsive and is performing well.

What I am talking about here? Well, first of all, the actual code and the CSS files should be easy to read and placed in a logical order because CSS always runs from top to bottom. If you have a massive project, its probably the best idea to divide the code into multiple files, one for each topic. There shouldn’t be any extra space and one really good way to this is writing shorthand code.

for example:

animation-name: moveInRight;

animation-duration: 1s;

animation-timing-function: ease-out;

shorthand way:

animation: moveInRight 1s ease-out;

The code should be also easy to maintain. It’s good practice to write reusable code so you can use it again in another project and you don’t have to write the same code again, this saves you time and energy.

Not to forget the most important thing, the responsive design. When writing code, you should always remember to think if the output is showing the same way it’s expected in any platform.

So these are the main things, that I keep in my mind when I’m writing CSS. Another thing is to look deeper into CSS styles and what they do. New things that I have learned, for example, is pseudo-class and after pseudo-class. A CSS pseudo-class is a keyword added to a selector, that specifies a special state of element or elements.

for example:

.btn:active {}

In the example above :active is pseudo-class, that is representing the state of a button, that has been activated by the user and this usually happens when the user has clicked the button.

.btn::after {}

This is an example of ::after class. As the name suggests, this state is executed after any other pseudo-classes.

Other things that I have went trough are specificity, value processing, and inheritance, but I’m not going to talk about those for now. Instead, I can link you again here some of my favorite recourses, that I find useful when writing CSS. This was a really brief overview of my studies, sorry for that, next time I will write more :). Thank you for reading.

Annika Rytkonen

Written by

​Studying Web Development. Trying to improve myself every day. Like Steve Jobs said “Stay hungry. Stay foolish.”

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade