SASS Bootstrap import/install καποιες αποριες αν τα κανω καλα

[Ruhl]

Αρχησα να κανω το πρωτο project με sass και directory structure SMACSS

και εχω bootstrap μεσα.
Θελω να μου πειτε αν το κανω σωστα γιατι δεν πολυ εβγαλα ακρη ολοι με τον τροπο τους το εκαναν.

 

Λοιπον εδω παρακατω ειναι το directory structure βαση SMACSS ενταξη δεν χρειαζεται να ξερετε τι και πως και τι ειναι η μεθοδολογια αυτη ,αλλου εχω απορια η οποια ειναι για την Bootstrap που φορτωνω.

 

Κατεβασα το αρχειο απο την σελιδα της bootstrap και πηρα το scss αρχειο και το ονομασα bootstrap οπως βλεπετε τον φακελο και μεσα εχει ολη την scss(προφανως εβαλα και τα js και jquery αρχεια οπου χρειαζοντε και το τεσταρα δουλευει κανονικα)

Η απορια τωρα ειναι ολα αυτα τα imports απο κατω καταληγουν σε 1 css αρχειο δηλαδη πεταει πρωτα ολη την bootstrap και μετα ολα τα δικα μου styles.Μηπως ειναι πολλα για 1 css?φορτομα κτλ? και δεν ειναι καλη πρακτικη? ειδα αλλα tutorials το χωριζαν σε 2 εστελναν την bootstrap.scss στο κλασικο css αρχειο

Δεν ξερω τι ειναι καλυτερο να βαλεις πολλα css calls  στο index.html η ολα σε ενα css αρχειο.Θα τα κανω min στο τελος αλλα και παλι μηπως βγαινουν πολυ μεγαλα γενικα, οχι οτι θα γραψω 10κ+ γραμμες css εγω.

 

Αλλη απορια ειναι για την scss της bootstrap  αν καποιο import δεν το χρησιμοποιω για να μειωσω το μεγεθος του τελικου css  μπορω να πατησω comment καποιο import εκει περα δηλαδη στο bootstrap.scss ? η ειναι κακη πρακτικη πρεπει να το κανω αλλιως?

Γενικα στην SASS οτι αρχειο sass υπαρχει και το χρησιμοποιω το βαζω με τον ιδιο τροπο κατω απο το bootstrap import? πχ animate.scss κτλ

Και τελος μια διευκρινηση, το τρεχω μεσω command line για τις αλαγες sass σε css

>sass -watch sass/main.sass:css/main.css

τωρα to bootstrap ειναι scss το αρχειο αλλα το εκανα import στο γενικο main.sass και το πηρε κανονικα και η απορια ειναι αν το νοιαζει η οχι αν ειναι sass η scss τα imports η πρεπει να συμφωνουν? η αν θελει καποια αλαγη στο command line

[XPHSTOS_]

Η δομή του SASS από το Bootstrap δεν ακολουθεί κάποια μεθοδολογία όπως OOCSS, SMACSS ή BEM.
Έχει μια δική του λογική, αυτό δεν είναι απαραίτητα κακό, απλά είναι λίγο πιο σπαζοκεφαλιά αν θέλεις να το εντάξεις σε μια από τις παραπάνω μεθοδολογίες.

Θα ήταν πιο εύκολο να έπαιρνες το απλό .bootstrap.css και να φορτώνεις αυτό.

Βέβαια δεν είναι optimal αυτό, γιατί όπως αναφέρεις και πιο μετά... είναι πολλά stylings τα οποία δεν τα θέλεις οπότε τζάμπα σου πιάνουν χώρο.
Σε αυτή την περίπτωση είτε θα χρησιμοποιήσεις κάποιον task manager πχ. Gulp και με κάποιο npm plugin θα "καθαρίσεις" το τελικό CSS από μη χρησιμοποιούμενα styles.
Είτε μπορείς να κατεβάσεις το SASS bootstrap και να αφαιρέσεις αυτά τα οποία δεν χρησιμοποιείς...
Έτσι σου μενουν λίγα αρχειάκια τα οποία μετά θα τα ταξινομήσεις στα αντίστοιχα φακελάκια της μεθοδολογίας που χρησιμοποιείς.

Το import των SCSS αρχείων καλά το κάνεις, αν δεν παίξει, δοκίμασε να βάλεις και την κατάληξη στο τέλος δηλαδή @import "bootstrap/bootstrap.scss"

Ναι, ότι αρχείο "εξωτερικό/plugin" θέλεις να φορτώσεις θα το περάσεις όπως περνάς και το bootstrap.
Δεν θυμάμαι αν μπορείς να κάνεις import και απλά .CSS αρχεία.
Αν δεν μπορείς απλά μετονόμασε τα σε .SCSS και θα παίζουν.

Τέλος, το αν πρέπει να φορτώνεις πολλά CSS αρχεία στο header ή όχι.
Εδώ ανοίγεις μεγάλη κουβέντα...
Σύμφωνα με τα δεδομένα του HTTP πολλά αρχεία = πολλά server requests άρα μεγαλύτερη καθυστέρηση, άρα τα πολλά αρχεία είναι κακό.
Από την άλλη αν σου βγει ένα αρχείο τέρας (1MB+) τότε έχεις πάλι το ίδιο πρόβλημα.
H Google αν κάνεις pagespeed test πάντα προτείνει τα Critical CSS (Above the Fold Critical) να φορτώνουν inline στο header.
Πως θα ξέρεις εσύ τι είναι critical? Μάθε και πες μας... γιατί ακόμη δεν το έχω βρει...
Φορτώνω όλη την αρχική σελίδα, τα style που χρησιμοποιούνται γιαυτή και πάλι παίρνω το ίδιο μήνυμα.
Τι κάνω μέχρι τώρα? Φορτώνω στο head ΟΛΟ το CSS minified!
Και όλα καλά
Ευτυχώς συνήθως δεν χρησιμοποιώ έτοιμα frameworks και δεν έχω τεράστια CSS.

Επιστρέφω στα πρωτόκολλα..
Εν έτη 2017, έχουμε την χαρά να έχουμε το πρωτόκολλο HTTP/2.
Σύμφωνα με αυτό λοιπόν... τα "πολλά" αρχεία δεν είναι πρόβλημα..
Άρα αν φορτώνεις ένα αρχείο με το bootstrap και ένα το δικό σου θεωρητικά θα είσαι μια χαρά!

[Ruhl]

Ωραια ,πολυ ενημερωτικα ευχαριστω για τον χρονο σου να σε καλα πηρα το confirmation back to development again 

[Predatorkill]

Οι γνωστοι browsers θελουν ssl για να λειτουργησει το http/2 (TLS) οποτε αν θες δωρεαν πιστοποιητικο τοτε πας σε let’s encrypt.

 

Just sayin