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

/…


This content originally appeared on DEV Community and was authored by aryan015

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


This content originally appeared on DEV Community and was authored by aryan015


Print Share Comment Cite Upload Translate Updates
APA

aryan015 | Sciencx (2024-06-23T06:13:21+00:00) BEST CSS🧡GUIDELINES BY Aryan🤣. Retrieved from https://www.scien.cx/2024/06/23/best-css%f0%9f%a7%a1guidelines-by-aryan%f0%9f%a4%a3/

MLA
" » BEST CSS🧡GUIDELINES BY Aryan🤣." aryan015 | Sciencx - Sunday June 23, 2024, https://www.scien.cx/2024/06/23/best-css%f0%9f%a7%a1guidelines-by-aryan%f0%9f%a4%a3/
HARVARD
aryan015 | Sciencx Sunday June 23, 2024 » BEST CSS🧡GUIDELINES BY Aryan🤣., viewed ,<https://www.scien.cx/2024/06/23/best-css%f0%9f%a7%a1guidelines-by-aryan%f0%9f%a4%a3/>
VANCOUVER
aryan015 | Sciencx - » BEST CSS🧡GUIDELINES BY Aryan🤣. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/06/23/best-css%f0%9f%a7%a1guidelines-by-aryan%f0%9f%a4%a3/
CHICAGO
" » BEST CSS🧡GUIDELINES BY Aryan🤣." aryan015 | Sciencx - Accessed . https://www.scien.cx/2024/06/23/best-css%f0%9f%a7%a1guidelines-by-aryan%f0%9f%a4%a3/
IEEE
" » BEST CSS🧡GUIDELINES BY Aryan🤣." aryan015 | Sciencx [Online]. Available: https://www.scien.cx/2024/06/23/best-css%f0%9f%a7%a1guidelines-by-aryan%f0%9f%a4%a3/. [Accessed: ]
rf:citation
» BEST CSS🧡GUIDELINES BY Aryan🤣 | aryan015 | Sciencx | https://www.scien.cx/2024/06/23/best-css%f0%9f%a7%a1guidelines-by-aryan%f0%9f%a4%a3/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts