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)*/
}
This content originally appeared on DEV Community and was authored by aryan015