Namenskonvention für Assets (Bilder, CSS, JS)?

Ich habe immer noch Probleme, eine gute Namenskonvention für Assets wie Bilder, JS- und CSS-Dateien zu finden, die in meinen Webprojekten verwendet werden.

Mein Strom wäre also:

CSS: style-{name}.css
Beispiele: style-main.css, style-no_flash.css, style-print.cssusw.

JS: script-{name}.js
Beispiele: script-main.js, script-nav.jsusw.

Bilder: {imageType}-{name}.{imageExtension}
{imageType} ist eines davon

• Symbol (z. B. Fragezeichen für Hilfeinhalte)
• img (zB ein über <img />element eingefügtes Header-Bild )
• Schaltfläche (z. B. eine grafische Schaltfläche zum Senden)
• bg (Bild wird als Hintergrundbild in CSS verwendet)
• Sprite (Bild wird als Hintergrundbild in CSS verwendet und enthält mehrere "Versionen")

Beispiel-Name sei: icon-help.gif, img-logo.gif, sprite-main_headlines.jpg, bg-gradient.gifusw.

Also, was denkst du und wie lautet deine Namenskonvention ?

Ich platziere CSS-Dateien in einem Ordner css, Javascript in js, Bilder in images, ... Unterordner hinzufügen, wie Sie es für richtig halten. Es ist keine Namenskonvention auf der Ebene einzelner Dateien erforderlich.

Ich habe eine Menge von Frontend - Entwicklern bemerkt bewegt sich weg von cssund jszu Gunsten stylesund scriptsweil es in der Regel andere Sachen drin, wie .less, .stylund .sasswie auch für manche .coffee. Tatsache ist, dass die Verwendung spezifischer Technologieauswahlen bei der Auswahl der Ordnerorganisation eine schlechte Idee ist, selbst wenn dies jeder tut. Ich werde weiterhin den Standard verwenden, den ich von diesen hoch angesehenen Entwicklern sehe:

• src/html
• src/images
• src/styles
• src/styles/fonts
• src/scripts

Und ihr Ziel bildet Äquivalente, denen manchmal ein Präfix vorangestellt wird, destje nachdem, was sie bauen:

• ./
• images
• styles
• styles/fonts
• scripts

Dies ermöglicht es denjenigen, die alle Dateien zusammenstellen möchten (anstatt ein srcVerzeichnis aufzubrechen), dies beizubehalten, und hält die Dinge für diejenigen, die ausbrechen, klar in Verbindung.

Ich gehe tatsächlich ein bisschen weiter und füge hinzu

• scripts/before
• scripts/after

Die in zwei main-before.min.jsund main-after.min.jsSkripte zerlegt werden , eines für den Header (mit wesentlichen Elementen von normalizeund modernizrdie zum Beispiel früh laufen müssen) und afterfür das Letzte im Körper, da dieses Javascript warten kann. Diese sind nicht zum Lesen gedacht, ähnlich wie die Hauptseite von Google.

Wenn es Skripte und Stylesheets gibt, die aufgrund eines bestimmten Cache-Verwaltungsansatzes, der in den Erstellungsregeln berücksichtigt wird, sinnvoll sind, zu minimieren und in Verbindung zu lassen.

Wenn Sie heutzutage keinen Build-Prozess wie Schlucken oder Grunzen verwenden , erreichen Sie wahrscheinlich nicht die meisten der auf Mobilgeräte ausgerichteten Leistungsziele, die Sie wahrscheinlich in Betracht ziehen sollten.

/Vermögenswerte/
  / Css
  / Bilder
  / Javascript (oder Skript)
    / Minimiert
    /Quelle

Ist die beste Struktur, die ich gesehen habe und die ich bevorzuge. Bei Ordnern müssen Sie Ihrem CSS usw. keine beschreibenden Namen voranstellen.

Für große Websites, auf denen CSS möglicherweise viele Hintergrundbilder definiert, ist eine Dateinamenskonvention für diese Assets sehr praktisch, um später Änderungen vorzunehmen.

Beispielsweise:

[component].[function-description].[filetype]

footer.bkg-image.png
footer.copyright-gradient.png

Wir haben auch das Hinzufügen des Elementtyps erörtert, bin mir jedoch nicht sicher, wie hilfreich dies ist und möglicherweise für zukünftige erforderliche Änderungen irreführend sein könnte:

