Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

CSS

No description
by

Anna Könberg

on 12 November 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of CSS

hur
minifiering och concatinering
modularisering
allmänt
CSS
vad
var
riktning
CSS3
CSS arkitektur
gamla
ny-gamla
nya
https://itwiki.ppm.nu/wiki/En_sidans_typiska_best%C3%A5ndsdelar
https://itwiki.ppm.nu/wiki/Komponenter

http://w3annkon3u.ppm.nu/elementsOfAPage.html
http://w3annkon3u.ppm.nu/cssComponents.html

orange kuvert
varför
chimer
orange-kuvert
face-lift
sign-service
multiple-page-wizard
pin-event
Byggs på byggservern – ej incheckat
Beroende via pom:en
De nya flödena ska inte vara beroende av gamla css:er

Cascading Style Sheets
Indentera koden
Precis som med annan programkod så vill vi att vår CSS-kod är:
Ändra komponenter utifrån vem deras föräldrar är
Alltför komplicerade Selektorer
Alltför generalla klassnamn
Att en regel göra för mycket
Vara avsiktlig
Orsak
Separera dina saker
Namnområden för dina klasser
Utöka klasser med modifieringsklasser
Organisera CSS:en i en logisk struktur
Använd klasser för styling och enbart styling
Namnge dina klasser enligt en logisk struktur
Vanliga Bad Practices
Best Practices
Målen
förutsägbar
Lösning
CSS inkludera så lite HTML-struktur som möjligt.
selector {
property: value;
property: value;
}
header
.wizard
#knapp
border-radius
gradient
transform

små-bokstäver-och-bindestreck
Ingen inline style (eller js?!)
em och %
Färre bilder, hellre css
Valid/era css
För mycket style-börda på CSS
styling
layout/position
bas
layout
moduler
http://www.sitepoint.com/architecture-sass-project/
ge alla icke-style klasser ett prefix
"js-..."
mer...
SCSS
när använda mixin, @extend, %placeholder, variabler
CSS Lint
Granskning
GUI-test
Hur får vi det förvaltningsbart?
Praktiskt:
byggs när man bygger sirius
filewatcher
compass compile
krångligt - jsp på ett ställe
- css på ett annat
http://psysbob3u.ppm.nu:8080/view/Intern%20o%20Extern%20Info/view/web-commons/job/web-commons-web-scss-trunk/
http://psysbob3u.ppm.nu:8080/view/Intern%20o%20Extern%20Info/view/sirius/job/sirius-externalweb-rpm-trunk/
http://psysbob3u.ppm.nu:8080/view/Intern%20o%20Extern%20Info/view/sirius/job/sirius-sass-generation-trunk/
CSS definierar hur dina komponenter ser ut…
…och HTML knyter dessa dessa utseenden till elementen på sidan.
återanvändbar
underhållsbar
skalbar
BTV, preliminär beräkning, GUIKomponenter
ÅP, BT, BTA, ÅPA
De nya flödena hänger ihop – medvetenhet bland utv och test.
Inte göra de befintliga sämre
Jobba igenom det nyaste så att det följer det vi ska gå igenom
Clean CSS Code - "The Boy Scout Rule"
"Always leave the campground cleaner than you found it."
CSS ska definiera hur en uppsättning visuella element ser ut, oavsett var de visas i HTML (för att minimera koppling med HTML).
Om en viss komponent måste se annorlunda på ett annat ställe, ska den kallas något annat och det är HTML ansvar att kalla det så.
Full transcript