css/html menu

[Xvipes]

Το βρήκα είναι θέμα Width!

Το κάθε li θέλει width:100% αφού έχεις float:left ώστε να πάει από ένα κάτω από το άλλο

 

Γιατί είναι best practice; Πως αποδεικνύεται/δικαιολογείται αυτό;

 

Γιατί το λέει η google.

 

Και συγκρίνεις ανόμοια πράγματα. Η google κάνει suggestions ενώ το w3c βγάζει specs. Μην τα μπερδεύεις.

Μου λες λοιπόν να ακολουθώ suggestions over specs; Αυτό λες;

 

Τα suggestions έχουν γραφτεί με βάση τα specs.

Αν θες όμως να είσαι google compliant τότε δέχεσαι τα παραπάνω suggestions.

Ελπίζω να μη χρειαστεί να γράψω γιατί πρέπει/θες να είσαι google compliant.

 

Το παραπάνω link το έβαλα για κάποιον που θα ήθελε να τα έχει κάπου μαζεμένα σαν quick reference.

[foutzos]

Τα αυτάκια ισχύουν για παντού; ακόμα  και στα meta tags ; αντί για αυτό <meta content='1 days' name='revisit-after'/>

να το αλλάξω σε αυτό <meta content="1 days" name="revisit-after"/> ;

[exarhis]

Πάντως σε Iframe το 

<iframe src='http://www.w3schools.com'></iframe>

 δε δουλεύει χρειάζεται "

[alou]

Μια χαρά δουλεύει, μήπως να τσεκάρεις πρώτα και μετά να δηλώνεις κάτι? και έλεος, μακριά από w3schools.

http://www.webplatform.org/

[geomagas]

Γιατί το λέει η google.

 

 

Τα suggestions έχουν γραφτεί με βάση τα specs.

 

Αν θες όμως να είσαι google compliant τότε δέχεσαι τα παραπάνω suggestions.

..."google compilant"; :-D

 

Ελπίζω να μη χρειαστεί να γράψω γιατί πρέπει/θες να είσαι google compliant.

 

Όχι εντάξει, ξέρω. Αν δεν το κάνεις θα σε κάνει "ντα" η google...

 

 

Τα αυτάκια ισχύουν για παντού; ακόμα  και στα meta tags ; αντί για αυτό <meta content='1 days' name='revisit-after'/>

να το αλλάξω σε αυτό <meta content="1 days" name="revisit-after"/> ;

 

Ισχύουν για όλα τα attribute values. Μάλιστα στην html5 προσδιορίζονται οι κανόνες με ακόμα μεγαλύτερη σαφήνεια. Ο alou τα είπε καλύτερα από μένα.

[StathisG]

@Xvipes, αν κι εγώ της σχολής των double quotes είμαι, αυτό που παραθέτεις είναι απλά ένα style guide που χρησιμοποιεί η ίδια η Google στα open source projects της.

 

Όπως εξηγούν εδώ (τα bold έχουν προστεθεί από εμένα):

 

Every major open-source project has its own style guide: a set of conventions (sometimes arbitrary) about how to write code for that project. It is much easier to understand a large codebase when all the code in it is in a consistent style.

“Style” covers a lot of ground, from “use camelCase for variable names” to “never use global variables” to “never use exceptions.” This project holds the style guidelines we use for Google code. If you are modifying a project that originated at Google, you may be pointed to this page to see the style guides that apply to that project.

 

[Xvipes]

@Xvipes, αν κι εγώ της σχολής των double quotes είμαι, αυτό που παραθέτεις είναι απλά ένα style guide που χρησιμοποιεί η ίδια η Google στα open source projects της.

 

Όπως εξηγούν εδώ (τα bold έχουν προστεθεί από εμένα):

Βρε μαζί σου δεν είπα ότι αν δεν ακολουθήσεις το style guide της google θα είσαι λάθος, απλά προσωπικά δεν έχω βρει κάτι άλλο να τα έχει μαζεμένα.Παρέθεσα το link για να υπάρχει σε περίπτωση που κάποιος θέλει να δει ποιος θα ήταν ένας σωστός τρόπος για κάτι.

 

Επιμένω να ακολουθώ την google γιατί:

• Το w3c είναι χειρότερο και από δικαστήριο στο τι πρέπει και τι δε πρέπει.(βλ. w3c validation plugins)
• Αν η google δεν εγκρίνει δε συμφέρει κανέναν
• Δεν έχει τύχει να βρω κάποιο άλλο ολοκληρωμένο guide 

Π.χ αν έχεις έναν css selector που αποτελείται από 2 λέξεις ποιος είναι ο πιο σωστός τρόπος να το γράψεις?

fooBar{}
foobar{}
foo-bar{}
foo_bar{}

Προφανώς πουθενά δε θα "χτυπήσει" λάθος αλλά με βάση της google το guide πλέον ξέρω ότι είναι πιο σωστό να το γράψεις foo-bar{ }, κάτι που δε το βρήκα στο w3(δεν έψαξα και τρελά αλλά οκ).

 

Εσείς πέρα από εμπειρικά από που συμβουλεύεστε best practices και δεν σας αρέσει το guide της Google?(για να έχει και νόημα όλη αυτή η κουβέντα)

