API CSS
-
Upload
tomohiro-kasuga -
Category
Technology
-
view
424 -
download
0
description
Transcript of API CSS
![Page 1: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/1.jpg)
API CSS
![Page 2: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/2.jpg)
I canexplain
![Page 3: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/3.jpg)
Why CSS Sucks
for you.
![Page 4: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/4.jpg)
You are trapped by
![Page 5: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/5.jpg)
CSS dogma
![Page 6: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/6.jpg)
or
![Page 7: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/7.jpg)
You don’t know the
basic rules.
![Page 8: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/8.jpg)
Rule #1
![Page 9: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/9.jpg)
Cascading
![Page 10: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/10.jpg)
You know that.
![Page 11: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/11.jpg)
But, how to stop it?
![Page 12: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/12.jpg)
ul li {…}
![Page 13: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/13.jpg)
ul li {…} ul li li {…}
![Page 14: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/14.jpg)
ul li {…} ul li li {…} ul li li li {…}
![Page 15: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/15.jpg)
¯\_(ツ)_/¯
![Page 16: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/16.jpg)
Try this:
![Page 17: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/17.jpg)
ul > li {…}
![Page 18: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/18.jpg)
or
![Page 19: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/19.jpg)
Useclassed div
![Page 20: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/20.jpg)
.list-item {…}
![Page 21: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/21.jpg)
Trust me, It works.
![Page 22: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/22.jpg)
Rule #2
![Page 23: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/23.jpg)
Specificity
![Page 24: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/24.jpg)
What’s that?
![Page 25: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/25.jpg)
Forexample:
![Page 26: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/26.jpg)
<h1 class=“blue red pink”>
![Page 27: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/27.jpg)
Which color is applied?
![Page 28: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/28.jpg)
Pink?
![Page 29: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/29.jpg)
Maybe
![Page 30: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/30.jpg)
You can’ttell until
![Page 31: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/31.jpg)
you go to check the Specificity.
![Page 32: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/32.jpg)
.blue {color:blue}
.red {color:red}
.pink {color:pink}
![Page 33: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/33.jpg)
If so,
![Page 34: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/34.jpg)
h1
![Page 35: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/35.jpg)
.blue {color:blue} h1.red {color:red} .pink {color:pink}
![Page 36: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/36.jpg)
If so,
![Page 37: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/37.jpg)
h1
![Page 38: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/38.jpg)
Why?
![Page 39: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/39.jpg)
.blue {color:blue} h1.red {color:red} .pink {color:pink}
![Page 40: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/40.jpg)
h1.red {…}is more specific.
![Page 41: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/41.jpg)
Orderdoesn't matter.
![Page 42: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/42.jpg)
Unless
![Page 43: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/43.jpg)
Specificities are all equal,
![Page 44: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/44.jpg)
orderdo
matter.
![Page 45: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/45.jpg)
Take care ofSpecificity.
![Page 46: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/46.jpg)
Rule #3
![Page 47: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/47.jpg)
Browsersare not
all same.
![Page 48: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/48.jpg)
They are slightly
different.
![Page 49: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/49.jpg)
Use the normalize
css.
![Page 50: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/50.jpg)
http://necolas.github.io/
normalize.css
![Page 51: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/51.jpg)
If you know the basics,
![Page 52: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/52.jpg)
probablyyou heard
![Page 53: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/53.jpg)
the CSS dogma,
![Page 54: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/54.jpg)
Naming Convention.
![Page 55: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/55.jpg)
“Class name should bea semantic phrase …
![Page 56: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/56.jpg)
to prepare for modify the style in the future.”
![Page 57: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/57.jpg)
like this,
![Page 58: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/58.jpg)
.red {…}
![Page 59: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/59.jpg)
.red {…}
![Page 60: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/60.jpg)
.red {…} .caution {…}
![Page 61: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/61.jpg)
.caution {…}
![Page 62: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/62.jpg)
.caution {…}
more semantic
![Page 63: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/63.jpg)
Forget this.
![Page 64: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/64.jpg)
This idea is too old.
![Page 65: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/65.jpg)
and against the software
development approach.
![Page 66: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/66.jpg)
O.C.P.
![Page 67: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/67.jpg)
Open/Closed Principal
![Page 68: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/68.jpg)
“software entities should be open for
extension, …
![Page 69: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/69.jpg)
but closed for modification.”
![Page 70: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/70.jpg)
It’s true.
![Page 71: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/71.jpg)
Trust me. (again)
![Page 72: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/72.jpg)
You can't modify the existing
classes.
![Page 73: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/73.jpg)
You can’t.
![Page 74: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/74.jpg)
.caution {…}
![Page 75: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/75.jpg)
.caution {…}
![Page 76: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/76.jpg)
.caution {…} .color-red {…}
![Page 77: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/77.jpg)
.color-red {…}
![Page 78: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/78.jpg)
.color-red {…}
open for extension
closed for modification
![Page 79: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/79.jpg)
.extention-modifier {…}
![Page 80: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/80.jpg)
This is called
![Page 81: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/81.jpg)
API CSS
![Page 82: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/82.jpg)
Learn this.
![Page 83: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/83.jpg)
Your CSS sucks
![Page 84: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/84.jpg)
for more detail
![Page 86: API CSS](https://reader031.fdocuments.net/reader031/viewer/2022013101/559b66fc1a28ab3b3c8b47eb/html5/thumbnails/86.jpg)
Thank you.