css in 1 pagina of verschillende

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

David M

David M

15/09/2012 16:28:11
Quote Anchor link
Wat is beter (of lees sneller)

Als ik 1 hele lange css maak of opdelen in meerdere css pagina's ?

alvast bedankt groet,

David
 
PHP hulp

PHP hulp

05/11/2024 20:46:21
 
Wouter J

Wouter J

15/09/2012 17:05:49
Quote Anchor link
1 hele lange CSS is sneller voor de pagina aanvraag. Je hoeft dan namelijk maar 1 bestand (en dus 1 HTTP request) te gebruiken om de CSS te laden. Bij meerdere pagina's heb je meerdere HTTP requests nodig, wat je pagina langzamer maakt.

Bij het onderhouden van de CSS is meerdere pagina's makkelijker. Vandaar dat ik aanraad SASS, LESS of Stylus (allemaal css preprocessors) te gebruiken. Die zorgen ervoor dat je meerdere SASS bestanden samenvoegt tot 1 CSS bestand die je browser kan uitlezen. Ook geven ze veel meer extra's zoals variabelen, functies en meer.
 
David M

David M

15/09/2012 17:07:01
Quote Anchor link
Dank Wouter!
 
Frank WD

Frank WD

15/09/2012 17:10:18
Quote Anchor link
Daar zijn verschillende manieren voor. Ook kiest iedereen voor een andere manier.

Heb hier even over na gedacht voor je wat een oplossing zou kunnen zijn.
- Je zij een swits kunnen maken waarmee je met een $_GET de pagina uitleest waar je op zit. Hier mee kun je dan de gewenste css inladen. Want een css voor een nieuws pagina heb je niet nodig op een gastenboek of contact pagina.
- Wat ik veel al gebruik is met een import verschillende css inladen in 1 hooft css file.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
@import url('nav.css');        /* Importeren van de Navigatie Style */
@import url('fonts.css');     /* Importeren van de Fonts Style */
@import url('border.css');    /* Importeren van de Border Afhandelingen Style */

// Hier rest van je standaard opmaak. Denk hier aan header, footer en main content opmaak.

Deze manier zorg je er voor dat je de verschillende onderdelen in groepen zijn verdeelt en daardoor altijd makkelijk en snel een style kunt veranderen.

Na deel van 1 lange css file vind ik altijd het door zoeken na de code die je moet hebben. Stel je hebt 100,000 regels css code en je moet daar 1 regel in opzoeken die bij je navigatie hoort.

Dit zijn natuurlijk persoonlijke programmeer manieren. Welke nu uit eindelijk snelle is dan een andere, kan ik je op moment niet uitleggen. Dit ivm ik het nog nooit heb getest.

EDIT:
Wouter was me voor met zoals altijd ook een goede uitleg.
Gewijzigd op 15/09/2012 17:12:55 door Frank WD
 
Wouter J

Wouter J

15/09/2012 17:39:28
Quote Anchor link
Frank, import is gelijk aan meerdere link[rel=stylesheet] elementen. Ze zorgen allemaal voor meer Http Requests, een preprosessor is echt het best omdat je dan de stylesheet in productie mode kan minifïen en in dev. mode gewoon 10 tallen verschillende bestanden hebt.

Voor een site die ik pas gemaakt hebt heb ik bijv. deze structuur in mijn CSS styles:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
common/
    cookie-consent.scss
    grid.scss
    print.scss
    reset.scss
content/
    article.scss
    buttons.scss
    content.scss
    disqus.scss
    expandify.scss
    form.scss
    recent.scss
    sidebar.scss
    slider.scss
footer/
    footer.scss
    social-media.scss
header/
    header.scss
    nav.scss
responsive/
    810.scss
    978.scss
style.scss

Alles is dus erg verspreid. Vervolgens preprosses ik dit met SASS (vandaar de SCSS bestanden) en die maakt er 1 style.css van die ook nog eens helemaal gecompressed is.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.