Πολλά ίδια Media Queries μέσα σε ένα αρχείο CSS

Καλησπερα σε ολους,

Ηθελα να ρωτησω αυτο που λεει ο τιτλος ουσιαστικα, ειναι κακη πρακτικη μεσα σε ενα αρχειο CSS να υπαρχουν πολλα ιδια Media Queries;

Παραδειγμα κωδικα:

.plugin-1{
	/* Styles */
}
@media (min-width: 768px){
	.plugin-1{
		/* Styles */
	}
}
@media (min-width: 993px){
	.plugin-1{
		/* Styles */
	}
}
.plugin-2{
	/* Styles */
}
@media (min-width: 600px){
	.plugin-2{
		/* Styles */
	}
}
@media (min-width: 768px){
	.plugin-2{
		/* Styles */
	}
}

Το παραπανω ειναι ενα απλο παραδειγμα, αλλα φανταστειτε οτι μπορει να εχουμε 50-100 plugins.

Τωρα θα μου πεις, γιατι να το κανεις αυτο;

Επειδη θελω να εχω τον κωδικα σε SASS για καθε Plugin μεσα σε ενα αρχειο SCSS (plugin_1.scss, plugin_2.scss, etc.) και καθε φορα που θα κανω Compile το βασικο αρχειο SCSS (αυτο στο οποιο θα εχω κανει Import ολα τα μικροτερα SCSS) για να μου παραξει το τελικο CSS, το τελικο CSS θα ειναι οπως στο παραδειγμα παραπανω.

Ελπιζω να εγινα κατανοητος, θελω να το κανω κυριως για λογους οργανωσης και ευκολοτερης διαχειρισης των Styles.

Η απορια μου ειναι αν ειναι καλη πρακτικη κυριως απο την αποψη του χρονου φορτωσης της σελιδας.

Αν υπαρχουν αλλοι αποδοτικοτεροι/εξυπνοτεροι/σωστοτεροι τροποι ή προσεγγισεις, ευπροσδεκτοι/ες.

Ευχαριστω πολυ.

Προσωπικά θα έβαζα τον κώδικα μέσα στα media queries και όχι το ανάποδο, κυρίως για το size του εικαστείτε CSS αρχείου, το όποιο εάν το πολλαπλασιάσεις με τον αριθμό των plugins που αναφέρεις ακόμη και minified – compressed να είναι θα είναι κάπως παραπάνω σε μέγεθος.

Πόλοι θα πουν ότι  δεν παίζει και ρόλο ιδιαίτερα και θα έχουν δίκιο αλλά προσωπικά γραφώ με την λογική αυτή ώστε να ξέρω αργότερα ότι στο Page speed (για λόγους SEO) θα είναι το κάθε αρχείο βελτιστοποιημένο

Γεια χαρα και ευχαριστω για την απαντηση.

Μονο που με αυτη τη λογικη, εκτος απο το plugin_1.scss, θα χρειαστω +1 αρχειο για καθε Plugin για καθε Breakpoint, ετσι δεν ειναι;

Δηλαδη στο παραπανω παραδειγμα, για το Plugin 1 θα χρειαζομουν και ενα αρχειο π.χ. plugin_1_768.scss και ενα plugin_1_993.scss.

Αν καταλαβα καλα αυτο που μου προτεινεις, δηλαδη.

Επεξ/σία 15 Οκτωβρίου 2019 από Jordan95

Εξαρτάται τη πλατφόρμα που χρησιμοποιείς και πως την στήνεις.

Δεν έχω ακριβώς εικόνα του τι θέλεις να κάνεις. Εάν τα plugins σου είναι σε μια σελίδα ένα σώμα δηλαδή τότε τα φτιάχνεις σε ένα αρχείο όλα μαζί πχ:

@media (min-width: 600px){
.plugin-1{ /* Styles */ }
.plugin-2{/* Styles */	}
}
@media (min-width: 768px){
.plugin-1{ /* Styles */ } .plugin-2{/* Styles */ }
}

Εαν είναι ξεχωριστα plugins που τα κανεις maintain ανεξρατητα τοτε πας αναγκαστικα το καθε ένα plugin το δικο του unique path, CSS & Media Query εννοειται.

 

Ειναι η δευτερη περιπτωση που αναφερεις, δηλαδη θελω το καθε Plugin να εχει το δικο του αρχειο.

