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)