PB138: Intoduction to CSS
Attribute ordering
Random
.module {
border: 1px solid #ccc;
width: 25%;
padding: 20px;
position: relative;
min-height: 100px;
z-index: 1;
border-radius: 20px;
}
.module {
border-radius: 20px;
border: 1px solid #ccc;
min-height: 100px;
padding: 20px;
position: relative;
width: 25%;
z-index: 1;
}
Alphabetical
.module {
width: 25%;
min-height: 100px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 20px;
position: relative;
z-index: 1;
}
Grouped by Type
Recommended ordering
- Positioning
- Box Model
- Typography
- Visual
- Animation
- Misc
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
/* Box Model */
/* Typography */
/* Visual */
/* Animation */
/* Misc */
}
.declaration-order {
/* Positioning */
/* Box Model */
display: block;
float: right;
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
/* Typography */
/* Visual */
/* Animation */
/* Misc */
}
.declaration-order {
/* Positioning */
/* Box Model */
/* Typography */
color: #888;
font: normal 16px Helvetica, sans-serif;
line-height: 1.3;
text-align: center;
/* Visual */
/* Animation */
/* Misc */
}
.declaration-order {
/* Positioning */
/* Box Model */
/* Typography */
/* Visual */
background-color: #eee;
border: 1px solid #888;
border-radius: 4px;
opacity: 1;
/* Animation */
transition: all 1s;
/* Misc */
user-select: none;
}
Class Naming: BEM
Block
Encapsulates a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy.
Block names: Latin letters, digits, and dashes.
Element
Parts of a block and have no standalone meaning. Any element is semantically tied to its block.
Element names may consist of Latin letters, digits, dashes and underscores. CSS class is formed as block name plus two underscores plus element name: .block__elem
Modifier
Flags on blocks or elements. Use them to change appearance, behavior or state.
Modifier names may consist of Latin letters, digits, dashes and underscores. CSS class is formed as block’s or element’s name plus two dashes:
.block--mod or .block__elem--mod
<form class="form form--theme-xmas form--simple">
<input class="form__input" type="text" />
<input
class="form__submit form__submit--disabled"
type="submit" />
</form>
Example
Layouting
1D - Flexbox
.container {
display: flex; /* or inline-flex */
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
2D - Grid
.item-a {
grid-area: header;
}
.item-b {
grid-area: main;
}
.item-c {
grid-area: sidebar;
}
.item-d {
grid-area: footer;
}
.container {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
PB138:
By Lukáš Grolig
PB138:
- 440