المحاور الرئيسية لبناء موقع جيد
Responsive
Design
Fluid Layout
media queires
responsive images
fixed and relative units
mobile or desktop first
DRY
and CLEAN
code
clean
easy to read
reusable & growth
name classes (bem)
organise files
Web
Performance
less HTTP requests
less code
compress code
use css preprocessor
less images
compress images
UI
Friendly
Pixel Perfect
color palettes
think like user
Make it acessable
make it Easy
ماذا يحدث عند تحميل صفحة انترنت ؟
load HTML
Parse HTML
Document Object
Model (DOM)
Load CSS
Parse CSS
CSS Object
Model (CSSOM)
Render Tree
Website Rendering
(visual formatting model)
Final Rendered Website
CSS Terms
Property
value
Declaration block
التعريف
selector
.class-name {
color: red;
font-size: 20px;
}
CSS Parsing
1 - Resolve confilicting css declaration (cascade)
2- Procss final css values
1 - Resolve confilicting css declaration (cascade)
○ Author Declaration
○ User Declaration
CASCADE
The cascade is an algorithm that defines how to combine property values originating from different sources.
https://developer.mozilla.org/
1- importance الأهمية
2- specificity التخصيص والتحديد
3- Source Order ترتيب المصادر
○ Browser Declaration
1 - Resolve confilicting css declaration (cascade)
importance
○ !important
○ User Declaration
○ Browser Declaration
○ Author Declaration
1. inline style
2. IDs
3. Classes
4. Elements
3- <link href="style-1.css" />
2- <style> ..... </style>
1- <link href="style-2.css" />
Specificity
Source Order
Responsive Web Design
Fluid Grids & Layouts
1
Flexible & Responsive Images
2
Media Queries
3
1 - Fluid Grids & Layouts
Desktop
Tablet
Mobile
1 - Fluid Grids & Layouts
1 - Fluid Grids & Layouts
FLOAT
FLEXBOX
CSS GRID
2 - Flexible & Responsive Images
○ use % not px
○ compress images
3 - Media Queries
style for mobile
@media ( max-width: 500px ) {
body {
background-color: red;
}
}
BEM
BEM
Block
Element
Modifier
BEM
Block
class="card"
Element
class="card__img"
Element
class="card__body"
Element
class="card__title"
Element
class="card__text"
Element
class="card__btn"
class="btn"
Block
Modifier
class="btn--primary"
Modifier
class="btn--rounded"
Html & Css Behind the Scene
By Hossam Mo