[component].[element]-[function-description].[filetype]
footer.div-bkg-image.png
footer.p-copyright-gradient.png

Sie können es so nennen:

/ assets / css / - Für CSS-Dateien

/ assets / font / - Für Schriftdateien. (Meistens können Sie einfach zu Google-Schriftarten gehen, um nach verwendbaren Schriftarten zu suchen.)

/ Assets / Images / - Für Bilddateien.

/ Assets / Skripte / oder / Assets / js / - Für JavaScript-Dateien.

/ Assets / Media / - Für Video und Sonstiges. Dateien.

Sie können "Assets" auch durch den Ordnernamen "Ressource" oder "Dateien" ersetzen und den Namen der Unterordner beibehalten. Eine solche Struktur des Bestellordners ist nicht sehr wichtig. Das einzig Wichtige ist, dass Sie Ihre Dateien nur nach ihrem Format anordnen müssen. wie das Erstellen eines Ordners "/ css /" für CSS-Dateien oder "/ images /" für Bilddateien.

Erstens teile ich in Ordnern: css, js, img.

Innerhalb von CSS und JS stelle ich Dateien den Projektnamen voran, da Ihre Site möglicherweise JS- und CSS-Dateien enthält, die Komponenten sind. Dadurch wird deutlich, wo Dateien für Ihre Site spezifisch sind oder sich auf Plugins beziehen.

css/mysite.main.css css/mysite.main.js

Andere Dateien könnten wie sein

js/jquery-1.6.1.js js/jquery.validate.js

Schließlich werden Bilder durch ihre Verwendung unterteilt.

• img/btn/submit.png ein Knopf
• img/lgo/mysite-logo.png ein Logo
• img/bkg/header.gif ein Hintergrund
• img/dcl/top-left-widget.jpg ein Abziehbild
• img/con/portait-of-something.jpg ein Inhaltsbild

Es ist wichtig, die Bilder organisiert zu halten, da es über 100 Bilder geben kann, die leicht miteinander vermischt und verwirrend benannt werden können.

Ich neige dazu, alles Generische zu vermeiden, wie das, was smdrager vorgeschlagen hat. "mysite.main.css" bedeutet überhaupt nichts.

Was ist "Mysite"? An diesem arbeite ich? Wenn ja, dann offensichtlich, aber ich habe schon darüber nachgedacht, was es sein könnte und ob es so offensichtlich ist!

Was ist "Main"? Das Wort "Main" hat keine Definition außerhalb des Wissens der Codierer darüber, was sich in dieser CSS-Datei befindet.

Vermeiden Sie in bestimmten Szenarien auch Namen wie "top" oder "left": "top-nav.css" oder "top-main-logo.png".
Möglicherweise möchten Sie dasselbe an anderer Stelle verwenden, und das Einfügen eines Bilds in eine Fußzeile oder in den Inhalt der Hauptseite mit dem Namen "top-banner.png" ist sehr verwirrend!

Ich sehe kein Problem damit, eine gute Anzahl von Stylesheets zu haben, um eine anständige Namenskonvention zu ermöglichen, um darzustellen, was CSS in der angegebenen Datei ist.
Wie viele davon hängen vollständig von der Größe der Site und ihren Funktionen ab und wie viele verschiedene Blöcke sich auf der Site befinden.

Ich glaube nicht, dass Sie "CSS" oder "STYLE" in den CSS-Dateinamen angeben müssen, da es sich im Ordner "CSS" oder "Styles" befindet und eine Erweiterung von .cssund hauptsächlich hat, da diese Dateien immer nur aufgerufen werden In der <head>Gegend weiß ich ziemlich genau, was sie sind.

Das heißt, ich mache dies mit Bibliothek, JS und config (etc) Dateien. zB libSomeLibrary.php oder JSSomeScript.php. Da PHP- und JS-Dateien in verschiedenen Bereichen in anderen Dateien enthalten sind oder verwendet werden, ist es hilfreich, Informationen darüber zu haben, was der Hauptzweck der Datei im Namen ist.

Beispiel: Es require('libContactFormValidation.php');ist nützlich, den Dateinamen zu sehen . Ich weiß, es ist eine Bibliotheksdatei (lib) und aus dem Namen, was es tut.