[geomagas]

Βρε μαζί σου δεν είπα ότι αν δεν ακολουθήσεις το style guide της google θα είσαι λάθος, απλά προσωπικά δεν έχω βρει κάτι άλλο να τα έχει μαζεμένα.Παρέθεσα το link για να υπάρχει σε περίπτωση που κάποιος θέλει να δει ποιος θα ήταν ένας σωστός τρόπος για κάτι.

Εγώ ξέρω ότι

Σωστό!=Λάθος

Ή χάνω κάτι;

 

Το w3c είναι χειρότερο και από δικαστήριο στο τι πρέπει και τι δε πρέπει.(βλ. w3c validation plugins)

Αφού είναι ο θεματοφύλακας του spec και του ζητάς να σου ελέγξει αν ο κώδικάς σου τo ακολουθεί, τι περιμένεις να σου πει; Να σου κάνει σκόντο;

 

Αν η google δεν εγκρίνει δε συμφέρει κανέναν

Ναι... γιατί θα τη ρωτήσουμε...

Δηλαδή ας πούμε ότι δεν εγκρίνει τα single quotes, και στην πραγματικότητα όλη αυτή η συζήτηση δεν είναι για γέλια. Ποιον ακριβώς δεν συμφέρει αυτό;

 

Δεν έχει τύχει να βρω κάποιο άλλο ολοκληρωμένο guide

...επειδή θα ήταν άχρηστο ίσως;

 

Π.χ αν έχεις έναν css selector που αποτελείται από 2 λέξεις ποιος είναι ο πιο σωστός τρόπος να το γράψεις?

fooBar{}
foobar{}
foo-bar{}
foo_bar{}

Αυτός που ταιριάζει με το element/class/id που θέλεις να κάνεις select. Γιατί πρέπει να βρίσκεις διααφορές εκεί που δεν υπάρχουν;

 

Προφανώς πουθενά δε θα "χτυπήσει" λάθος αλλά με βάση της google το guide πλέον ξέρω ότι είναι πιο σωστό να το γράψεις foo-bar{ }, κάτι που δε το βρήκα στο w3(δεν έψαξα και τρελά αλλά οκ).

.........

 

Εσείς πέρα από εμπειρικά από που συμβουλεύεστε best practices και δεν σας αρέσει το guide της Google?(για να έχει και νόημα όλη αυτή η κουβέντα)

 

Best practices για html και css; Από τα specs φυσικά! Τι λέμε τόση ώρα;

Ότι ακολουθεί τα specs είναι best practice. Ότι δεν τα ακολουθεί, δεν είναι.

Τόσο απλά.

[StathisG]

Η ένστασή μου (και των υπολοίπων φαντάζομαι) είναι σε εκφράσεις του στυλ:

 

(...) Παρέθεσα το link για να υπάρχει σε περίπτωση που κάποιος θέλει να δει ποιος θα ήταν ένας σωστός τρόπος για κάτι.

 

Επιμένω να ακολουθώ την google γιατί: (...) Αν η google δεν εγκρίνει δε συμφέρει κανέναν

 

(...) αλλά με βάση της google το guide πλέον ξέρω ότι είναι πιο σωστό να το γράψεις foo-bar{ }, (...)

 

Εσείς πέρα από εμπειρικά από που συμβουλεύεστε best practices και δεν σας αρέσει το guide της Google? (...)

 

Αυτό που έγραψα και πριν είναι πως δε σου προτείνει η google να ακολουθήσεις αυτό το στυλ στα δικά σου projects, ούτε αποτελεί best practice, και εννοείται πως δεν υπάρχει καν αναφορά μεταξύ σωστού και λάθους. Αναφέρει απλά τι κάνουν αυτοί στα δικά τους open source projects, και σου λένε πως αν ασχοληθείς με κάποιο open source projects τους, πρέπει να γράψεις με αυτόν τον τρόπο για λόγους συνοχής και μόνο. Το λένε ξεκάθαρα και στο quote που έβαλα πριν (απομονώνω την πρόταση που το αναφέρει):

 

It is much easier to understand a large codebase when all the code in it is in a consistent style.

 

Best practice για 'μένα είναι κάποια τεχνική η οποία έχει καλύτερα αποτελέσματα από μία άλλη γι' αντικειμενικούς λόγους (π.χ. έχει καλύτερη απόδοση το να χρησιμοποιήσεις την τάδε function αντί της άλλης που έχει το ίδιο αποτέλεσμα, αλλά το κάνει με άλλον τρόπο).

 

Από εκεί και πέρα πολλές εταιρείες και οργανισμοί έχουν τα δικά τους style guides για τους ίδιους λόγους, ιδιαίτερα όταν το project θα διατηρηθεί για χρόνια και θα περάσει από πολλά χέρια. Για να μη καταλήξει δηλαδή το Χ project να έχει τους μισούς CSS selectors ως fooBar και τους άλλους ως foo-bar, κλπ, με αυτό να είναι εφαρμόσιμο και σε οποιαδήποτε γλώσσα προγραμματισμού, ή ακόμα και σε μικρότερα sub-sets όπως ένα framework μιας γλώσσας προγραμματισμού.

 

