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

shieldstring profile image

Vite + React app MIME error when reloading the page

Agbo, Daniel Onuoha -

keploy profile image

JSON Diff: Comparing JSON Data Effectively

keploy -

chintanonweb profile image

10 TypeScript Secrets to Boost Your Development Expertise

chintanonweb -

keploy profile image

SOAP vs REST API: Understanding the Differences

keploy -