Für Bildordner habe ich normalerweise images/content-images/und images/style-images/. Ich denke nicht, dass es eine weitere Trennung geben muss, aber es kommt wieder auf das Projekt an.

Dann wird jedes Bild entsprechend seinem Namen benannt, und ich glaube auch hier nicht, dass es notwendig ist, die Datei als Bild innerhalb des Dateinamens zu definieren. Größen können nützlich sein, insbesondere wenn Bilder unterschiedliche Größen haben.

site-logo-150x150.png
site-logo-35x35.png
shop-checkout-button-40x40.png
shop-remove-item-20x20.png
etc.

Eine gute Regel lautet: Wenn ein neuer Entwickler zu den Dateien käme, würden sie sich stundenlang am Kopf kratzen oder würden sie wahrscheinlich verstehen, was die Dinge tun, und nur ein wenig Zeit für Nachforschungen benötigen (was unvermeidlich ist)?

Eine der wichtigsten Regeln ist jedoch einfach die Konstanz !
Stellen Sie sicher, dass Sie bei allen Namenskonventionen der gleichen Logik und den gleichen Mustern folgen!
Von einfachen CSS-Dateinamen über PHP-Bibliotheksdateien bis hin zu Datenbanktabellen- und Spaltennamen.

Dies ist eine alte Frage, aber immer noch gültig.

Meine aktuelle Empfehlung ist, mit etwas in dieser Zeile zu gehen:

• Vermögenswerte (oder Vermögenswerte-Web oder Vermögenswerte-www); Dieser ist für statische Inhalte gedacht, die vom Client (Browser) verwendet werden.
  • Daten; einige XML-Dateien und andere Sachen
  • Schriftarten
  • Bilder
  • Medien
  • Stile
  • Skripte
  • lib (oder Drittanbieter); Dieser ist für Code gedacht, den Sie nicht erstellen oder ändern, die Bibliotheken, sobald Sie sie erhalten
  • lib-modded (oder von Drittanbietern modifiziert); Dieser ist für Code gedacht, von dem nicht erwartet wurde, dass er geändert wird, der jedoch wie das Anwenden einer Problemumgehung / Korrektur in der Zwischenzeit vom Bibliotheksanbieter veröffentlicht werden muss
• inc (oder Assets-Server oder Assets-Local); Dieser ist für Inhalte gedacht, die serverseitig verwendet werden und nicht vom Client verwendet werden sollen, wie Bibliotheken in Sprachen wie PHP oder Serverskripte, wie Bash-Dateien
  • Schriftarten
  • lib
  • lib-modded

Ich habe die üblichen fett markiert, die anderen sind keine üblichen Inhalte.

Der Grund für die Hauptaufteilung besteht darin, dass Sie in Zukunft aus Sicherheitsgründen entscheiden können, die Webressourcen von einem CDN aus zu bedienen oder den Clientzugriff auf Serverressourcen zu beschränken.

In den lib-Verzeichnissen beschreibe ich zum Beispiel die Bibliotheken

• lib
  • jquery.com
    • jQuery
      • vX.YZ.
  • Github
    • [Pfad]
      • [Name der Bibliothek / des Projekts]
        • vX.YZ (Version)

So können Sie die Bibliothek durch eine neue ersetzen, ohne den Code zu beschädigen, und zukünftigen Code-Betreuern, einschließlich Ihnen, ermöglichen, die Bibliothek zu finden und zu aktualisieren oder Unterstützung zu erhalten.

Sie können den Inhalt auch nach seiner Verwendung organisieren, sodass Bilder / Logos und Bilder / Symbole in einigen Projekten als Verzeichnisse erwartet werden.

Nebenbei bemerkt, der Name des Assets ist aussagekräftig und bedeutet nicht nur, dass wir Ressourcen darin haben, sondern auch, dass die Ressourcen dort für das Projekt von Wert sein müssen und nicht das Eigengewicht.

Die BBC hat Unmengen von Standards in Bezug auf die Webentwicklung.

Ihr Standard ist für CSS-Dateien ziemlich einfach:

http://www.bbc.co.uk/guidelines/futuremedia/technical/css.shtml

Möglicherweise finden Sie auf ihrer Hauptseite etwas Nützliches:

http://www.bbc.co.uk/guidelines/futuremedia/