Αν το κανω αυτο, θα καταληξω με εναν κωδικα CSS οπως αυτος που ανεβασα στο αρχικο ποστ.

Και η ερωτηση μου ηταν αν ειναι καλη πρακτικη να καταληξω με εναν κωδικα CSS οπως αυτος που ανεβασα στο αρχικο ποστ, δηλαδη με εναν κωδικα στον οποιο θα υπαρχουν δεκαδες φορες τα ιδια Media Queries (με διαφορετικο περιεχομενο καθε φορα, προφανως).

Αλλα με βαση αυτα που μου ειπες 1) καταλαβαινω οτι αυτο δεν ειναι ιδιαιτερο προβλημα, ισως ειναι μονο λογω του μεγεθους του τελικου αρχειου CSS και 2) σκεφτομαι οτι αυτο θα μπορουσα να το αποφυγω φτιαχνοντας ενα αρχειο CSS για καθε Plugin +1 αρχειο για καθε Plugin για καθε Breakpoint.

Δηλαδη, η δομη των αρχειων θα ειναι καπως ετσι:

/scss

• plugin_1.scss
• plugin_1_768.scss
• plugin_1_993.scss
• plugin_2.scss
• plugin_2_768.scss
• plugin_2_993.scss
• ...
• styles.scss

/css

• styles.css

Στο scss/styles.scss θα κανω Import ολα τα υπολοιπα. Το styles.scss θα ειναι καπως ετσι:

@import
  'plugin_1',
  'plugin_2',
  ...,
  'plugin_n';

@media(min-width: 768px){
  @import
    'plugin_1_768',
    'plugin_2_768',
    ...,
    'plugin_n_768',
}

@media(min-width: 993px){
  @import
    'plugin_1_993',
    'plugin_2_993',
    ...,
    'plugin_n_993',
}

Αυτη ειναι η λογικη...

Ευχαριστω και παλι.

Αυτο λεω αντι για:

• plugin_2.scss
• plugin_2_768.scss
• plugin_2_993.scss

 

• plugin_1.scss
• plugin_1_768.scss
• plugin_1_993.scss

Μόνο plugin1.scss, plugin2.scss, εαν μπορείς να μην υπάρχει extra request για καθε ενα breakpoint αλλα να είναι ολα τα media queries μεσα σε ενα CSS... έτσι τα φορτώνεις κατευθείαν. Εάν η πλατφόρμα που είσαι βέβαια φορτώνει αυτόματα τα breakpoints τοτε το πράγμα αλλάζει κάπως όπως το σκέφτομαι.

Edited

Επεξ/σία 18 Οκτωβρίου 2019 από lionheart82

Ναι αλλα αν ειναι ολα τα Media Queries μεσα σε ενα CSS, τοτε δε θα χειριζομαι το καθε Plugin μεσα απο το αρχειο του (ή εστω μεσα απο τα 2-3-4 αρχεια του), που ειναι αυτο που ηθελα εξαρχης.

Και αν χρειαστει να φτιαξω ενα νεο Plugin και να το προσθεσω σε 30 προηγουμενα Project μου, θα πρεπει να ανοιξω για καθε Project το αρχειο που θα εχω ολα τα Media Queries, να αναζητησω το σημειο που θελω να προσθεσω τα νεα Styles κλπ., και αυτο θα μου παρει πολυ χρονο, σε αντιθεση με το αν ειχα απλα να κανω επικολληση 3 νεα αρχεια...

Ελπιζω να γινομαι κατανοητος (EDIT: και οι αποριες μου να μη φαινονται παραλογες/χαζες :P).

Επεξ/σία 16 Οκτωβρίου 2019 από Jordan95

Το μέσο wordpress theme επαναλαμβάνει τα ίδια media queries 15-25 φορές στις 3000-6000 γραμμές css που έχει. Όταν για το ίδιο αποτέλεσμα εσύ φτιάξεις το τέλειο css σε 200-300 γραμμές μόνο, γραμμένο άψογα, θα κερδίσεις ελάχιστα πράγματα, το πόσες φορές θα κάνεις το ίδιο media query είναι κατά τη γνώμη μου πραγματικά ασήμαντο.

Επεξ/σία 19 Οκτωβρίου 2019 από elpenor