How to Code Css Like Pro

There is a way to write perfect CSS code which is flexible and highly maintainable. Let's code CSS like a pro developer. Scratching Surface of How to write better

Published on

Wednesday, Jan 22, 2020

If you recently started designing website or just learnt HTML/CSS from Youtube or online course. You might wanted to learn more about the professional want to design the website. Before I start, let me give a brief about myself. My name is mukesh and I am playing with web technologies since I was in 8th standard(2008). I love making websites and learning new things. I also post awesome videos on youtube if you don’t mind please subscribe to my channel.

Code Used in Video

I know most of you came to this page just to check the CSS code so let’s have it first.

body,
html {
margin: 0;
--primary-color: rgb(24, 111, 226);
--accent-color: rgb(32, 154, 87);
--text-color: white;
font-size: 15px;
padding: 0;
}

.btn {
padding: 10px;
margin: 10px;
color: var(--text-color);
background: black;
text-decoration: none;
text-transform: uppercase;
display: block;
font-family: Arial, Helvetica, sans-serif;
}

.red {
background: var(--primary-color);
}

.blue {
background: var(--accent-color);
}

.pink {
background: pink;
}

.box {
font-size: 0.5rem;
}
.box p {
font-size: 2.4em;
padding: 8px;
line-height: 1.6;
}

p:not(.ignore) {
color: red;
}

Now lets have a look on HTML Code. Please watch the video first to understand how to code is structured :)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css" rel="stylesheet">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>How to write css like a pro</title>
</head>

<body>
    <a href="#" class="btn blue">Click here</a>
    <a href="#" class="btn red">Click here</a>
    <a href="#" class="btn pink">Click here</a>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id nisl lectus. </p>

    <div class="box">
        <span>Hello this is a span</span>
        <p>
            Vivamus quis mollis lectus. Sed sagittis iaculis arcu tincidunt hendrerit.
        </p>
        <p class="ignore">
            Vivamus quis mollis lectus. Sed sagittis iaculis arcu tincidunt hendrerit.
            odio.
        </p>
        <p>
            Vivamus quis mollis lectus. Sed sagittis iaculis arcu tincidunt hendrerit.
        </p>
    </div>

</body>

</html>

Topics I talked about in video

Now let’s talk about the topics I covered in the video. I am just mentioning the name here for better understanding please watch the whole video :)

DRY

The Very First Topic I talked about in the video is DRY. Which stands for “Don’t Repeat Yourself”. The concept is very clear. All you need to do is remove all the repeatitive code and make it more readable and understandable for all.

Cascading

We all know that CSS stands for Cascading Stylesheet, in other terms it is like Waterfall. the code which comes first will be applied first and can be overwritten by the code which comes after it. We should always structure out code in a way that the generic code comes first and the specific targeted classes and styles comes after that. By doing this way, you will have better code structure and better understanding of how things work. Watch the video to see it in action.

Priority

Even if you follow cascading, not all rules will be overwritten. the reason is simple, in css there is something called priority. You need to understand which has highest priority and which one doesn’t.

rem/em

You might have seen a lot of pro developers using rem or em for their sizes in their styles. Today I will teach you have it works. Basically the REM stands for Roentgen equivalent man or a value which is dependent on root value. where EM is for local targeting. when we use em, it take element’s direct parent’s size in consideration for size.

Pseudo Class

You might have used Pseudo classes in your websites but not all of them and in this video the :not() pseudo class which can help you while targeting elements in various way.

Final Words

I hope you find this tutorial and video helpful. If you liked it please make sure to subscribe to my channel also do not forget to share with your friends.

I am highly active on Instagram and TikTok so please make sure to follow me there as well :)