Wie man mit der CSS-Organisation umgeht

Wenn Sie Shell-Zugriff auf einen Apache-Server haben, ist Google Mod Pagespeed eine großartige Möglichkeit, dies automatisch auf Serverebene zu tun. Es hat wirklich mächtige Möglichkeiten, viel mehr zu tun, als nur CSS zu kombinieren und Ihre Seiten zu beschleunigen.

mod_pagespeed

mod_pagespeed beschleunigt Ihre Website und reduziert die Ladezeit von Seiten. Dieses Open-Source-Apache-HTTP-Servermodul wendet die Best Practices für die Webleistung automatisch auf Seiten und zugehörige Assets (CSS, JavaScript, Bilder) an, ohne dass Sie Ihren vorhandenen Inhalt oder Workflow ändern müssen.

Mehrere Konstanten werden verwendet, um das Laden, Verketten und Komprimieren von Skripten und CSS zu verwalten:

define('SCRIPT_DEBUG', true); lädt die Development (nicht-minified) Versionen aller Skripte und CSS und deaktiviert Komprimierung und Verkettung,

define('CONCATENATE_SCRIPTS', false); deaktiviert Komprimierung und Verkettung von Skripten und CSS,

define('COMPRESS_SCRIPTS', false); deaktiviert die Komprimierung von Skripten,

define('COMPRESS_CSS', false); deaktiviert die Komprimierung von CSS,

define('ENFORCE_GZIP', true); zwingt gzip zur Komprimierung (Standard ist deflate).

Ist das die Antwort, nach der Sie suchen? WordPress hat eine eingebaute Konfrontation von Skripten und CSS. Aber du musst es selbst aktivieren mit define( 'CONCATENATE_SCRIPTS', true ); . Es scheint, dass der Großteil des Blogbesitzers das nicht weiß oder sich einfach nicht darum kümmert.

Ich stimme Ihnen zu, dass einige der Einschränkungen, die Sie auf einer Website mit dem Titel “WordPress Answers” nicht beantworten können, ein bisschen lächerlich sind. Abgesehen davon werde ich Ihnen tatsächlich eine Antwort geben, anstatt den Punkt zu diskutieren.

1. Manchmal haben wir CSS, das nur für eine einzelne Seite benötigt wird. Dies ist oft der Fall bei Kontaktformularen oder Archivseiten. Um dies zu handhaben, können wir einige der hier gefundenen Antworten einbinden: http://wordpress.org/support/topic/different-css-on-one-page Diese Art von Lösung verhindert, dass Sie unnötiges CSS auf Seiten laden, die dies nicht tun brauche es, sehr hilfreich.
2. Viele Theme-Entwickler werden ihr CSS in einem einzigen Stylesheet ablegen, aber das ist nicht immer der Fall. Ich schlage vor, CSS für Dinge wie Plugins oder Optionsfelder intern in den Dateien Ihres Themes aufzurufen, anstatt sie im Stylesheet für einen potenziellen Anfänger zu verwenden.
3. Wenn Sie das CSS komprimieren möchten, können Sie beliebig viele kostenlose CSS-Komprimierer verwenden. Eine, die ich benutze ist Stylenat: http://www.stylenat.com/
4. Ich persönlich finde es ziemlich sinnlos, das erwähnte Plugin zu verwenden. Es braucht nicht viel, um das passende CSS in das entsprechende Stylesheet zu verschieben.

Ich bin ein großer Fan von CodeKit: http://incident57.com/codekit/

Ich arbeite mit LESS , also organisiere ich meine CSS in mehrere .less-Dateien: reset.less, webfonts.less, forms.less, style.less usw. Jedes Mal, wenn ich eine Änderung an meinem lokalen Computer an einer dieser Dateien vornimmt, CodeKit kompiliert das Ganze automatisch zur style.css. Auf diese Weise ist mein Code gut organisiert, aber die Seite muss nur ein einziges, komprimiertes Stylesheet laden.

Ich benutze Sass und Compass , die neben der CSS-Kombination und -Komprimierung zahlreiche Vorteile bieten. WENIGER ist eine andere großartige Option, wie von @Dalton oben erwähnt. Es ist nicht notwendig, CodeKit zu kaufen, um Sass oder LESS zu verwenden (obwohl es eine großartige App ist), da beide Open-Source-Programme sind.