Spíše než na použití jednoho velkého souboru je lepší využít možnosti preprocesorů a rozdělit si různé části do menších (parciálních) stylopisů a ty pak importovat do jednoho, výsledného CSS souboru. V rámci této funkce lze bezproblémů importovat i klasické CSS soubory.
Pokud importujete klasické CSS soubory, každý tento import vytváří requesty. V dnešní době mobilů a tabletů je třeba vytvářet web, který má být nejen responsivní, ale musí se načítat také co nejménně různých souborů.
Momentální stav velkého počtu webů:
<link rel="stylesheet" href="/css/reset.css"> <link rel="stylesheet" href="/css/content.css"> <link rel="stylesheet" href="/css/layout.css"> <link rel="stylesheet" href="/css/screen.css" media=screen> <link rel="stylesheet" href="/css/fancybox/jquery.fancybox.css" media=screen> <link rel="stylesheet" href="/css/print.css" media=print> <script src="/js/jquery.js"></script> <script src="/js/jquery.autocomplete.js"></script> <script src="/js/fancybox/jquery.fancybox.js"></script> <script src="/js/tooltips/jquery.tooltips.js"></script> <script src="/js/jquery.scrollspy.js"></script> <script src="/js/main.js"></script>
Každý vývojář chce dosáhnout, jednoho CSS souboru a jednoho JS souboru.
<head><link rel="stylesheet" href="/css/combined.css"></head> <body> ... <script src="/js/combined.js"></script> </body>
Javascript soubory je lepší vkládat až na konec webu, nemusí se poté načítat na začátku webu a umožníme prohlížeči načtěčtění nejdříve webu a stylu a pak až v pozadí javascripty.
Takto vypadá hlavní LESS soubor, tohoto webu, který jako jediný se lokálně kompiluje do výsledného CSS souboru main.css. CSS soubor se minifikuje a odstraní se veškeré komentáře.
// Reset @import "reset.less"; // Promenne @import "promenne.less"; // Typo @import "typografie.less"; // Layout @import "layout.less"; // Mixiny @import "mixiny.less"; // Sidebar @import "sidebar.less"; // Navigace @import "navigace.less"; // Content @import "content.less";
V zdrojovém kódu, v hlavičce pak můžete vidět právě jeden main.css soubor.
Pokračujte na další kapitolu