Concepts of CSS — Part 1

📄 Table of contents

◉ CSS is case-INsensitive

◉ Top vs margin-top

◉ Precedence in CSS (When Order of CSS Matters)

.a { color: red; }
.b { color: blue; }
<div class=”a b”>Here’s some text</div><div class=”b a”>Here’s some text</div>. # switched the order of the classes

◉ .a.b vs .a .b

<div class="a b"> </div>
<div class="a">
<div class="b"> </div>
</div>
OR<div class="a">
<div class="c">
<div class="b"> </div>
</div>
</div>

◉ visibility:hidden vs display:none vs opacity:0

+--------------------+----------------+-----------------+
| Property | occupies space | consumes clicks |
+--------------------+----------------+-----------------+
| opacity: 0 | ✓ | ✓ |
+--------------------+----------------+-----------------+
| visibility: hidden | ✓ | ✗ |
+--------------------+----------------+-----------------+
| display: none | ✗ | ✗ |
+--------------------+----------------+-----------------+
✓: yes
✗: no

CSS Units Best Practices

16px === 100% === 1rem;10px === 62.5% ===1rem;

Borders

Padding and margin

.Component {
margin: 1rem 0;
padding: 1rem;
}

Media queries

@media (min-width: 20em) {
.Component {
background-color: blue;
}
}

◉ Box-Model

🔘 box-sizing Property

{ box-sizing: border-box; }

overflow

overflow: auto

◉ Positioning elements with pure CSS

🔘 CSS Position & Helper Properties

1. Static

2. Relative

3. Absolute

4. Fixed

<div class="parent">
<div class="child">
<div class="grandchild"></div>
</div>
</div>

◉ CSS Grid Layout Module

.grid-container 
{
display: grid;
display: inline-grid;
grid-template-columns: 80px 200px auto 40px;
grid-template-rows: 80px 200px auto 40px;
grid-column-gap
grid-row-gap
grid-gap
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
justify-content: space-evenly;
align-content: end;
}

◉ Bootstrap 3 Grid System (from Twitter)

is <h1>, <span> valid inside <ul> ?

◉ normalisation over reset

◉ Responsive over Adaptive

<meta name=”viewport” content=”width=device-width, initial-scale=1">
Responsive on top, Adaptive on bottom

◉ PWA vs AMP (accelerated Mobile pages)

◉ transition vs animation

◉ flex-box vs grid layout

◉ Critical Rendering Path (CRP)

◉ Below CSS tips aren’t mind blowing, but they are good to know!

.container {
width: 100vw;
height: 100vh;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.container { 
border: 1px solid gray;
}
.container .row:not(:last-child) {
border-bottom: 1px solid gray;
}
.row:hover:not(.active-class) {
background: gray;
}
p::first-letter {
text-transform: capitalize;
}
.right-arrow {
transform: rotateY(180deg);
}

Centre Align horizontally + vertically child <span> inside parent <div>

DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
div {
height: 100vh;
line-height: 100vh;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}

Centre Align horizontally + vertically child <div> inside parent <div>

fixed width container vs full width container
width (max-width) will change on different screen sizes:

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.