כשבונים אתר, לפעמים מוצאים את עצמנו עם קובץ CSS ענק ומבולגן. לוקח המון זמן למצוא את X ולשנות אותו.
יש שיטה חדשה שמצריכה הקצבת זמן לימוד, אבל היא די פשוטה – אפשר להבין את העקרונות תוך כמה דקות.
אני יודע כמה זה נוח להישאר בדרך המוכרת והקלה – כתיבה ישירות בCSS – אבל אני מאמין לכם שאחרי שתתנסו בשיטה החדשה יותר שמיד אדבר עליה, תשאלו את עצמכם למה לא עברתם לכתוב ככה קודם. לפחות זה מה שהיה במקרה שלי.
SCSS
על SCSS שמעתם?
זו דרך נוחה וכיפית לכתוב CSS.
בעזרת SASS, נוכל לפצל את קובצי הCSS שלנו לכמה קבצים נפרדים, לפי חלקים, ואז לייבא את כולם לקובץ אחד (באופן אוטומטי).
למשל – קובץ Header. קובץ Footer. קובץ לרכיב (Component) מסויים כמו רכיב חיפוש, שיתכן שנכניס בכמה מקומות באתר.
זה רק יכולת אחת וחזקה של SCSS – יש עוד הרבה מאוד. אחת האהובות עליי זו שיטת הNesting.
איך לסדר את קובצי הSCSS שלנו בתיקיה
בדיוק כמו שבחדר שלנו לא נניח את כלי הכתיבה על הרצפה, אלא נדאג להם למקום קבוע איפשהו על השולחן/במגירה, כך גם רצוי לארגן את קובצי הSCSS שלנו.
אם נדע איפה כל דבר, יהיה לנו קל יותר.
חדר אתם יודעים לסדר – אבל אם לא התנסתם בפיצול קובץ CSS לחלקים, הנה קווים מנחים שהם לדעתי חובה לכל מתכנת לדעת.
אם תשמרו על הקווים המנחים האלה, זה ייתן לכם יתרון מטורף: כך שגם אם תזנחו את הפרויקט ותחזרו אליו עוד שנה, או תעבדו עם צוות של מתכנתים, תדעו איפה נמצא כל דבר די באינטואיטיביות.
קוראים לשיטת הסידור הזו תבנית ה7-1
היא בנויה מ-7 תיקיות ראשיות שכל קבציהן מיובאות לקובץ SCSS אחד.
זה ממש בקצרה. אני ממליץ לכם להיכנס ולחקור עוד.
אני בעצמי לא מודע לכל היכולות של SCSS, יש עוד הרבה מה ללמוד.
אבל המעט שאני יודע עוזר לי לכתוב קוד בצורה מהירה פי כמה, נוחה וקלה לקריאה, ואני בחיים לא אחזור לשיטה הישנה בעבודות השוטפות, פשוט כי זה כמו לחזור לעלות במדרגות לקומה 5 כשהתרגלנו להשתמש במעלית.