Xerrada sobre nomenclatura i arquitectura css pels alumnes de l'institut del Bosc de la Coma d'Olot.

1. CSS
Sistemes de nomenclatura i d’arquitectura

2. Hello!
• Llicenciada en comunicació Audiovisual
• Màster en Project Manager (actualment)
• Fundadora de Femme Inline
• Dog and Yarn lover
CSS: sistemes de nomenclatura i d’arquitectura 2

3. Què és el CSS?
CSS: sistemes de nomenclatura i d’arquitectura 3

4. CSS: sistemes de nomenclatura i d’arquitectura
És la manera d’estilar webs amb
un llenguatge diferent al de
programació i separat d’aquest
4

5. CSS significa Cascading Style Sheets, és a
dir, fulles d’estil en cascada.
Una de les característiques del CSS és l’herència. Diem que el CSS té herencia
perquè les classes aplicades a elements HTML pares, afectarà als elements HTML
fills.
CSS: sistemes de nomenclatura i d’arquitectura 5
1995
CSS
1998
CSS2
2005
CSS3

6. NOMENCLATURA
CSS: sistemes de nomenclatura i d’arquitectura 6

7. BEM
Block Element Modifier.
CSS: sistemes de nomenclatura i d’arquitectura 7

8. Què és el BEM?
• Bloc: és un component de la interfície d’usuari. Pot ser modular, és a
dir, pot estar composat de diversos elements o inclòs altres blocs.
• Element: És part d’un bloc. Serveix per un propòsit i només tenen
significat dintre d’un context. Estan semànticament vinculats al seu
bloc.
• Modificadors: Classes utilitzades per modificar l’aparença o el
comportament d’un bloc o element.
CSS: sistemes de nomenclatura i d’arquitectura 8

9. ARQUITECTURA
CSS: sistemes de nomenclatura i d’arquitectura 9

10. OOCSS
Object Oriented CSS.
CSS: sistemes de nomenclatura i d’arquitectura 10

11. Què és l’OOCSS?
2 principis bàsics:
CSS: sistemes de nomenclatura i d’arquitectura 11
Separar l’estructura
del“Skin”
Separar el contingut
del contenidor.

12. SMACSS
Scalable and Modular Architecture for CSS.
CSS: sistemes de nomenclatura i d’arquitectura 12

13. Què conté el SMACSS?
• Base: regles bàsiques per elements, atributs, pseudoclassses. Un
exemple en podria ser el normalize.css
• Maquetació : regles que estan relacionades amb el disseny
estructural de les pàgines. Per exemple amb els contenidors.
• Mòduls: Són components reutilitzables i modulars.
• Estats: són regles d’estil que especifiquen l’estat actual de quelcom
mòduls o elements.
• Temes: Estils visuals. El que en OOCSSS serien els “skins” o “pells”. És
opcional, ja que dintre del SMACSS poden estar o integrats dintre del
mateix mòdul o separats en una fulla d’estil perquè l’usuari pugui
triar d’entre els temes.
CSS: sistemes de nomenclatura i d’arquitectura 13

14. ITCSS
Inverted Triangle CSS.
CSS: sistemes de nomenclatura i d’arquitectura 14

15. Què conté el ITCSS?
• Settings: És on situarem les variables
• Tools: Són mixins i funcions.
• Generic: El codi genèric i els resets o normalize anirien aquí.
• Element: Elements d’HTML.
• Object: Aquí incorporaríem les classes i tot allò relacionat amb el
layout.
• Components: Blocs del nostre web. Components a nivell de UI.
• Utilities: Classes que sobreescriuran estils significatius.
Your Date Here Your Footer Here 15

16. La pirámide invertida
…un sistema de capes
CSS: sistemes de nomenclatura i d’arquitectura 16

17. Gràcies!
Preguntes?
jud.abelli@gmail.com
JUDIT ABELLÍ
SENIOR FRONT-END DEVELOPER