Das sind die angemessenen Verwendungen für diese Technologien. Unangemessene Verwendung bedeutet, dass Sie diese Grenzen überschreiten und eine Nichtübereinstimmung erzeugen.
Unangemessene Datenbankverwendung
Sie speichern den Titel eines Blogbeitrags als Wert
<h1>10 Dinge, die man beim Fallschirmspringen nicht mitnehmen sollte</h1>
Es ist unangemessen, das HTML-Tag zusammen mit dem Titel zu speichern. Es ist später unflexibel und hat nichts mit dem Inhalt selbst zu tun. Was, wenn es absichtlich so gestaltet wurde, dass alle Titel unterschiedliche HTML-Tags haben könnten? Dann verwenden Sie ein anderes Datenbankfeld, um das Tag zu speichern, oder besser noch, eine Verwendung, die dieses separate Feld verwendet, um eine symbolische Darstellung der Wichtigkeit dieses Titels zu speichern.
Unangemessene HTML-Verwendung
Leute sagen oft „HTML ist für Inhalte“, was nur teilweise stimmt. Ja, Inhalte werden letztendlich zu HTML, aber das Markup, wie es von einem HTML-Coder geschrieben wird, sollte nur sehr wenig tatsächlichen Inhalt enthalten. Es sollte die strukturellen Elemente enthalten, die den Inhalt beschreiben, und innerhalb all dieser Struktur beschreibende Tags, die dynamisch Inhalte *abrufen*.
Andere unangemessene HTML-Verwendung sind Dinge wie
<div class="post-seperator"></div>
Wahrscheinlich ist das rein aus visuellen Gründen da. Idealerweise sollte eine andere Methode implementiert werden, um dasselbe visuell zu erreichen, ohne das zusätzliche div zu benötigen.
Ein weiteres Beispiel für unangemessene Verwendung, das keiner Erklärung bedarf
<p style="border: 1px solid red; padding: 10px;">Warnung: Das sollten Sie niemals tun.</p>
Unangemessene CSS-Verwendung
Es ist schwieriger, CSS zu missbrauchen als andere Sprachen. Es ist einfach, schlechtes CSS zu schreiben, aber das ist nur schlechtes CSS, kein Missbrauch der Technologie. Nehmen Sie zum Beispiel die Verwendung von RGBa, das es Ihnen ermöglicht, die Transparenz (Deckkraft) von Farben anzupassen, während Sie sie deklarieren. Dann setzen Sie den Hintergrund einer Box auf einen sehr hellen Schwarztton mit schwarzer Schrift darüber. Nun, nicht alle Browser unterstützen RGBa, die Box wird voll schwarz mit schwarzer Schrift und unleserlich. Ein großer Fehler, sicher, aber kein Missbrauch der Technologie.
Es ist jedoch möglich, es zu missbrauchen, und ein Beispiel dafür ist, dass CSS es Ihnen ermöglicht, tatsächlich Inhalte zu HTML hinzuzufügen. Dies hat einige interessante Verwendungszwecke, kann aber potenziell missbraucht werden. Zum Beispiel
#footer:after { content: "Copyright 2009 The Bad Idea Police"; }
Unangemessene JavaScript-Verwendung
Das Lustige an JavaScript ist, dass wenn etwas **kann** in einer anderen Sprache getan werden, es wahrscheinlich **sollte** in dieser anderen Sprache getan werden.
Zum Beispiel ist CSS vollständig in der Lage, „Hover“-Ereignisse für Designänderungen zu handhaben, doch JavaScript wird manchmal stattdessen für Hovers missbraucht. Zum Beispiel das Austauschen eines Bildes beim Überfahren. Definitiv CSS-Sprites-Gebiet.
Ein weiteres typisches Beispiel ist die Formularvalidierung. Sie können einem Formular mit JavaScript eine fantastische Validierung hinzufügen, die sehr reaktionsschnell und für den Benutzer nützlich ist. Aber Sie sollten dieses Formular besser auch mit einer serverseitigen Sprache validieren, sonst könnten Sie Sicherheitsprobleme bekommen.
Es heißt oben, JavaScript sei für Funktionalität. Das stimmt. Wenn Ihre Seite nach dem Laden „etwas tun“ und interaktiv sein soll, ist das normalerweise JavaScript-Territorium. Aber das ist nicht alles, was es tut. JavaScript ist sehr mächtig. Es kann CSS hinzufügen/anpassen/entfernen. Es kann HTML hinzufügen/entfernen/anpassen. (Beides über das DOM). Es kann mit Ihrem Computer sprechen und Antworten erhalten. Über AJAX-Techniken kann es mit dem Server sprechen und Antworten erhalten.
Das Potenzial für Missbrauch von JavaScript ist sehr hoch, aber die Grenzen sind etwas verschwommen. Zum Beispiel haben wir im obigen Beispiel für HTML-Missbrauch versucht, ein leeres Div zu entfernen, das wir aus rein gestalterischen Gründen verwendet haben. Was wir stattdessen tun könnten, ist, dieses Div mit JavaScript an die Seite anzuhängen. Löst das Problem für HTML, aber jetzt behandelt JavaScript Ihr HTML. Fühlt sich seltsam an wie das Überschreiten von Grenzen, aber ich würde sagen, das ist eine akzeptable Verwendung von JavaScript. Dann nehmen wir an, während Sie dieses Div angehängt haben, wussten Sie, dass es auch rot sein musste, also haben Sie mit JavaScript CSS angehängt und es rot gemacht. Das ist **kein** Missbrauch von JavaScript, denn Sie hätten das mit normalem CSS tun können. Fühlt sich seltsam an, aber das meine ich mit, wenn Sie es in einer anderen Sprache tun **können**, **sollten** Sie es in einer anderen Sprache tun.
Nur in einer perfekten Welt
All das ist nicht nur mein Gerede, das ist nur eine Wiedergabe/Verschmelzung dessen, worüber die Leute heute in unserer Branche sprechen. Aber es ist nicht nur Geschwätz, diese Standards haben sich entwickelt, weil es das Richtige ist, um Websites zu bauen, die leichter zu warten, zugänglicher und semantischer sind.
Ich bin jedoch die Erste, die zugibt, dass Regeln manchmal gebrochen werden. Wir sind alle nur normale Menschen, wir wissen nur, was wir wissen, und wir haben nur so viele Stunden am Tag. Wenn Sie eine Regel brechen müssen, um die Arbeit zu erledigen, in Ordnung. Die Tatsache, dass Sie überhaupt wissen, dass Sie eine Regel brechen, ist ziemlich gut, und Sie lernen und werden jeden Tag besser.
Einige gute Anleitungen. Es ist frustrierend, wenn man zu einem Projekt kommt, an dem jemand anderes gearbeitet hat, und sie haben HTML in der Datenbank. Ich habe schon ganze Seiten in einem Datenbankfeld gesehen, bevor ich heute darauf gestoßen bin – ich hoffe, ich sehe es nie wieder!
Es gibt einen kleinen Graubereich, wenn es um Inhalte und Markup in der Datenbank geht… Nehmen Sie WordPress als Beispiel: Ihr Beitrag hat viele Absätze, Listen, Links usw. Die einzige vernünftige Möglichkeit, freiformartige Inhalte wie diese zu behandeln, ist die Speicherung des Markups in der Datenbank.
Stellen Sie einfach sicher, dass es sich tatsächlich um freiformartige Inhalte handelt.
Natürlich können und dürfen Sie Markup in der Datenbank verwenden, aber wenn Sie dies tun, müssen Sie bedenken, dass Sie an Flexibilität verlieren, was damit möglich ist.
Wenn Sie zum Beispiel alle s in einem 5-Absatz-Eintrag in der Datenbank in s ändern möchten, ist das nicht so einfach wie das einfache Ändern Ihres Markups, Sie müssen eine Abfrage und dergleichen durchführen.
Also ja, es ist möglich, aber Sie sollten es nur bei SEHR langen Texten tun und bei denen, die sich nicht ändern oder ein Markup haben, das sich nicht ändern wird.
Nun,
Ich stimme Andrew zu und es passt zum letzten Absatz dieses Artikels.
Es gibt Fälle, in denen es aus irgendeinem Grund notwendig ist, die Regeln zu brechen. Es liegt am Designer/Programmierer, zu entscheiden, was in jedem Fall zu tun ist.
Prost!
Alexandre.
Nun, ich stimme Andrew zu, aber nur in Fällen von Inhalten. Ich habe WordPress schon so oft benutzt und mag den Stil, dass es das Markup speichert. WP speichert ein gültiges Markup, und wenn Sie etwas ändern möchten, zeigen Sie nur Stilabsätze, Listen, Blockzitate, Bilder und mehr an. Kein CSS-Stil wird in der Datenbank gespeichert (nur einige Standards, im Falle von Bildern).
Aber diese Idee stimmt auch mit Dave Sparks überein. Er sagte, dass das Markup nicht gespeichert werden muss, sondern nur Markups, die das endgültige Layout der Anwendung definieren. Der Inhalt wird immer gleich sein!
Das ist ein toller Artikel! Eine wirklich schöne Ergänzung wäre die entsprechende angemessene Verwendung. Ich verstehe, dass dies verallgemeinerte Beispiele sind, daher wäre eine verallgemeinerte angemessene Verwendung schön.
Zum Beispiel bin ich neu in HTML und habe die dumme DIV als Trennzeichen-Sache gemacht. Was wäre ein besserer Weg? Den Rand am DIV darüber oder darunter setzen? Mit anderen Worten, existierende Blockelemente verwenden, um die Seite zu gestalten?
Vielen Dank nochmals, ich genieße Ihre Seite wirklich.
Sie würden die gegenüberliegenden Divs stylen. So würden Sie ihnen beiden Ränder geben, um den Abstand dazwischen zu vergrößern.
Sie könnten auch verwenden, aber es ist nichts, was ich verwenden würde.
Was ist damit falsch, nur um sicherzugehen? :)
Warnung: Das sollten Sie niemals tun.Inline-CSS sollte genauso vermieden werden wie Inline-JavaScript (siehe hier), da Sie zwei Sprachen mischen, die getrennt gehalten werden sollten, und Sie viel Flexibilität verlieren, wenn Sie Inline-CSS verwenden, da Sie „Suchen und Ersetzen“ verwenden müssen, wenn Sie mehrere Vorkommen eines Codes ändern möchten.
Oh, es ging um den „Inline“-Teil, auf den Sie sich bezogen haben. Ich verstehe und stimme Ihnen zu. Aber in einigen Fällen kann es viel schneller und einfacher sein, es einfach inline zu machen, wenn Sie eine schnelle Landingpage für eine zeitlich begrenzte Promotion benötigen und sie danach wegwerfen.
Ja, ich glaube nicht, dass Inline-Styling überhaupt verwendet werden sollte. Selbst wenn es sich um eine kurzfristige Splash-Page handelt, sollten Sie es zumindest in den Kopf Ihrer Seite einfügen.
Die einzige Zeit, in der Inline-Stile notwendig sind, ist meiner Meinung nach für das HTML-E-Mail-Design.
Oh, ich weiß nicht. Es ist genauso eine Such- und Ersetzungsaktion, den CSS im Kopf zu ändern, wie ihn auszutauschen. In beiden Fällen ist es zweckgebunden, nur für diese Seite, und in beiden Fällen hat es eine höhere Vererbung als das Basis-CSS.
Meiner Meinung nach, wenn Sie ein Korinthenkacker sind, der niemals „Inline“-Styling verwendet, dann fügen Sie es doch zu Ihrer Basis-CSS-Datei hinzu und vergessen Sie, es in den Kopf einzufügen.
Ich bin mit Klaus einer Meinung… im Prinzip stimme ich der Nichtverwendung von Inline-Styling zu; aber in der Praxis, wenn ich eine einmalige Landingpage baue, ist es manchmal genauso einfach, den benötigten Stil einzufügen.
Ironie
Diese schicke kleine Artikel-Einleitung verwendet Inline-Stile.
Davon abgesehen stimme ich dem Artikel immer noch zu. Websites sollten flexibel aufgebaut sein, aber das bedeutet nicht, dass diese Regeln *immer* eingehalten werden müssen. Beispiel ist die ganz oben in diesem Artikel. Dieses CSS muss nicht im gesamten Website wiederverwendet werden und ist spezifisch für diese Verwendung. Daher passen Inline-Stile gut.
Ha, ich bin froh, dass jemand das bemerkt hat. Aber ja, ein hervorragendes Beispiel für einen Graubereich.
Die Theorie hier war, dass ich wollte, dass es im RSS so rüberkommt, und Inline-Stile waren die einzige Möglichkeit!
Grundsätzlich einverstanden, aber manche Dinge sind wirklich nur einmalige, einzigartige Stile…
Um Stil und Inhalt zu trennen, müssen Sie in der Lage sein, die Teile Ihres Inhalts zu klassifizieren oder zu identifizieren.
Es macht wenig Sinn, sich die Mühe zu machen, einen eindeutigen Klassennamen für etwas zu finden, das nur dieses eine Ding ist, das wirklich nur ein stilistisches Element ist, das nur an einer Stelle auftaucht…
Wenn Sie es klassifizieren können („dies ist eine Warnmeldung“) oder identifizieren („dies ist die Beschreibung des Nuke-Buttons“), dann sollte es natürlich seine eigene CSS-Regel haben.
Persönlich versuche ich, Inline-Styling komplett zu vermeiden, weil
a) Inline-Stile können nicht so gecached werden, wie es mit einer externen CSS-Datei möglich wäre
b) Ich habe mich oft dabei ertappt, wie ich versuchte, etwas layoutspezifisches zu ändern und sowohl die HTML- als auch die CSS-Dateien anpassen musste, weil Inline-Styling verwendet wurde.
c) Es gibt auch eine praktische Möglichkeit mit externem CSS, indem man eine Art „Single-Definition“-CSS-Datei erstellt, in der man alle „nicht so oft benötigten“-Elemente platziert – mit der Möglichkeit, die Regeln zu kommentieren.
Nun, dann sollte Inline-CSS nicht in Tutorials oder Büchern gelehrt werden, denn wenn es so falsch ist zu verwenden, dann wissen Leute wie ich, die es selbst lernen, das nicht. Wenn es so schlecht zu verwenden ist, dann sollte es irgendwie deaktiviert werden. Wenn der Code funktioniert, werden die Leute ihn aus Bequemlichkeitsgründen verwenden! Frustrierend.
Eines Tages wird sich eine dieser Dreamweaver-WYSIWYG-Websites, bei denen HTML, CSS und Scripting zu einem endlosen kryptischen String verschmelzen, der mit „body onclick“ beginnt, fragen: Wer bin ich? Lasst uns die Welt beherrschen.
Zu lustig, Helen! Tagessuppe, Ursuppe. Jetzt habe ich Hunger auf Mittagessen.
Guter Artikel – die Trennung von Belangen ist für jedes große Projekt unerlässlich. Hatte einmal die Anforderung, einige Daten über einen Web-Service bereitzustellen – aber die Rohdaten enthielten Markup. Ihre Antwort: Parsen Sie die Abfrageergebnisse….
Tolle Liste von Verwendungen! Die meisten davon sind ziemlich gesunder Menschenverstand, aber ich sehe die Fehlverwendung ständig.
Nebenbei bemerkt, und sicher nicht wegen Rechtschreib- oder Grammatikfehlern – der Artikel ist falsch geschrieben. Inapproprite vs. Inappropriate.
Interessanter Artikel, Chris. Ich habe mich gerade gefragt, Sie sagen
wenn Sie über die Verwendung von *Inhalten* mit CSS sprechen, ich frage mich nur, was diese wären?
Ja, ich stimme dem zu…
Eine mögliche gute Verwendung ist zum Beispiel bei der Erstellung eines Druckstils, Sie können den Link zum Hyperlink anhängen.
a:after { content: " [" attr(href) "] ";
Ein weiterer Punkt, an dem die „content“-Eigenschaft nützlich sein könnte, ist die Erstellung eines „fiktiven“ Elements nach einem gefloateten Container, um einen Float-Clear ohne nutzlosen, zusätzlichen Markup zu erreichen, genau wie hier
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Siehe für weitere Details.
habe die Quelle vergessen: http://www.positioniseverything.net/easyclearing.html
Großartig David, ich hätte nie daran gedacht, den Float auf diese Weise zu clearen.
Vielen Dank :)
Es gibt auch das Argument, dass CSS-Hover eine *Funktion* und kein *Design* ist, was es in die unangemessene Kategorie einordnen würde.
Diese Verwendung ist ziemlich weit verbreitet, aber wenn man streng „angemessen“ sein will, ist es einen Gedanken wert.
Darüber hinaus ist :hover nur mit Anker-Tags browserübergreifend kompatibel (es sei denn, mein Wissen ist veraltet) und es gibt keine Möglichkeit, den Zustand nach dem Mouse-Out beizubehalten.
Ich mag und verwende CSS für die meisten meiner Hovers (mit Sprites), aber wenn ein Hover bestehen bleiben muss, wartet JavaScript auf mich.
Aber hauptsächlich ist es eine Funktion, keine Design.
Oh die schönen Grauzonen, in denen wir leben und uns bewegen, wenn es um Webentwicklung geht. ;-)
Hallo.
Hey, Sie haben die unangemessene Verwendung von PHP verpasst ;D.
Meiner Meinung nach sollten CMS keine Inhalte enthalten oder generieren, die mit HTML vermischt sind. HTML/CSS sollte Teil des Vorlagensystems sein.
Was CSS angeht, habe ich eine Frage, was ist eine gültige Lösung, um die Verwendung von
Ich benutze 960GS und diese leeren DIVs erscheinen mir obligatorisch.
Einverstanden mit „Unangemessene Verwendung von PHP“. Vor kurzem habe ich den Artikel über PHP-Positionierung gelesen und weiß jetzt nicht, was ich lernen soll (sehr grüner Lernender hier).
aker, was soll ich sehen? Ich sehe eine graue Box, aber keinen Text. Oder bin ich es nur?
Nach dem, was ich gelernt habe, kann Inline-CSS argumentiert werden, wenn Sie eine Ein-Seiten-, Ein-Instanz-Anforderung haben, das betreffende Tag zu ändern.
Ausgezeichneter Beitrag! Ich denke, eine unangemessene Verwendung von PHP ist das Ausgeben von Inhalten, die nicht dynamisch generiert werden.
Da muss ich Ihnen zustimmen. Ich habe es satt, Leuten bei ihren WordPress-Themes zu helfen, nur um festzustellen, dass jedes zweite Wort in der Vorlage von PHP-Echos eingefügt wurde.
Ah, aber wenn sie ein Theme verwenden, das für die Massen erstellt wurde, ist es sinnvoll, z. B. den Blog-Titel dynamisch abzurufen und anzuzeigen. Wenn es ein benutzerdefiniertes Theme nur für diesen Blog wäre, könnten und sollten Sie viel mehr HTML fest codieren.
Hmmmm….. Interessante Sachen passieren dort. Ich wusste bis heute nicht einmal, dass man mit CSS Inhalte hinzufügen kann, das ist eine Lektion, die ich so schnell wie möglich vergessen werde… bevor ich sie benutze.
Ich denke tatsächlich, dass JavaScript für Hover-Effekte verwendet werden sollte, für die die meisten Leute CSS verwenden.
Da CSS für Design und JavaScript für Funktionalität/Verhalten ist, sehe ich Hover-Effekte als Verhalten und platziere sie daher dort.
Es gibt nichts, was einen davon abhalten würde, CSS zur Verwaltung des Aussehens des auf Hover angezeigten Elements und JS zur Verwaltung seines Verhaltens zu verwenden. Ein interessantes Konzept, das vor Monaten besprochen wurde, sprach von der Verbesserung des Benutzererlebnisses, indem die Anzeige von Dropdown-Menüoptionen beim Rollover verzögert und sie nach dem Rollout länger sichtbar gehalten wurden. Dieses Erlebnis kann nur durch die Kombination von JS mit CSS erreicht werden.
In diesem Fall werde ich Ihre Hovers nie sehen. Das ist in Ordnung, wenn sie nur da sind, um hübsch zu sein, aber nicht in Ordnung, wenn sie dazu da sind, die Bedeutung eines Elements (z. B. eines Ankers) zu vermitteln oder Inhalte aufzudecken. Es kommt darauf an, wie der Hover verwendet wird.
Danke für den Beitrag. Das muss immer gesagt werden!
Ich denke, JavaScript kann sowohl für Design als auch für Funktionalität verwendet werden, solange man es clever einsetzt. Wie beim Thinkgeek-Hintergrundbeispiel von neulich. Jquery hätte den HTML leicht generieren können, um das zu erreichen. Dann, wenn JavaScript ausgeschaltet wäre, hätte es einen einfachen Hintergrund. Ich denke, JavaScript kann, wenn es richtig eingesetzt wird, viele viele Zwecke erfüllen.
Ich denke, es geht darum, die beste Technologie für den Job zu verwenden. Ein visuelles Element von JavaScript abhängig zu machen, nur um ein paar Zeilen HTML zu sparen, erscheint unklug. Wenn es mit HTML und CSS gehandhabt werden kann, sollten diese Technologien verwendet werden.
Aber in diesem Beispiel haben HTML und CSS unsemantisches Markup erstellt. Durch die Nutzung von JavaScript zur Erstellung dieses HTML helfen wir der Seite, besser zu funktionieren. Persönlich, solange das erstellte HTML keinen anderen Zweck erfüllt, als die Website zu „verschönern“. Und die Website funktioniert perfekt ohne dieses Element. Ich sage „kein Schaden, keine Schuld“.
Toller Artikel Chris. Wirklich gute Punkte, die Web-Entwickler sich merken sollten.
Ich hätte nicht daran gedacht, die Datenbank in diese Diskussion einzubeziehen, aber es ist absolut sinnvoll. Die einzige Zeit, in der das Speichern von HTML in einer Datenbank eine gute Entscheidung wäre, ist, wenn Sie eine Technologie wie Textile oder Markdown verwenden und eine gecachte Version des konvertierten Textes zur schnellen Abfrage in der DB speichern.
Sehr interessante Lektüre. Danke Chris für die Gedanken. Tweet später
Toller Artikel! Nur ein Tipp, Sie möchten vielleicht jemanden bitten, für das nächste Mal Korrektur zu lesen =)
Heutzutage ist CSS Design und nicht Verhalten, weil wir über CSS-2 sprechen, und nicht über CSS 5. Denken Sie nur an all die neuen Webkit-CSS3-Magie
div { -webkit-global-warming(stop, 0); -webkit-tax-declaration(fill out, send); }CSS ist Stil, weil es statisch ist, und das, weil es erst der Anfang ist. Es muss eine Entwicklung geben, und wenn die Zukunft nicht Funktionalität ist, gäbe es nur wenige Dinge, die übrig bleiben würden, wie
h2 { smell: strawberry; }, Variablen oder interne Berechnungen (Farben multiplizieren wie in PS).Ich habe diesen Artikel gelesen und bin zu http://net.tutsplus.com gegangen (das ist meine übliche Routine). Als ich auf diese Seite kam, las ich den neuen Artikel mit dem Titel „Supercharge your Css with PHP under the hood“. Während einige der in diesem Artikel besprochenen Ideen vernünftig erscheinen, schien die Mehrheit davon das zu sein, was dieser Artikel als unangemessen auflistete. Ich dachte nur, ich würde ein großartiges Beispiel dafür anführen, wann man eine Sprache nicht verwenden sollte, wenn eine andere sie effizienter erledigt, die bereits vorhanden ist.
Viel Spaß, lol
Hallo Chris, es ist immer gut, einen Schritt zurückzutreten und sicherzustellen, dass Sie die Dinge auf die effektivste Weise tun. Ich denke, dass HTML als Handler von Inhalten sehr wichtig ist, wie Sie vorgeschlagen haben, und woanders gespeichert werden könnte.
Ich freue mich auf mehr jQuery-Arbeit.
Interessant und sehr wahr. Danke für den Beitrag.
Sie haben mich wieder herausgefordert, Chris
Hallo zusammen,
Ich habe kürzlich diesen Beitrag gelesen
http://jeffcroft.com/blog/2009/may/20/applying-oop-concepts-css/
Dachte, es wäre ein gutes Thema, das nach diesem Beitrag zu betrachten. Chris, wie wäre es mit einem Beitrag über die Anzahl der Klassen, die auf einem einzigen Element verwendet werden sollten? Was denken Sie…
Hey, ich habe eine Frage
Was das Mischen von HTML-Formatierung und Datenbank-Speicherung angeht: Wie speichert ihr die Unterüberschriften eurer Beiträge? Zum Beispiel: Wie speichert ihr eure Überschriften in diesem Beitrag nicht ('Unangemessene Datenbankverwendung', etc), wenn ihr sie nicht in eurer Datenbank speichert als
Gibt es eine Technik dafür, von der ich nichts weiß? Das wäre toll zu wissen!
Danke
Ich verfolge deine Tweets und RSS-Feeds, Chris, und ich schätze all die gute Arbeit, die du leistest. Ich habe viel von dir gelernt.
Eine Kleinigkeit zu diesem speziellen Artikel… Während ich zustimme, dass Inline-Stile *wann immer möglich* vermieden werden sollten, stimme ich respektvoll nicht zu, dass sie **niemals** verwendet werden sollten. Wäre es in Situationen, in denen Inhalte dynamisch generiert werden, nicht sinnvoll, Inline-Stile zu verwenden? (Ein triviales, aber bekanntes Beispiel: Setzen der Schriftgröße von Tags in Blog-Tag-Clouds basierend auf der Häufigkeit der Verwendung.) Meine $0.02.
Trennung von Elementen ist wunderbar. Ich persönlich versuche, zu viel JavaScript zu vermeiden. Es verlangsamt nicht nur Websites (wie auch Flash), einige Benutzer haben es nicht aktiviert, daher versuche ich, mich für den Großteil der Arbeit auf serverseitige Programmierung mit HTML/CSS zu verlassen. Schöne Diskussion aber.
Was ist mit PHP? Ist es nicht gute Praxis, es nur für die Logik zu verwenden?
Inline-CSS wird für HTML-E-Mails verwendet, insbesondere wenn Sie eine ganze Universität von Lotus Notes- oder Outlook-Benutzern haben. Alles hat seinen Verwendungszweck, sogar schlechte Praktiken, denn meistens spiegelt es nur eine Übergangsphase des Lernens wider. Einst hatten wir lange, HTML-codierte Seiten und kurzes CSS, jetzt ist es einfach umgekehrt. Es ist nichts, worüber man sich aufregen müsste. Beste Praxis ist es, den Leuten beizubringen, dass es am besten ist, alle Dateien zu trennen (d. h. Ihr JavaScript in eine JS-Datei zu legen und es in Ihrem HTML-Dokument zu verlinken), wobei HTML das Dach ist, das alles zusammenhält.
Besser noch, jedem beizubringen, serverseitige Programmiersprachen zu verwenden, um die beste Funktionalität zu ermöglichen.
Gute Regeln, an die man sich erinnern sollte, obwohl ich die DB-Regel auf meiner Website bewusst / glücklich ein wenig breche und postspezifischen Stilcode in benutzerdefinierten Feldern und Eintragsbereichen ablege…
Ein perfektes Beispiel dafür: Ich habe ein Projekt bei der Arbeit, bei dem sie das Suchmaschinenranking einer ihrer Seiten erhöhen wollen. Anstatt mit der HTML-Struktur und dem CSS zu arbeiten, hatte jemand die glänzende Idee, Lightboxen mit Text zu verwenden, um der Seite „mehr Inhalt und Schlüsselwörter“ für Suchmaschinen hinzuzufügen. Das ist eine urkomisch schlechte Idee, aber ich hätte nichts anderes von einer nicht-technischen Person erwartet. Ich habe davon abgeraten und ein paar andere Lösungen angeboten, die besser funktionieren würden, aber sie wollen die Lightbox-Idee immer noch testen.
Toller Beitrag aber... Ich hasse es, wenn ich so etwas sehe, es ist frustrierend und es passiert nur allzu oft. Ich ziehe die Augenbrauen hoch, wenn ich sehe, dass jemand gegen eine dieser Regeln verstoßen hat. Das Schlimmste ist, wenn man eine Datenbank voller schlechter Daten hat und herausfinden muss, wie man alles bereinigt und nutzbar macht.
Ich stimme diesem Beitrag wirklich zu! Ich hasse es, wenn Leute HTML-Tags in Datenbank-Titel-Felder einbetten. Es gibt Ausnahmen, aber ein Titel-Feld sollte niemals HTML enthalten. Denken Sie daran, dass Sie immer einen einfachen Wagenrücklauf in der Datenbank verwenden können, dann einen einfachen regulären Ausdruck verwenden, um \n durch zu ersetzen
Gute Punkte, Chris. Ich habe nie wirklich darüber nachgedacht, aber ja... alles hat seinen Zweck, und nur weil wir etwas für etwas anderes verwenden können, heißt das nicht, dass es Best Practice ist. Danke für den Artikel!
Guter Rat, ich schätze, das ist etwas, woran sich jeder Designer/Entwickler immer wieder erinnern muss.
Hallo Chris – tolles Thema. Frage mich nur, was du von der Idee der CSS-Transformationen hältst? Scheint verhaltensbezogene Attribute mit den üblichen präsentationsbezogenen Attributen zu vermischen. Zuerst dachte ich, das ergäbe Sinn, aber nachdenken nicht sicher. Noch eine Grauzone.
Ich bin dafür. Die Dinge, die man „transformiert“, sind designbezogene Dinge und gehören somit letztendlich zum CSS. Ich stimme zu, dass es ein wenig unklar sein kann... wenn die Transformation die Funktionalität in irgendeiner Weise erheblich beeinträchtigt.
Ausgezeichneter Beitrag!
Was wäre, wenn Sie die CSS :before Pseudo-Klasse verwenden möchten, um einen Wrapper für alle Bilder innerhalb des Inhalts einzufügen?
Das Ziel wäre, für jedes Bild einen Rahmen zu erstellen, und der Rahmen hätte eine flüssige Breite und Höhe.
Ich dachte, dieser Code könnte funktionieren, ist das überhaupt möglich?
#content-canvas img:before {
}
Ich versuche den Code noch einmal... habe mich vertippt....
#content-canvas img:before {
content: ''
}
#content-canvas img:after {
content: ''
}
und dann würden Sie .image-frame-topleft, .image-frame-right und .image-frame-bottom nach Ihren Bedürfnissen gestalten.
Wäre das möglich?
Ich gehe davon aus, Sie hatten etwas HTML in diesen Inhalts-Tags? Ich bin mir nicht sicher, ob Sie HTML so einfügen können. Wenn ja, denke ich, müssten Sie die Zeichen auf die spezielle, seltsame Weise kodieren, wie es die CSS-Inhaltswerte benötigen. Aber wenn Sie es tun können, würde ich sagen, das ist in Ordnung. Es ist eine weitere reine Design-Sache, die zum CSS gehört...
Ich kann nichts darüber finden, den Code direkt einzufügen, aber theoretisch könnten Sie den Code in einer separaten Datei speichern und die URI verwenden;
content: uri(mysite.com/beforeimg.txt);Leider gibt es keine Unterstützung für IE 7 oder niedriger, und nur teilweise Unterstützung in anderen Browsern. Vielleicht lohnt sich die Untersuchung nicht
Perfektes Beispiel für unangemessene Verwendung
ajax cross domain requests, über CSS. weil CSS nicht denselben Cross-Domain-Regeln unterliegt...
es ist schmutzig, sage ich euch! schmutzig!
http://nb.io/hacks/csshttprequest