BEST CSS🧡GUIDELINES BY Aryan🤣

Prefer CSS Variable

*.css

/*
css
*/
:root{
    /*
    available for all elements
    */
--black:#000;
--shade-one:#040;
}
.class{
    /*
    only availble for 'class'
    */
    --orange:#ff3300;
    bgc:var(--orange);
}

*.scss

/*
variable starts with $ sign
*/
$black:#000;
$orange:#ff3300;

Prefer Shorthand for big apps (consistency)

#id{
    padding:2px 2px 1px 1px;
    up left bottom right
    padding:2px 1px;
    /* up-down left-eight */
}

seperate name with hyphen and meaningful name

.body-header{

}
.body{

}

note: I sometime use parent-child hirerachy. If .cards is parent then try naming cards-child as child. And the .cards-child has child also then cards-grandchild and soon🤣.

Reset css

*{
    /* universal selector*/
    border-sizing:border-box;/* this will include margin and padding as width and height, 2px margin, 2px padding, 10px width makes 2px(content)*/
    font-weight:400; /*regular*/
}

element grouping

h1,h2,h3{
    margin:2px; /* margin of 2px (just repeating myself)*/
}

in-link🧡

learning resources

🧡Scaler - India's Leading E-learning
🧡w3schools - for web developers