7 טיפים חשובים לכתיבת CSS טוב יותר

אחד הנושאים הגדולים בתכנות הוא טיפול בתחזוקה. בתרחיש של העולם האמיתי, לא תמיד מתחילים לפתח פרויקטים מאפס. לרוב, מוקצה לנו (או לוקחים) פרויקט שכבר נכתב אולי כמה שנים לפני או אפילו יותר.

כדי לעבוד ביעילות על הפרויקט, ראשית עלינו להבין את קוד המקור. זו הנקודה כאשר אנו מבינים מיד את החשיבות של קוד נקי. כמפתחים עלינו לנסות לכתוב את הקוד שלנו בצורה נקייה ככל האפשר.

זה המקרה גם לגבי CSS. ישנן כמה נקודות שעלינו לשים לב אליהן בעת ​​כתיבת CSS. בפוסט זה ברצוני לשתף אתכם בכמה מהחשובים ביותר. אני מאמין ששבע הטיפים האלה יעזרו לך לשפר את איכות קוד ה- CSS שלך.

אז בואו נתחיל ... ‌ ‌

1. יבש

DRY מייצג "אל תחזור על עצמך" . זהו עיקרון כללי לפיתוח תוכנה וניתן ליישם אותו בכל שפת תכנות, כמו גם ב- CSS. כפי שאנו יכולים להבין משמו, DRY שואפת למנוע או להפחית חזרה ככל האפשר.

לדוגמה, אנו יכולים ליצור 3 שיעורי CSS עבור 3 כפתורים כך:

.primary-button { background: blue; color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; } .form-button { background: green; color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; } .cancel-button { background: red; color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; }

לחלופין נוכל להשתמש בעקרון ה- DRY על ידי כתיבת הכללים הנפוצים פעם אחת בכיתה נוספת והכללים השונים זה מזה בכיתות אחרות:

.button { color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; } .primary-button { background: blue; } .form-button { background: green; } .cancel-button { background: red; }

כפי שאנו רואים, יישום עקרון ה- DRY מונע חזרה, מקטין את מספר השורות ומשפר את הקריאה ואפילו את הביצועים.

2. שמות

מתן שמות לבוחרי CSS הוא עוד נקודה חשובה לכתיבת CSS טוב יותר. שמו של בורר צריך להיות תיאור עצמי וקריא ...

// BAD NAMING .p { // Rules } .myFirstForm { // Rules }

בדרך כלל,

הוא תג HTML ומייצג פסקה. למעלה, אנחנו לא ממש יכולים להבין מה זה class p . כמו כן, כדאי להימנע משמות כמו myFirstForm , ואני לא ממליץ להשתמש בתיק גמלים .

במקום זאת, השתמש בשמות הצהרתיים (מופרדים באמצעות מקף עבור שמות מרובים):

// GOOD NAMING .article-paragraph { // Rules } .contact-form { // Rules }

אני חושב שהשמות הגיוניים יותר עכשיו :)

מתן שמות לדברים בתכנות אינו כה קל, אך ישנם מוסכמות שמות שונות בהן תוכלו להשתמש בפרויקט שלכם. BEM (שינוי אלמנט בלוק) הוא אחד מהם. עבדתי עם BEM בעבר ואני יכול להמליץ ​​עליו.

3. אל תשתמש בסגנונות מוטבעים

ובכן, יש ויכוחים באינטרנט לגבי זה: יש שאומרים לך לעולם לא להשתמש בסגנונות מוטבעים, בעוד שאחרים טוענים שזה יכול להיות שימושי במקרים מסוימים.

לדעתי, השיטה הטובה ביותר היא למעשה לא להשתמש בסגנונות מוטבעים. אני אתמקד כאן בסיבה שאנחנו לא צריכים.

הפרדת דאגות

על פי עקרון הפרדת החששות, יש להפריד בין עיצוב (CSS), תוכן (HTML) והגיון (JavaScript) מסיבות כמו קריאות ותחזוקה טובים יותר.

הכללת כללי CSS בתוך תגי HTML שובר כלל זה:

 Some Text 
עלינו לשמור את כללי הסטיילינג שלנו בקבצי CSS חיצוניים.

קשיים בחיפוש

בעיה נוספת בשימוש בסגנונות מוטבעים היא שאיננו יכולים לחפש אותם. אז כשאנחנו צריכים לשנות את הסטיילינג, אנחנו בדרך כלל מחפשים בוחרי CSS של אלמנט ה- HTML.

