Frage zum Coding Stil

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Frage zum Coding Stil

    Hey Community,

    da ich nun auch anfangen wollte meine Designs selbst zu coden, habe ich vor HTML / CSS zu erlernen. Nun habe ich mich mal ein wenig eingelesen
    und herumprobiert und draus ist eine kleine Website entstanden. Nun, merke ich aber selber das der Stil vom Code nicht gerade der beste ist.

    Mir würde es sehr helfen, wenn ihr mal darüber schauen könntet und mir sagt was ihr anders machen würdet und warum.


    Gruß,
    Devine
    PS: Was ich selber weiß, dass ich die gesamten Text formatierungen mit .class a {} hätte machen können

  • Heyho und willkommen auf easy-coding :)

    Sehr lobenswert, dass du dich nach Feedback zu deinem Stil umhörst. Genau die richtige Einstellung. :thumbup:


    Gut: (Auch das muss sein :D )
    • HTML5 (Nicht selbstverständlich, da viele Tutorials noch HTML4.01/XHTML vermitteln)
    • Einrückung
    • Einheitliches Format der Klassen- und ID-Bezeichnungen (wort-wort-wort-wort ;))
    • Sinnvolle Unterteilung im Stylesheet
    • Berücksichtigst verschiedene Browser

    Nich sooo gut:
    • Du neigst dazu alles mit <div>s zu realisieren. Hier gibt es eine schöne Übersicht der HTML5-Elemente und wann sie verwendet werden. Die Navigation realisiert man zum Beispiel inzwischen oft mit einer Liste. (Kein Muss) Oder auch deine headline-content-Container, da verwendest du für den Text darin wieder DIVs. Hier bieten sich Überschriften (<h1>, <h2>, ...) und andere Textelemente an (<span>).
    • Du verwendest ids mehrfach. Eine id darfst du allerdings nur genau einmal auf einer Seite verwenden. Verwende am besten den Validator vom w3c. Der zeigt dir fehle Fehler.
    • * {margin:0px;padding:0px} verwendet man nicht mehr. (Siehe normalize.css in den BTWs)
    • Zeilenumbrüche <br> nicht für das Erzeugen von Abständen verwenden, sondern dann wirklich per CSS padding oder margin verwenden.

    BTWs:
    • Verwende normalize.css oder ein ähnliches Stylesheet. Damit merzt du viele Browserunterschiede aus.
    • Einheitliches System für die Reihenfolge der CSS-Eigenschaften überlegen. Alphabetisch sortieren hat sich bei vielen als sinnvoll herausgestellt, da man die Sachen einfach schneller findet.
    • Charset deklarieren.

    Gruß
    Arno

  • Danke schon einmal!
    Oder auch deine headline-content-Container,
    da verwendest du für den Text darin wieder DIVs. Hier bieten sich
    Überschriften (<h1>, <h2>, ...) und andere Textelemente an
    (<span>).


    Dann hab ich dazu eine Frage, angenommen ich habe mehrere <h1> im Stylesheet aber alle sollen verschieden aussehen, gibt es eine Möglichkeit die <h1> von einander zu trennen?
    Ich meine das zum Beispiel so:

    .class1.h1 { color: #fff }

    .class2.h1 { color: #000}

    Ebenso frage ich mich gerade ob es möglich ist das man eine Klasse über eine ID anspricht. Angenommen ich habe eine ID namens Main und eine ID namens MainMenu. Zur übersicht möchte ich die Klassen im Stylesheet so ansprechen :

    #ID1.class1{}
    #ID2.class2 {}
    #ID3.class3{}

    Ist sowas ein dauerhafter richtiger weg und kann ich so Klassen Namen doppelt verwenden (Sprich #ID1.Content , #ID2.Content -> beide haben unterschiedliche Eigenschaften)?

  • Devine schrieb:

    Danke schon einmal!
    Oder auch deine headline-content-Container,
    da verwendest du für den Text darin wieder DIVs. Hier bieten sich
    Überschriften (<h1>, <h2>, ...) und andere Textelemente an
    (<span>).


    Dann hab ich dazu eine Frage, angenommen ich habe mehrere <h1> im Stylesheet aber alle sollen verschieden aussehen, gibt es eine Möglichkeit die <h1> von einander zu trennen?
    Ich meine das zum Beispiel so:

    .class1.h1 { color: #fff }

    .class2.h1 { color: #000}

    Ebenso frage ich mich gerade ob es möglich ist das man eine Klasse über eine ID anspricht. Angenommen ich habe eine ID namens Main und eine ID namens MainMenu. Zur übersicht möchte ich die Klassen im Stylesheet so ansprechen :

    #ID1.class1{}
    #ID2.class2 {}
    #ID3.class3{}

    Ist sowas ein dauerhafter richtiger weg und kann ich so Klassen Namen doppelt verwenden (Sprich #ID1.Content , #ID2.Content -> beide haben unterschiedliche Eigenschaften)?


    Ja dafür gibt es eine Möglichkeit.
    Nehmen wir mal an, du hast wie in deinem Code

    Quellcode

    1. ​<div id="menu">
    2. <div id="logo">
    3. <div class="logo-text">
    4. <h1>Homepage Titel</h1>
    5. </div>
    6. </div>
    7. <div id="menu-pos">
    8. <div class="menu-text">
    9. <a href="#">Homepage</a>
    10. <a href="#">News</a>
    11. <a href="#">Informationen</a>
    12. <a href="#">Downloads</a>
    13. <a href="#">Hallo</a>
    14. <a href="#">Impressum</a>
    15. <a href="#">Exit</a>
    16. </div>
    17. </div>
    18. </div>
    Alles anzeigen


    So kannst du folgenden CSS Code verwenden um verschiedene h1,h2... klassen zu bestimmen:
    ​

    Quellcode

    1. #menu #logo .logo-text h1{
    2. // Hier dein Style Code \\
    3. }
    4. #menu #menu-pos .menu-text a {
    5. // Hier dein Style Code \\
    6. }
    7. ​


    Der CSS Code wird wiefolgt bearbeitet.
    Wenn h1 inside .logo-text, .logo-text inside #logo, #logo inside #menu
    #menu < #logo < .logo-text < h1

    Wenn a inside .menu-text, .menu-text inside #menu-pos, #menu-pos inside #menu
    #menu > #menu-pos > .menu-text > a

    Also wird eine Logische Abfrage der Elemente gemacht.
    Du darfst aber nicht die " "(Leerzeichen) zwischen den einzelnen Elementen im CSS-Code vergessen

  • Morgen,

    ich danke euch für die Antworten. Ich wusste bisser gar nicht das ich die <h1> in eine class setzen kann.
    Ich werde nun weniger in <div>'s realisieren und mir die HTML5 Elemente genauer anschauen.


    Quellcode

    1. #menu #menu-pos .menu-text a {


    Auch sehr praktischt, hilft bestimmt bei der Übersicht, sollte man einen großen Code haben.



    Danke!