My Web Page
Front end developer at Copter Labs
Everyone is learning
<header>, <footer>, <aside>
Instead of this...
My Web Page
Type this!
My Web Page
alt=""
My Web Page
Resource: developer.mozilla.org
This is a well.
Use IDs only for page anchors and Javascript listeners.
i love css
— ally palanzi (@mylifeasalllly) March 10, 2015
i hate css
i love css
i hate css
I don't hate CSS, I just hate other people's CSS.
— Chris Dhanaraj (@chrisdhanaraj) May 12, 2016
!important
Order of priority:
<div style="width: 400px;">
<div id="card">
<div class="card">
<div>
Hello world!
.red {
background-color: #ff6666; /* red */
}
.card {
background-color: #ccc; /* gray */
}
.card
) will apply.
Hello world!
.card p {
color: #008000; /* green */
}
.greeting {
color: #000; /* black */
}
.card p
will apply.
In cases of nested or mixed selectors, the browser makes a calculation, e.g. div.card p
vs p.greeting
. Can become complex very fast!
Specificity Calculator: specificity.keegan.st
!important
.red {
background-color: #ff6666 !important; /* red */
}
.card {
background-color: #ccc; /* gray */
}
.red
will apply.
!important
Muddles Specificity
.red {
background-color: #ff6666 !important; /* red */
}
.card {
background-color: #ccc; /* gray */
}
div {
background-color: #000033 !important; /* blue */
}
Code quality decreases and can cause confusion.
Avoid it when you can.
source: hongkiat.com
Things to consider:
.banner
, .listing
, .book-review
.card
vs red .card
.active
, .disabled
My Book Review
This book is awesome!
.review {
// ...
}
.review__title {
// ...
}
.review__content {
// ...
}
<button class="disabled">
instead of <button> class="gray">
...
This book is awesome!
- ...
.review-content {
// ...
}
.review-content__cover {
// ...
}
.review-content__list {
// ...
}
(Don't Repeat Yourself)
button.active {
color: #fff;
text-transform: uppercase;
background-color: #000033; /* blue */
border-radius: 5px;
}
button.disabled {
color: #fff;
text-transform: uppercase;
background-color: #ccc; /* gray */
border-radius: 5px;
}
Styles that apply to multiple states or components can be bundled into one class.
.button {
color: #fff;
text-transform: uppercase;
border-radius: 5px;
}
.button.active {
background-color: #000033; /* blue */
}
.button.disabled {
background-color: #ccc; /* gray */
}
.button.success {
background-color: #008000; /* green */
}
My Web Page
My Web Page
Hello there!
.navbar-default {
-webkit-transform: translateZ(0); /* Chrome scroll bug fix */
position: relative;
font-size: 1.1em;
}
"If I quit now, I will soon be back to where I started. And when I started I was desperately wishing to be where I am now." —Unknown
Slides: raiscake.me/talks/newbie-to-frontend
Twitter: @sweetraiscake