לדוגמה, בואו נשנה את גודל הגופן של הטקסט בדף האינטרנט שלנו. לשם כך, ראשית אנו מוצאים את החלק הספציפי בדפדפן בו נדרש השינוי על ידי התבוננות במבנה ה- HTML:

 Some Text 

ואז עלינו למצוא את הבורר, שהוא הכיתה מודגש הטקסט כאן. לבסוף, אנו הולכים לשיעור זה ועושים את השינויים:

.text-bold { font-size: 16px; // change the font-size to 14px font-weight: bold; }

אך אם הכללים נכתבים בסגנון מוטבע במקום בשיעורים:

 Some Text 

גם אם אנו מוצאים את תג ה- HTML, איננו יכולים לדעת האם ישנם כללים אחרים בגודל הגופן בתוך ה- HTML או לא. מכיוון שאין שימוש בבורר, עלינו לעבור על כל דפי ה- HTML בזה אחר זה, לנסות למצוא את כללי גודל הגופן האחרים ולשנות גם אותם.

האם זה לא יהיה קל יותר עם בורר CSS? אבל יש משהו גרוע עוד יותר ...

סוגיות ספציפיות / החלפה

סגנונות מוטבעים הם בעלי הספציפיות הגבוהה ביותר בקרב בוחרי CSS (כאשר איננו סופרים ! תגים חשובים ).

בהתחשב בכך שאנחנו משתמשים גם בכיתה וגם בסגנון מוטבע עבור אלמנט:

.text-bold { font-size: 16px; font-weight: bold; }
 Some Text 

כאן גודל הגופן של הטקסט יהיה 14 פיקסלים מכיוון שלסגנונות מוטבעים יש ספציפיות גבוהה יותר משיעורי CSS. כאשר אתה מבצע שינוי בכיתה:

.text-bold { font-size: 20px; font-weight: bold; }

גודל הגופן עדיין יהיה 14 פיקסלים. אז השינוי שלך בשיעור CSS לא יעבוד, מה שיגרום לך בסופו של דבר לומר:

"היי, למה קוד ה- CSS שלי לא עובד? אני שונא את CSS!"

ולהוביל אותך להשתמש בתג! חשוב שעושה את הקסם:

.text-bold { font-size: 20px !important; font-weight: bold; }

שזה לא גדול ולא מוביל אותנו לנקודה הבאה ...

4. Avoid the !important tag

OK, so your CSS wasn't working as was supposed to, and you made it work by applying the important tag:

!important

What happens next? The !important tag has the highest specificity of all CSS selectors.

You're basically saying to the browser to apply that specific rule with the !important tag always and under any circumstances. This is not good because CSS rules can differ from one selector to another, from parent selector to child.

The only way to override an important tag is to use another important tag. And this leads to using more and more important tags. Trust me, in the near future your project code will be full of !important tags, which makes your CSS code much harder to maintain. So try not to use it.

5. Use a Preprocessor

Working with a CSS Preprocessor like Sass or LESS is very useful in bigger projects. A preprocessor brings additional features to our CSS code that we normally can't do.

For example, we can define variables, functions and mixins, we can import & export our CSS files in other CSS files and we can write nested CSS code:

A preprocessor has its own syntax and later it gets translated into standard CSS (in a separate CSS file) because browsers don't understand the syntax.

I like working with Sass and have used it in various projects. I have covered some of the advantages of using a CSS Preprocessor here.

6. Use Shorthands

Some of the CSS properties like paddings, margins, fonts and borders can be written in a much simpler way by shorthands. Using shorthands helps to reduce the lines of rules.

So without shorthands, a CSS class would look like this:

.article-container { padding-top: 10px; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; margin-top: 10px; margin-bottom: 10px; margin-left: 15px; margin-right: 15px; border-width: 1px; border-style: solid: border-color: black; }

and with shorthands it looks like this:

.article-container { padding: 10px 15px 20px 15px; margin: 10px 15px; border: 1px solid black; }

You can find here more info about how to use shorthands properties and for which CSS properties they can be applied.

7. Add Comments When Necessary

Normally, quality code doesn't need comments because it should already be clear and self-descriptive. But still, in some cases, we may need to write additional explanations.

// Your Comments .example-class { // your rules }

So when you feel that some parts of the code are unclear, then don't be afraid to add comments (but on the other hand, make sure not to overdo it :)).

As a Frontend Developer with a couple of years of experience, these are the most important tips that I can suggest for improving your CSS skills. If you have any questions, or you think there are also other tips for writing better CSS, don't hesitate to comment down below.

If you want to learn more about web development, feel free to follow me on Youtube!

Thank you for reading!