Btw, να μια λίστα με CSS style guides: http://css-tricks.com/css-style-guides/

 

Επιστέφοντας σε αυτό που έλεγα πως είναι εφαρμόσιμο σε οποιαδήποτε γλώσσα προγραμματισμού, δες για παράδειγμα τι συνέβη με την PHP (την ίδια τη γλώσσα, όχι κάποιο project γραμμένο σε αυτή), για την οποία απ' ότι είχα διαβάσει δεν είχαν ορίσει κάποια coding standards/conventions (κάτι που νομίζω θα γίνει στην PHP 6, αλλά "don't quote me on that" που λένε κι οι άγγλοι): Κατέληξαν με ένα ό,τι να 'ναι ονομασίες και τρόπο γραφής στις functions τους.

 

Για παράδειγμα (από εδώ) υπάρχουν οι str_replace, strlen, str_word_count, και strcasecmp, δηλαδή τρεις λαλούν και δυό χορεύουν.

 

Γιατί όχι string_replace, string_length, string_word_count, και string_case_comparison; Ή γιατί όχι strReplace, strLength, strWordCount, και strCaseComparison. Κατά τη γνώμη μου, ένας απλός κανόνας (πχ όλα τα ονόματα των functions θα είναι camel-cased) θα έλυνε όλα αυτά τα προβλήματα, αλλά δε σημαίνει πως το camel-case είναι καλύτερο από τα underscores (εφόσον δεν επηρεάζει το performance), είναι απλά μία επιλογή που πρέπει να γίνει για λόγους συνοχής. Δεν τίθεται σύγκριση σωστού και λάθους δηλαδή.

[foutzos]

να ρωτήσω και εγώ τώρα που δεν ξέρω από αυτά.

 

Αν μου βγάζει σφάλματα μεταμορφώνοντας όλα τα ' σε ". να μην κάνω καθόλου ώστε να είναι ενιαίος ο κώδικας με ' η να κάνω όσα δεν βγάζουν σφάλματα και να χρησιμοποιώ και αυτά ' και αυτά ";

[geomagas]

να ρωτήσω και εγώ τώρα που δεν ξέρω από αυτά.

 

Αν μου βγάζει σφάλματα μεταμορφώνοντας όλα τα ' σε ". να μην κάνω καθόλου ώστε να είναι ενιαίος ο κώδικας με ' η να κάνω όσα δεν βγάζουν σφάλματα και να χρησιμοποιώ και αυτά ' και αυτά ";

 

Ποιος σου βγάζει σφάλμα; ο browser; Δεν νομίζω...

 

Εκτός κι αν κάνεις κάτι τέτοιο:

<tag attribute='value">

...που πάλι δεν νομίζω...

 

Δεν χρειάζεται να είναι "ενιαίος" ο κώδικάς σου, καθ' οιονδήποτε τρόπο.

 

Απόδειξη; Κάνε δεξί κλικ και "view page source" στη σελίδα που βλέπεις τώρα. Μέτρησε πόσα attributes έχουν μονά quotes και πόσα διπλά. Και πόσα tags έχουν ανακατεμένα μονά και διπλά!

 

Κι όμως, είναι ένα αξιοπρεπέστατο site, και κανείς browser δεν παραπονέθηκε ποτέ! (και πολύ καλά έκανε).

[Maxalos]

εγώ είχα κάνει ένα με js παλιότερα, ρίξε μια ματιά http://jsfiddle.net/W7hZ5/3/

[foutzos]

Ποιος σου βγάζει σφάλμα; ο browser; Δεν νομίζω...

 

Εκτός κι αν κάνεις κάτι τέτοιο:

<tag attribute='value">

...που πάλι δεν νομίζω...

 

Δεν χρειάζεται να είναι "ενιαίος" ο κώδικάς σου, καθ' οιονδήποτε τρόπο.

 

Απόδειξη; Κάνε δεξί κλικ και "view page source" στη σελίδα που βλέπεις τώρα. Μέτρησε πόσα attributes έχουν μονά quotes και πόσα διπλά. Και πόσα tags έχουν ανακατεμένα μονά και διπλά!

 

Κι όμως, είναι ένα αξιοπρεπέστατο site, και κανείς browser δεν παραπονέθηκε ποτέ! (και πολύ καλά έκανε).

 

πχ αν αλλάξω αυτό <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin,greek-ext,greek'rel='stylesheet' type='text/css'/> με αυτάκια " . Ta fonts δεν μου τα εμφανίζει.

[geomagas]

Δουλεύει κι έτσι κι αλλιώς.

 

Είμαι βέβαιος ότι το πρόβλημά σου είναι κάπου αλλού.

[foutzos]

Δουλεύει κι έτσι κι αλλιώς.

 

Είμαι βέβαιος ότι το πρόβλημά σου είναι κάπου αλλού.

 

Ωρες ώρες η λύση είναι μπροστά στα μάτια μου και δεν τη βλέπω. άλλαζε γραμμή στο rel = stylesheet και δεν άλλαξα και τα 6 ' σε ".