ה-CSS הגרוע ביותר שאי פעם נאלצתי לנפות באגים הגיע בתור קו בודד של 40,000 תווים. שלב בנייה שרשר וצמצם כל חלק בפרויקט, כלל סמוך לסוף היה עוקף צבע שלא צריך להיות לו, ולא הייתה דרך לראות את המפל כי לא היו מעברי שורות לראות אותו. שלחתי מספיק חזיתות על פני ערכות נושא של וורדפרס ואפליקציות React כדי לדעת שגיליון סגנונות שאינך יכול לקרוא הוא גיליון סגנונות שאינך יכול לתקן, אז בניתי א מעצב css על Toolz.dev זה הופך את קיר הטקסט הזה בחזרה ל-CSS מחורץ וניתן לסריקה בהדבקה אחת, ומצמצם אותו שוב כשאתה מוכן למשלוח. זה המדריך אליו ולמה " עיצוב CSS" בעצם אומר.
TL;DR: מעצב CSS מזין מחדש גיליון סגנונות עם מרווח עקבי כך שהוא קריא, ומקטיר CSS מפשיט את המרווח הזה החוצה כך שהקובץ קטן. הכליז מעצב css עושה את שניהם מתוך קלט אחד הוא מנתח את ה-CSS לכללים, בוררים, הצהרות, כללי at והערות, ואז מדפיס את המבנה הזה בחזרה עם הבחירה שלך של שני רווחים, ארבעה רווחים או כרטיסיות, או ממוטט אותו למקבילה התקפה הקטנה ביותר. Nested
@mediaו@keyframesבלוקים,url()ערכים ומחרוזות מצוטטות כולם שורדים ללא פגע, והכל פועל בצד הלקוח כך שה-CSS שלך לעולם לא עוזב את הדפדפן.
מהו פורמט CSS?
מעצב CSS קורא גיליון סגנונות ומשכתב אותו עם רווח לבן צפוי ועקבי הכללים עצמם אינם משתנים הבוררים, המאפיינים והערכים זהים לפני ואחרי, ודפדפן מחיל את הקובץ המעוצב בדיוק כפי שהיה מיישם את המקור מה שמשנה הוא הפריסה: הצהרה אחת בכל שורה, רווח בודד אחרי כל נקודתיים, כל בלוק מחורץ רמה אחת עמוקה יותר מההורה שלו, וסוגר סגירה בשורה משלו התוצאה היא קובץ שאדם יכול לסרוק.
מתחת למכסה המנוע הכלי לא עושה find-and-replace על whitespace, וזה המקום שבו פורמטים נאיביים משתבשים. זה מנתח את ה-CSS למבנה האמיתי שלו קודם. גיליון סגנונות הוא רצף של צמתים: כללי סגנון המשלבים בורר עם בלוק של הצהרות, כללים כמו @media או @import, הערות, וההצהרות עצמן. ברגע שה-CSS הוא עץ של הצמתים האלה, הדפסתו חזרה עם כל הזחה שאתה אוהב היא פשוטה, ובאופן מכריע, בטוחה. המנתח הוא מה שמאפשר למעצב לדעת שפסיק בפנים :not(a, b) הוא חלק מבורר בעוד פסיק בין h1 ו h2 מפריד בין שני בוררים, ושנקודה-פסיק בתוך a url() URI נתונים אינו סוף הצהרה.
אותו ניתוח מפעיל את הפעולה ההפוכה מכיוון שהכלי כבר מבין את המבנה, הוא יכול להדפיס את העץ ללא הזחה כלל, וזה בדיוק מה שהוא מזעור. לכן כלי אחד מכסה את שתי העבודות: עיצוב ומיניפיקציה הם אותו ניתוח מודפס בשתי דרכים שונות.
מה ההבדל בין עיצוב למזעור CSS?
אלה קצוות מנוגדים של אותו ציר, ולדעת מה אתה רוצה חוסך בלבול עיצוב, הנקרא גם מייפה או הדפסה יפה, מוסיף רווח לבן לטובת אנשים מזעור מסיר רווח לבן לטובת מכונות ורשתות אתה מעצב את העותק שאתה קורא ועורך; אתה מצמצם את העותק שאתה שולח לדפדפן.
ההבחנה משנה כי הם שייכים בנקודות שונות בזרימת העבודה שלך בזמן שאתה כותב CSS, או כאשר ירשת קובץ שאתה צריך להבין, אתה רוצה שהוא מעוצב. כשאתה פורס, אתה רוצה שהוא יקטן כך שהדפדפן יוריד פחות בתים וצבעים מוקדם יותר. רוב צינורות הבנייה מצטמצמים באופן אוטומטי, אבל הרבה מצבים נופלים מחוץ למבנה: קטע שהודבק מ-CodePen, גיליון סגנונות שחולץ מדף שאתה מבקר, קובץ נושא שנערך ישירות ב-CMS. עבור אלה, מעצב וממיניפר עצמאיים הם הנתיב המהיר ביותר.
הנה הפיצול במבט חטוף.
| אספקט | פורמט (beautify) | למזער |
|---|---|---|
| קהל | אנשים קוראים ועורכים | הורדת דפדפנים |
| מרחב לבן | נוסף לקריאות | הוסר לחלוטין |
| תגובות | נשמר כברירת מחדל | הוסר כברירת מחדל |
| גודל הקובץ | גדול יותר | קטן ככל האפשר |
| מתי להשתמש | כתיבה, איתור באגים, ביקורת | משלוח לייצור |
כיצד אוכל לעצב CSS עם הכלי הזה?
הזרימה קצרה בכוונה. Paste your CSS into the input, pick beautify or minify, and read the result.When beautifying, choose two spaces, four spaces, or tabs to match your project's editor settings, and decide meify to keep comments.The מעצב css מציג את הפלט עם תג גודל כך שתוכל לראות את שינוי הבתים, ומפרט כל הודעות ניתוח כגון סד לא מאוזן כאזהרות במקום להיכשל בשקט.
ארבעת השלבים נראים כך בפועל ראשית, הדבק את גיליון הסגנונות, בין אם הוא ממוזער, בכתב יד או מיוצא מכלי. שנית, לחץ על Beautify כדי להזין אותו מחדש או על Minify כדי להפשיט אותו. שלישית, עיין בפלט ובתג הגודל, והסתכל בכל אזהרה. רביעית, העתק את התוצאה ללוח שלך או הורד אותה בתור א .css קובץ מוכן לרדת לפרויקט שלך אין שלב העלאה ואין חשבון, כי כל העניין קורה בדפדפן שלך.
אם אתה עובד עם פורמטים מובנים אחרים, אותו דפוס מופיע על פני Toolz. ה פורמט json מייפה וממזער את JSON, ה פורמט html עושה את אותו הדבר עבור סימון, וה פורמט sql מטפל בשאילתות עיצוב הוא רעיון כללי, ובעל אותה צורת כלי עבור כל שפה שומר על זיכרון השריר עקבי, נושא ה ערכת כלים למפתחי אינטרנט מדריך מתפתח עוד יותר.
האם עיצוב משנה את אופן הפעולה של הסגנונות שלי?
לא, וזו הערבות שהופכת את הכלי לבטוח להפעלה על CSS ייצור. ייפוי וצמצום רק מגע ברווח לבן, ולחלופין, הערות. הם אף פעם לא מסדרים מחדש הצהרות, אף פעם לא משנים שום דבר, אף פעם לא מתמזגים או מורידים כללים, ולעולם לא משכתבים ערכים. הספציפיות של הבוררים שלך ללא שינוי, סדר המקור שמניע את המפל אינו משתנה, והתוצאה המחושבת בדפדפן שווה ערך בתים-עבור-בתים.
כדאי לציין זאת בבירור מכיוון שחלק מאופטימיזרי CSS עושים הרבה יותר מאשר למזער: הם ממזגים בוררים כפולים, מורידים כללים שהם שופטים שאינם בשימוש ומסדרים מחדש מאפיינים. טרנספורמציות אלו יכולות לשנות התנהגות בדרכים עדינות, במיוחד כאשר המפל או א !important מעורב זה מעצב בכוונה לא עושה שום דבר מזה זה כלי whitespace אם אתה מייפה קובץ, לא לערוך שום דבר, ולמזער אותו שוב, שני הקבצים זהים מבחינה תפקודית, מה שאומר שאתה יכול הלוך ושוב בחופשיות ללא חשש.
דקדוק ה-CSS המגדיר מה נחשב כרווח לבן והיכן הוא חסר משמעות מצוין ב- מודול תחביר CSS רמה 3 מה-W3C. הפורמט עוקב אחר מודל הטוקנייזר grammar's, וזו הסיבה שהוא מתייחס לרווח לבן בתוך אסימון מחרוזת או א url() שונה מהרווח הלבן בין הצהרות.
איך זה מטפל ב-@media, @keyframes וכללי at אחרים?
כללי At הם המקום שבו מעצבים מזדמנים מתפרקים, מכיוון שכלל at יכול להסתיים בנקודה-פסיק או לעטוף בלוק שלם של כללים אחרים. @import "base.css"; היא הצהרה שמסתיימת בנקודה-פסיק. @media (max-width: 600px) { ... } הוא בלוק שמכיל כללים מקוננים משלו, והכללים המקוננים האלה צריכים להיות מחורצים ברמה אחת עמוקה יותר מה- @media קו עצמו. גישת מצא והחלף אינה יכולה להבדיל בין השניים; מנתח יכול.
כי הכלי הזה בונה עץ אמיתי, מקונן @media בלוק שומר על הכללים הפנימיים שלו מחורצים בצורה נכונה בעת ייפוי וקרס נכון בעת מזעור. אותו הדבר נכון עבור @supports שאילתות תכונה ועבור @keyframes אנימציות, כאשר כל אחוז צעד כמו 0% ו 100% הוא בלוק משלו בתוך האנימציה. font הצהרות ב @font-face ושכבתי @layer כללים מטופלים באותו אופן. לא משנה לאיזה עומק קינון מגיע גיליון הסגנונות, ההזחה עוקבת אחריו.
מודעות מבנית זו מגנה גם על החלקים של ערך שנראים כמו תחביר אבל אינם. א url() יכול להכיל URI נתונים עמוס ב-base64 הכולל נקודות נקודה ונקודתיים, ו-a content מאפיין יכול להחזיק מחרוזת מצוטטת עם פלטה או פסיקים בתוכה. המעצב משאיר את החלק הפנימי של מחרוזות מצוטטות ו url() ערכים בדיוק כפי שנכתבו, כך שנתיב גופן, URI של נתוני SVG או פיסת טקסט שנוצר בתוכן לעולם לא יקרוס, מרווח מחדש או נשבר. אם אתה מטמיע לעתים קרובות תמונות כ-URI של נתונים, ה תמונה לבסיס64 כלי משתלב באופן טבעי עם זה.
כמה קטן יותר מזעור CSS עושה את הקובץ שלי?
זה תלוי לחלוטין בכמה רווח לבן וכמה הערות מכיל המקור, אבל החיסכון אמיתי גיליון סגנונות שנכתב עם הערות הזחה ותיעוד נדיבות מתכווץ בדרך כלל בעשרים עד ארבעים אחוז ברגע שהרווח הלבן הזה נעלם קובץ שכבר היה די קומפקטי יתכווץ פחות תג הגודל בכלי מציג את ספירת הבתים המדויקת לפני ואחרי עבור הקובץ שלך, כך שלעולם לא תצטרך לנחש.
בתים אלה חשובים מכיוון ש-CSS חוסם רינדור. דפדפן לא יצייר דף עד שהוא הוריד וניתח את ה-CSS בראש המסמך, כך שכל קילובייט של גיליון סגנונות הוא קילובייט בין המשתמש וההסתכלות הראשונה שלו בדף. מזעור הוא אחד מהניצחונות הזולים ביותר בביצועים הזמינים: ללא שינויי קוד, ללא סיכון להתנהגות, רק פחות בתים על החוט. בנוסף למיניפיקציה, דחיסת gzip או Brotli בשכבת השרת מכווצת את הקובץ עוד יותר, ו-CSS ממוזער נדחס היטב מכיוון שהסרת ההזחה משאירה את האסימונים המשמעותיים צפופים יותר.
Minifying הוא בן דוד קרוב של העבודה המוקדש מטח css עושה, וה מדריך css minifier הולך עמוק יותר בצד הדחיסה הסיבה ששניהם קיימים היא נוחות: לפעמים אתה נוחת על המעצב כדי לנקות קובץ ורוצה למזער אותו באותו מקום, ולפעמים אתה הולך ישר למקטנה. כך או כך הניתוח הבסיסי זהה.
האם אני יכול לשמור את ההערות שלי ולשלוט בהזחה?
כן לשניהם, ושתי האפשרויות הללו מכסות את המקרים שמעצב בגודל אחד מפספס הערות נשמרות כברירת מחדל בעת ייפוי, מכיוון שבזמן שאתה קורא ועורך CSS ההערות הן לרוב החלק השימושי ביותר בעת מזעור, הערות מוסרות כברירת מחדל כדי לשמור כל בייט, אך יש מתג לשמר אותן, הרצוי כאשר קובץ נושא כותרת רישיון או הודעת זכויות יוצרים שחייבת לשרוד בחבילה שנשלחה.
הזחה היא בחירה מכיוון שהצוותים אינם מסכימים, והמטרה של מעצב היא לסיים את אי ההסכמה על ידי יישום כלל אחד באופן עקבי. שני רווחים הם ברירת המחדל הנפוצה ביותר בפרויקטים חזיתיים מודרניים, ארבעה רווחים מתאימים לבסיסי קוד המשתמשים בו במקום אחר, וכרטיסיות מתאימות לצוותים המעדיפים אותם לנגישות או לתצורה אישית. בחר בלוק אחד וכל בלוק בפלט עוקב אחריו. עקביות היא כל הערך: כדאי להשתמש בפורמט בדיוק בגלל שהוא מסיר את ההחלטות הידניות הקטנות שאחרת סוחפות קובץ אחר קובץ על פני פרויקט. המקרה הרחב יותר לסטנדרטיזציה של הכלים שלך בדרך זו עובר דרך כלי פרודוקטיביות למפתחים מדריך.
אילו בעיות יומיומיות בעצם פותר עיצוב?
השורה בת 40,000 התווים שאיתה פתחתי היא המקרה הדרמטי, אבל השגרתיים עולים הרבה יותר פעמים אתה מעתיק כלל מדפדפן's dev tools והוא מגיע עם קיצור מחושב ומרווח לא עקבי שאינו תואם לקובץ שלך אתה יורש גיליון סגנונות מקבלן שמעולם לא הפעיל מעצב, אז סגנונות סד והזחה עוברים כל כמה מאות שורות אתה מדביק קטע מפוסט בבלוג או כלי עיצוב שמשתמש בכרטיסיות שבהן הפרויקט שלך משתמש ברווחים בכל אחד מאלה, ה-CSS עובד, אבל זה לא תואם, וקובץ שלא תואם הוא קובץ שמאט כל עריכה עתידית ומבלבל כל הבדל.
הפעלת קובץ כזה דרך הפורמט מנרמלת את כולו בבת אחת. כל בלוק מקבל את אותה הזחה, כל הצהרה נוחתת על הקו שלו, וההבדל שאתה מבצע לאחר מכן מציג רק את השינויים שביצעת בפועל ולא סערה של רעש רווח לבן. הנקודה האחרונה היא הזכייה השקטה בפריון: בסיס קוד בפורמט עקבי מייצר הבדלים נקיים, והפרשים נקיים הופכים את סקירת הקוד למהירה יותר וקל יותר לזהות רגרסיות. עיצוב אינו קוסמטי. זה מה ששומר על גיליון סגנונות קריא ככל שהוא גדל, וזו הסיבה שכל פרויקט חזיתי רציני בסופו של דבר מתקנן על פריסה אחת ואוכף אותה כלי פרודוקטיביות למפתחים המדריך מציג את המקרה הרחב יותר להסרת סוג זה של חיכוך ידני מזרימת העבודה שלך.
האם זה בטוח לפרמט CSS רגיש או קנייני?
כן, וזו החלטה עיצובית מכוונת ולא הערת שוליים כל הניתוח והעיצוב מתרחשים ב-JavaScript בתוך הדפדפן שלך. שום גיליון סגנונות לא מועלה לשרת, שום דבר לא נרשם, והכלי ממשיך לעבוד כשהחיבור שלך כבוי לאחר טעינת הדף. אתה יכול לעצב CSS המכיל שמות מחלקות פנימיים, אסימוני מערכת עיצוב שלא פורסמו, או מבנה של תכונה שלא נשלחה מבלי שאף אחד מהם יעזוב את המחשב שלך.
זה חשוב יותר ממה שזה עשוי להיראות, כי גיליון סגנונות יכול לדלוף כוונה. שמות מחלקות ושמות נכסים מותאמים אישית לרוב טלגרפים תכונות שעדיין אינן ציבוריות, והמבנה של רכיב 's CSS יכול לחשוף כיצד מוצר בנוי. מעצב צד שרת, בעל מוניטין ככל שיהיה, הוא צד שלישי שאליו אתה מוסר את המידע הזה. כלי בצד הלקוח מסיר את השאלה לחלוטין. ההיגיון מאחורי עיבוד נתוני מפתחים בדפדפן ולא בשרת הוא הנושא של כלים מקוונים לפרטיות נתונים מדריך, והוא חל על כל כלי ב- כלי קידוד איסוף, לא רק זה כאשר הפרטיות היא בחינם, אין סיבה לוותר עליה.
שאלות נפוצות
כיצד אוכל לעצב CSS באינטרנט?
הדבק את ה-CSS שלך באזור הקלט ולחץ על Beautify. הכלי מנתח את גיליון הסגנונות ומשכתב אותו עם הצהרה אחת בכל שורה והזחה עקבית. הכל פועל בדפדפן שלך, כך ששום דבר לא מועלה.
מה ההבדל בין עיצוב למזעור CSS?
עיצוב, הנקרא גם מייפה, מוסיף הזחה והפסקות שורות כך ש-CSS ניתן לקריאה עבור אנשים, בעוד שמיניפיקציה מסירה את כל הרווחים הלבנים וההערות המיותרים כך שהקובץ קטן ככל האפשר עבור דפדפנים. הכלי הזה עושה את שניהם מאותו קלט.
האם עיצוב CSS משנה את אופן פעולת הסגנונות שלי?
מס 'ייפוי ומקטן רק לשנות רווח לבן והערות, לעולם לא את הכללים, בוררים, או ערכים הדפדפן מחיל גיליון סגנונות מעוצב בדיוק באותו אופן שבו הוא מחיל את המקור.
האם זה מטפל נכון ב-@media ו-@keyframes?
כן. כללים מקוננים כגון @media, @supports ו-@keyframes מנותחים כבלוקים, כך שהכללים הפנימיים שלהם מחורצים רמה אחת עמוק יותר בעת ייפוי ונשמרים שלמים בעת מזעור.
האם זה ישבור ערכי url() או מחרוזות תוכן?
מס 'הפורמט משאיר את החלק הפנימי של מחרוזות מצוטטות וערכי כתובת url () בדיוק כפי שנכתב, כך URI נתונים, נתיבי גופן וטקסט תוכן לעולם לא ממוטטים או מרווחים מחדש.
כמה קטן יותר מזעור עושה CSS שלי?
זה תלוי בכמה רווח לבן וכמה הערות הקובץ מכיל, אבל גיליון סגנונות קריא בדרך כלל מתכווץ עשרים עד ארבעים אחוז ברגע שההזחה וההערות מוסרות. תג הגודל מציג את שינוי הבתים המדויק עבור הקובץ שלך.
האם אוכל לשמור את ההערות שלי בעת מזעור?
כן. יש מתג לשימור הערות. השאר אותו כבוי עבור הפלט הקטן ביותר, או הפעל אותו כאשר אתה צריך לשמור כותרת רישיון או הערות כתיבה בקובץ המצומצם.
האם בטוח לעצב כאן CSS רגיש?
כן כל הניתוח והעיצוב מתרחשים ב-JavaScript בתוך הדפדפן שלך שום גיליון סגנונות לא נשלח לשרת, שום דבר לא נרשם והכלי עובד כשהחיבור שלך מושבת.
ה מעצב css הוא חינמי, פועל כולו בדפדפן שלך, ואינו זקוק להרשמה ייפה גיליון סגנונות כדי לקרוא אותו, צמצם אותו כדי לשלוח אותו, ולעולם אל תנקה שוב באגים בשורה של 40,000 תווים. חקור את זה ואת שאר ה כלי קידוד על Toolz.dev.
