DEV Community

Cover image for BEST CSS🧡GUIDELINES BY Aryan🤣
aryan015
aryan015

Posted on

BEST CSS🧡GUIDELINES BY Aryan🤣

#css #scss #webdev #react

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);
}
Enter fullscreen mode Exit fullscreen mode

*.scss

/*
variable starts with $ sign
*/
$black:#000;
$orange:#ff3300;
Enter fullscreen mode Exit fullscreen mode

Prefer Shorthand for big apps (consistency) 

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

seperate name with hyphen and meaningful name 

.body-header{

}
.body{

}
Enter fullscreen mode Exit fullscreen mode

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*/
}
Enter fullscreen mode Exit fullscreen mode

element grouping 

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

in-link🧡

learning resources

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

Top comments (0)

Read next

lebbe profile image

GlobalErrorHandler: Catch the errors that falls through ErrorBoundary's fingers!

Lars-Erik Bruce -

sebastianrubina profile image

Setting up Supabase Auth with Nuxt v3

Sebastian Rubina -

sempare profile image

Functional templates with the Sempare Template Engine for Delphi

Sempare Limited -

elanatframework profile image

CodeBehind 3.7 Released

elanatframework -