CSS Best Practices and Advice for beginners

Use case presentation

Structure approaches

Framework

CSS / SCSS Best Practices

Best practices — Chapter 1: Browser Defaults

span.text {
display: block;
margin: 1em 0;
}

Best practices — Chapter 2: Scopes

p {
font-family: 'Roboto', sans-serif;
font-size: 18px;
font-weight: 400;
margin-bottom: 1em;
line-height: 16px;
}

CSS Version:

div#main p {
font-family: 'Roboto', sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 16px;
}

SCSS version:

div#main {
p {
font-family: 'Roboto', sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 16px;
}
}
div#main p {
font-family: 'Roboto', sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 16px;
}
div#main p.big-text {
font-family: 'Roboto', sans-serif;
font-size: 24px;
font-weight: bold;
line-height: 26px;
}
div#main {
p {
font-family: 'Roboto', sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 16px;
&.big-text {
font-family: 'Roboto', sans-serif;
font-size: 24px;
font-weight: bold;
line-height: 26px;
}
}
}
div#main p { 
font-family: 'Roboto', sans-serif;
}
div#main p:not(.big-text) {
font-size: 18px;
font-weight: 400;
line-height: 16px;
}
div#main p.big-text {
font-size: 24px;
font-weight: bold;
line-height: 26px;
}
div#main {
p {
font-family: 'Roboto', sans-serif;
&:not(.big-text) {
font-size: 18px;
font-weight: 400;
line-height: 16px;
}
&.big-text {
font-size: 24px;
font-weight: bold;
line-height: 26px;
}
}
}

Best practices — Chapter 3: Class Names

div.div-1 {
background: lightblue;
}
div.div-2 {
background: goldenrod;
}
.lightblue-background {
background: lightblue;
}
.goldenrod-background {
background: goldenrod;
}

Best practices — Chapter 4: Wrappers

<div class="header-wrapper"> <h1> HOMEPAGE </h1> </div>

Best practices — Chapter 5: Resets

* { 
margin: 0;
padding: 0;
}
* { 
box-sizing: border-box;
}

Best practices — Chapter 6: Selector Specificity

body > div#main > .container p.bold {
font-weight: bold;
}
.bold {
font-weight: bold;
}

Best practices — Chapter 7: Concatenate classes

<div class="d-flex justify-center align-items-center lightgray-background">
<p class="primary-color bold"> Hello world </p>
</div>
.d-flex { display: flex; }
.justify-center { justify-content: center; }
.align-items-center { align-items: center; }
.lightgray-background { background: lightgray; }
.primary-color { color: #4570DE; }
.bold{ font-weight: bold; }

Best practices — Chapter 8: Use SCSS

Best practices — Chapter 9: Divide et impera

Best practices — Chapter 10: CSS Methodologies

Footnotes

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store