html und css trennen?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
arbeiten
aussehen
beispiel
bild
code
dank
datei
design
empfehlen
erstellen
fehler
gestalten
hilfe
http
leute
liegen
mache
trennen
url
vorteil
-
Hallo Leute
Soll man die css-Datei von der html-Datei trennen oder soll man sie in einer Datei zusammenfassen? Ich finde es fast besser sie nicht zu trennen, da man so jede Seite anders gestalten kann ohne viele css-Dateien zu erstellen. Der Nachteil ist, das die Datei unübersichtlicher wird. Was haltet Ihr davon? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
elekdstj schrieb:
Soll man die css-Datei von der html-Datei trennen oder soll man sie in einer Datei zusammenfassen?
Auf jeden Fall die Grund Ich finde es fast besser sie nicht zu trennen, da man so jede Seite anders gestalten kann ohne viele css-Dateien zu erstellen. Der Nachteil ist, das die Datei unübersichtlicher wird. Was haltet Ihr davon?
Wer will denn jede Seite anders gestaltet haben? Sowas gab's in den 90er Jahren zur Zeit von blinkendem Text, Midi-Hintergrundmusik und zig animierten Bildern.
Für alle gemeinsam genutzten Anweisung macht natürlich eine eigene CSS-Datei Sinn. Neben der einfachen Änderung hast du natürlich noch den Vorteil dass die Datei nur einmal geladen werden muss und dadurch die Seite für den User auch schneller geladen wird.
CSS kannst du btw nicht nur über CSS-Dateien einbinden sondern theoretisch auch die Anweisungen direkt in das "style"-Attribut rein packen um einzelne Elemente anders zu gestalten.
Beitrag zuletzt geändert: 24.1.2017 7:40:45 von muellerlukas -
Wenn man jede Seite etwas anders gestaltet haben möchte gibt es da auch noch eine Möglichkeit.
Man nehme eine PHP Datei für das CSS und kann dann schön mit Variablen arbeiten. Solch einen Trick habe ich schon bei einigen Erweiterungen, die als Open Source veröffentlicht wurden, angewendet. Da habe ich dann das CSS je nach Einstellung mit Werten aus der Datenbank befüllt.
Man muss in der Datei dann nur den richtigen Header setzen. -
Wenn du die Möglichkeit mit php zu kompliziert findest, könntest du auch einfach eine Grund-css schreiben die jedes mal eingebunden wird, und für jede einzelne Seite die css mittels style tags erweitern bzw abändern.
-
Ist die Variante mit PHP nicht viel aufwendiger als eine normale css-Datei zu erstellen?
-
Es kommt halt drauf an wie genau ehr das Design auf den einzelnen seiten verändert haben will.
Soll z.b. nur auf verschiedenen seiten arte wie Impressum, Index, Profilansicht, etc. eine anderer style genutzt werden würde ich auf meine beschriebene art setzen. Soll jedoch noch mehr customization (eventuell auch Benutzereinstellungen) genutzt werden ist ganz klar die php Version im vorteil -
elekdstj schrieb:
Ist die Variante mit PHP nicht viel aufwendiger als eine normale css-Datei zu erstellen?
Finde ich nicht wirklich viel aufwendiger. Sind ja nur ein paar Zeilen Code mehr.[/quote]
Naja, bei einer einfachen Webseite (ohne großen Schnickschnack) CSS über eine Datenbank zu laden finde ich auch recht unpraktisch/überdimensioniert. Schließlich muss für jeden Aufruf zusätzlich eine Verbindung zum Server aufgebaut werden oder die Containerdatei geladen werden.
Aber allgemein PHP an der Stelle zu nutzen kann schon praktisch sein. Wobei man für sehr, sehr vieles auch einfach mit Vererbung und der Vergabe von mehreren Klassen arbeiten kann. Sogar Variablen wären in CSS möglich, wenn nur das übliche Problemkind das implementiert hätte. -
itgenie98 schrieb:
Es kommt halt drauf an wie genau ehr das Design auf den einzelnen seiten verändert haben will.
Soll z.b. nur auf verschiedenen seiten arte wie Impressum, Index, Profilansicht, etc. eine anderer style genutzt werden würde ich auf meine beschriebene art setzen. Soll jedoch noch mehr customization (eventuell auch Benutzereinstellungen) genutzt werden ist ganz klar die php Version im vorteil
Ich möchte einfach überall andere buttons, andere Überschriften, einmal mit Sitebar und einmal ohne, unterschidliche Grössen der Bilder u.s.w.
Wie funktioniert das dann mit PHP kann mir jemand ein Beispiel geben? -
Das CSS bindest du in den Seiten wie folgt ein:
<link rel="stylesheet" type="text/css" href="style.css.php" media="screen" />
In der styles.css.php
<? header("Content-type: text/css", true); echo '.class{ color:',$color'.;}
$color musst du dann definieren in der entsprechenden Datei definieren, bevor das stylesheet geladen wird.
Oder du setzt entsprechend von $_SERVER[REQUEST_URI] oder file die Farbe.
-
Ich glaube für die Ansprüche von dir reicht es, wenn du eine CSS Datei schreibst, die du immer einfügst. Dann defimnire einfach deine CSS-KLassen und ID's minimal anders, wenn du es anders designen möchtest (hänge z.B. immer eine 1 hinter den Namen) und definiere das DEsign in deiner Datei dann anders.
-
Danke für die Hilfe. Ich bin zwar immer noch nicht sicher welches die beste Variante ist aber jetzt kann ich es ja ausprobieren.
https://elekdstj.de -
elekdstj schrieb:
Ich möchte einfach überall andere buttons, andere Überschriften, einmal mit Sitebar und einmal ohne, unterschidliche Grössen der Bilder u.s.w.
Es kommt halt drauf an wie dynamisch diese Elemente veränderbar sein sollen.
Wenn sie vom Benutzer, bzw von vorherigen Entscheidungen nicht beeinflussbar sind, wäre es um einiges ressourcensparender (vor allem bei größeren Projekten) wenn du so etwas nicht über php abwickeln würdest
Da ich aber nicht weiß was genau du für eine Website im endeffekt haben willst, kannst du ja einfach mal rumprobieren.
Ändern und optimieren kann man hinterher immer xD -
Ich habe gerade mal einen Blick in den Quellcode deiner Seiten geworfen und dabei ist mir aufgefallen, das er formale Fehler enthält. Du hast einmal ganz zu Anfang
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="de"> <head>
und viel weiter unter noch einmal
<!DOCTYPE html> <html> <head>
Zum eigentlichen Thema CSS. Google empfiehlt aus Performance-Sicht
- große CSS-Bereiche in extra Datei, damit sie gecacht werden können
- kleine CSS-Schnippsel ins HTML/PHP
Das könnte in deinem konkreten Fall ja ggf. so aussehen, dass du eine große CSS-Datei hast, die alle generellen Festlegungen enthält und in HTML/PHP stehen die Dinge, die wirklich nur für eine einzige Einzelseite notwendig sind. Es gibt aber auch noch andere Aspekte, die Google hier
https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
erklärt.
-
mein-wunschname schrieb:
Ich habe gerade mal einen Blick in den Quellcode deiner Seiten geworfen und dabei ist mir aufgefallen, das er formale Fehler enthält. Du hast einmal ganz zu Anfang
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="de"> <head>
und viel weiter unter noch einmal
<!DOCTYPE html> <html> <head>
Zum eigentlichen Thema CSS. Google empfiehlt aus Performance-Sicht
- große CSS-Bereiche in extra Datei, damit sie gecacht werden können
- kleine CSS-Schnippsel ins HTML/PHP
Das könnte in deinem konkreten Fall ja ggf. so aussehen, dass du eine große CSS-Datei hast, die alle generellen Festlegungen enthält und in HTML/PHP stehen die Dinge, die wirklich nur für eine einzige Einzelseite notwendig sind. Es gibt aber auch noch andere Aspekte, die Google hier
https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
erklärt.
Danke für die Fehlermeldung, es sollte nun gelöscht sein. Ist dir sonst nichts aufgefallen? Bin um jeden Hinweis oder Tipp froh. Die Empfehlung von Google ist sicher sinnvoll, dann habe ich noch einiges zu tun. Würde den Beitrag gerne positiv bewerten, kann ich aber Leider noch nicht.
Wenn du willst setzte ich deine Homepage auf die Linkliste auf meiner.
Bitte gibt mir doch eine positive Bewertung damit ich euch auch Bewerten kann. Danke -
Wie Du schon im Anfangspost geschrieben hast, ist Unübersichtlichkeit ein wichtiger Faktor. Eine Webseite erstellt man nicht für die Ewigkeit. Eine Webseite lebt von Aktualisierung und Überarbeitung. Je nachdem, was Du mit dem Projekt vor hast, solltest Du auch bedenken, dass sich eventuell andere Leute mit der Pflege befassen werden und diese sich dann auch erst im Code zurechtfinden müssen.
Letztendlich mußt Du aber entscheiden, womit Du besser umgehen kannst. Stehst Du mit CSS auf Kriegsfuß, mach es in einer Datei, willst Du Überarbeitungsmöglichkeiten und einfache Änderungen, erstelle eine extra CSS. -
Also erstmal grundlegendes:
CSS als eine Datei auslagern. Macht sich viel leichter, wenn man unterschiedliche Templates im Laufe der Zeit entwickelt und dann einfach nur die CSS austauschen will.
unter anderem machen sich auch Bilder des Layouts wie logos etc base64 codiert in der CSS wesentlich besser, da damit der extra request auf diese Datei wegfällt
http://www.selfphp.de/code_snippets/code_snippet.php?id=83
ließe sich damit realisieren, gerade Designs mit vielen kleinen Bildpfitzelchen mit 1kb gröe und noch kleiner bieten sich dabei an. alternativ könntest du auch einen online-konverter verwenden.
ebenso kann man scripte in eine extra datei auslagern, was der lesbarkeit des Dokuments hilft. Damit trennt man logik, design und Struktur der Seite sinnvoll.
-------------------------------------------------
nun zu deiner Seite:
Sie ist alles andere als optimal. Dein Angebot, fremde Webseiten zu machen, solltest du erstmal noch zurückstellen, bis du die Grundlagen der Webentwicklung draufhast und die Technologien beherrscht.
Beispiele:
1. deine CSS-Definitionen liegen im Body. Kann man so machen, sollte man aber nicht. Sauber auslagern würde die Lesbarkeit erhöhen und die Wartbarkeit wesentlich verbessern.
2. Der body selbst, du machst ihn 1 mal auf, 2 mal zu. Solche Fehler passieren unter anderem bei Copy&paste-Arbeit oder wenn man den überblick über sie seite verliert
3. Einrückungen: ist zwar eine reine designfrage des quellcodes, macht es aber dir leichter, zusammenhängende objekte und untergeordnete objekte zu unterscheiden. uum eben solche Fehler zu vermeiden.
4. du mischst zwischendurch inline styles mit rein, verringert lesbarkeit
5. Layout optimierung, du hast dort drin wahre <br> - Orgien, mit s machst du einrückungen, normaler Text wird h3 formatiert, obwohl es keine überschriften sind. Das verringert lesbarkeit
6. HTML5 und HTML4 mischmasch. Entscheide dich für eine Technologie, wenn du Suchmaschinenoptimiert arbeiten willst, solltest du HTML5 sauber umsetzen und die möglichkeiten nutzen
7. Struktur: Deine Seite ist nicht wirklich sauber strukturiert auf Codeebene. wirkt sich negativ auf Suchmaschinenergebnisse aus
und wenn du richtig das durcharbeiten willst, nimmst du folgende Seite zuhilfe und arbeitest die Fehlermeldungen ab:
http://validator.w3.org/check?uri=https%3A%2F%2Felekdstj.de%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
andererseits kann ich dir nur empfehlen, nimm dir jemanden zuhilfe, deine Seite anders zu konzipieren. Ein Profi würde die Seie in 30 Minuten optimiert umbauen, dass es HTML5 konform ist, und erste SEO und laufzeitoptimierung drin ist.
600kb für dieses Projekt ist eindeutig zu viel, das geht wesentlich kleiner. wenn du es optimiert hast, wird es auch wesentlich kleiner sein und es werden auch mehr leute auf deine Seite kommen.
ach ja, ich denke nicht, dass die Seite ein Responsive-design hat, also tauglich für Smartphones und Tablets ist... ausprobiert hab ich es nicht. Kommentare kannst du bei der kleinen Seite rausmachen, wenn man es richtig strukturiert hat, dann ist es ohne Kommentare lesbar, außerdem sind das Zeichen, die ebenfalls immer übertragen werden.
dann die Frage: brauchst du so viele Styles? mir scheints, da ist einiges an Zeug drin, was du nicht verwendest.
dann bindest du jquery ein, nutzt es aber nicht wirklich.
deine li-liste ist nicht in einer ul zusammengefasst, ist ein formaler fehler
da bindest du eine htm als script ein:
<script src="elekdstj.de_files/multiad_002.htm" type="text/javascript">
dein script ist alles andere als optimal und wo sind die semikolons?
Ich hab jetzt mal grob drüber geschaut, ich kann dir nur empfehlen, bau neu, deraufwand ist geringer, als das umzubauen, also nur die inhalte rausziehen mit links und dann entsprechend strukturieren und dann CSS nachbügeln, bis es so aussieht, wie es aussehen soll.
Wenn du hilfe brauchst, kannst dich melden
-
Hallo sebulon
Danke für deinen ausführlichen Beitrag. Gerne nehme ich deine Kritik an und versuche mich zu verbessern. Ich mache dies relativ wenig und nur in meiner Freizeit, würde aber gerne auch Professionell arbeiten. Bin froh das du so ehrlich bist und mir Tipps gegeben hast. Ich mag deine direkte Art.
Ich versuche die Seite neu und übersichtlicher zu gestalten. Abgesehen von den übleren Fehlern. Werde deine Hilfe sicherlich gebrauchen können und freue mich über dein Angebot.
andererseits kann ich dir nur empfehlen, nimm dir jemanden zuhilfe, deine Seite anders zu konzipieren. Ein Profi würde die Seie in 30 Minuten optimiert umbauen, dass es HTML5 konform ist, und erste SEO und laufzeitoptimierung drin ist.
Könntest du das auch so schnell erledigen und machst du es beruflich? Diese halbe Stunde würde mir ohne weiteres auch im Budget liegen. Vieles ist zwar auch offensichtlich und kein Problem für mich, nur benötige ich massiv mehr Zeit. Vor allem mit dem CSS habe ich viele unnötige Befehle, weil ich einfach zu Faul war mir das genauer anzusehen. -
Ich selber kann es dir nur so empfehlen wie ich es mache, ich mache eine externe Haupt-CSS und bei minimalen Veränderungen schreibe ich es ins Dokument, oder bei Platzhalter-Seiten setzte ich prinzipiell alles in die HTML, da es sich meist nicht lohnt das bisschen Code auszulagern.
-
elekdstj schrieb:
Könntest du das auch so schnell erledigen und machst du es beruflich? Diese halbe Stunde würde mir ohne weiteres auch im Budget liegen. Vieles ist zwar auch offensichtlich und kein Problem für mich, nur benötige ich massiv mehr Zeit. Vor allem mit dem CSS habe ich viele unnötige Befehle, weil ich einfach zu Faul war mir das genauer anzusehen.
Habe ich beruflich gemacht, jetzt mach ich grad was anderes, ich würde vermutlich 1h brauchen, bis alles schick ist. Ich stress mcih da aber auch nicht mehr rein^^
wegen geld mach ich sowas nicht, ich machs nur, wenn die leute sympathisch sind und dann für eine pizza... für geld geh ich arbeiten...
und optimierung ist gerade in der heutigen Zeit ein wichtiger Aspekt, gerade im mobile umfeld, wenn es wieder um jedes kb geht, das man spart... vielleicht begreifen das eines tages auch diese App-Entwickler oder die, die das responsive.design für mobile machen... -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
