16 روش برای بهبود سریع مهارت های CSS


آیا شما یک مبتدی CSS هستید که مدام از خود می‌پرسید آیا کارها را درست انجام می‌دهید؟ آیا تا به حال به این فکر کرده اید که آیا کد نویسی شما همتراز است؟ اگر چنین است، پس واضح است که زمان یادگیری برخی از بهترین روش های CSS است.

با رعایت دستورالعمل های اولیه برای نوشتن CSS، می توانید اطمینان حاصل کنید که کدی تمیز، خوانا و به راحتی قابل پشتیبانی تولید می کنید. می دانید، نوعی که به دیگران اجازه می دهد بفهمند او چه کار می کند و باعث می شود که به او نگاه کنید.

اگر یکی از آن چیزها (یا هر دو) چیزی است که شما آرزوی آن را دارید، بیایید در مورد بهترین روش‌های CSS صحبت کنیم که به شما امکان می‌دهد این کار را انجام دهید.

1. کد خود را خوانا کنید

بهترین شیوه های css
منبع تصویر: Mike Gunitz/Unsplash

قالب بندی مناسب تضمین می کند که کد برای شما و دیگر توسعه دهندگان قابل خواندن است. اگرچه اجرای سخت افزار (مانند مرورگرها) ضروری نیست، اما ساده کردن خواندن CSS یک تمرین خوب است. انجام این کار درک، نگهداری و کار با آن را آسان تر می کند.

ما یک مقاله کامل درباره قالب‌بندی کد و نظرات نوشته‌ایم، بنابراین در اینجا به همه آن‌ها نمی‌پردازیم. با این حال، در اینجا یک مرور کلی وجود دارد (برای همه چیز، مقاله را بررسی کنید):

  • فرورفتگی تیغه – چه از چندین برگه یا فاصله استفاده کنید (تعداد را محدود کنید!)، حتما جفت های مقدار CSS خود را تورفتگی کنید. هنگام استفاده از پرسش‌های رسانه، آنها را در کنار هم قرار دهید تا وابستگی نشان داده شود.
  • از شکستن خطوط استفاده کنید – صفات ویژگی های CSS را با کاماهای خط جدا کنید و جفت های مقدار را در خط خود قرار دهید.
  • قوانین را به ترتیب حروف الفبا مرتب کنید – پیدا کردن آنچه که به دنبال آن هستید آسان است.
  • از نظرات استفاده کنید – شامل نظرات برای جدا کردن بخش های مختلف شیوه نامه از یکدیگر. علاوه بر این، فهرستی از مطالب را در ابتدای فایل در نظر بگیرید. همچنین می‌توانید نظراتی را با اطلاعات مهمی که ممکن است بعداً فراموش کنید یا برای درک وجود برخی از پرچم‌ها مهم باشد (مثلاً پشتیبان‌گیری برای مرورگرهای قدیمی) بگذارید.

در اینجا نمونه ای از کدهای CSS با فرمت مناسب آورده شده است:

.search-submit {
	border-radius: 0 2px 2px 0;
	bottom: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 42px;
}

@media screen and (min-width: 56.875em) {
	.site-header {
		padding-right: 4.5455%;
		padding-left: 4.5455%;
	}
}

اگرچه قراردادهای فرمت نشانه گذاری CSS متفاوتی وجود دارد، بخش مهم این است که ثابت بمانید. هیچ چیز یک فایل CSS یا نویسنده آن را آشفته تر از قالب بندی ناسازگار نمی کند. بنابراین، به ترجیحات خود بسنده کنید و به آنها پایبند باشید. اگر راهنمای سبک وجود دارد، به آن پایبند باشید.

وقتی ثابت می‌مانید، حتی اگر همه چیز را به هم ریخته باشید، تصحیح همه اشتباهات یک‌باره بسیار آسان‌تر است (ممنون، پیدا کنید و جایگزین کنید!).

2. شیوه نامه خود را به خوبی قالب بندی کنید

فهرست مطالب در شیوه نامه css

نه تنها باید کد خود را خوانا کنید، بلکه باید مطمئن شوید که شیوه نامه(های) CSS شما به راحتی قابل کنترل و سازماندهی مناسب هستند. در اینجا چند نکته و بهترین روش برای آن وجود دارد:

  • از رویکرد بالا به پایین استفاده کنید استایل ها را در فایل خود همانطور که در مرورگر ظاهر می شوند مرتب کنید. این بدان معنی است که از دستور زبان عمومی تر به نمادهای خاص تر حرکت می کنیم. به عنوان مثال، با شروع bodyو aو p، سپس سرفصل ها، سپس موارد خاص تر.
  • فایل ها را به بخش ها تقسیم کنید – سبک ها را در حوزه های موضوعی گروه بندی کنید: تایپوگرافی، پیوندها، ناوبری و غیره. حتی صفحات جداگانه نیز می توانند بخش مخصوص به خود را داشته باشند، اگر با طراحی خاص خود ارائه شوند. همچنین نکات قبلی در مورد نظرات و ایجاد فهرست مطالب را ببینید. علاوه بر این، می‌توانید برای برجسته کردن بخش‌های خاص، نظر بدهید.
  • از شیوه نامه های جداگانه برای پروژه های بزرگتر استفاده کنید – اگر نشانه گذاری شما شامل هزاران خط کد باشد، ممکن است منطقی باشد که آن را به چندین فایل برای بخش های مختلف سایت خود تقسیم کنید. این امر به ویژه در صورتی صادق است که آن بخش‌ها طرح‌بندی کاملاً متفاوتی داشته باشند (مانند یک فروشگاه آنلاین در مقابل یک صفحه درباره). در این مورد، یک برگه بزرگتر برای استایل های جهانی و جدا کردن فایل های کوچکتر برای بخش های خاص سایت، منطقی تر است.

3. خود را از تکرار خلاص کنید

کد تکراری کدی است که فضای بیشتری را نسبت به نیاز خود اشغال می کند. آنها کندتر بارگیری می شوند و همچنین نگهداری و عیب یابی آنها دشوارتر است. بنابراین، مهم است که تا حد امکان از تکرار اجتناب شود. در اینجا چند نکته برای آن وجود دارد:

  • از خشک استفاده کنید (“خودت را تکرار نکن”) موارد تکراری را در کدنویسی خود بررسی کنید. آنها کد شما را کندتر و خواندن آن را سخت تر می کنند. موارد را یک بار علامت گذاری کنید، سپس در صورت لزوم دوباره آنها را در زیر بنویسید.
  • از مخفف CSS استفاده کنید CSS امکانات زیادی را برای تعیین چندین ویژگی به طور همزمان فراهم می کند. مثلا، margin-topو margin-bottomو margin-right، و margin-left همه آنها را می توان در یک فایل تعریف کرد margin تبلیغات. فضای کمتری اشغال می کند، کد کمتری استفاده می کند و عملکرد خوبی دارد و در نتیجه عملکرد بهتری دارد.
  • در صورت امکان انتخابگرها را ترکیب کنید – اگر چندین عنصر، مانند تعاریف چاپی برای سرفصل ها و پاراگراف ها، همه سبک های یکسانی دارند، مطمئن شوید که همه آنها در یک مجموعه قوانین فراخوانی واحد ترکیب شده اند. نیازی به تکرار همان کدنویسی جداگانه نیست.
  • از جداکننده های اضافی اجتناب کنید برای دستیابی به نتایج، آنقدر که نیاز دارید با محدودیت‌های خود مشخص باشید، اما هرگز فراتر از آن نباشید. پایبندی به این امر همچنین بازنویسی نشانه گذاری با CSS خاص تر را در صورت نیاز آسان تر می کند. برعکس، از انتخابگرهایی که بیش از حد عریض هستند خودداری کنید زیرا از قدرت پردازش بیشتری استفاده می کنند.

4. مهم: اجتناب کنید! مهم

بعدی در بهترین شیوه های CSS ما این است که سعی کنیم از استفاده خودداری کنیم !important تا حد امکان علامت گذاری کنید

احتمالاً می‌دانید که این گزینه هسته‌ای انتشار یک اعلامیه CSS در تمام طول مسیر بدون بازنویسی آن است. مشکل این است که اگر بیش از حد به آن تکیه کنید، ممکن است به مقدار زیادی از آن نیاز داشته باشید، که منجر به پایان یافتن کد CSS شما به چیزی می‌شود که ما goshdarn mess می‌نامیم (برای استفاده از اصطلاح فنی).

حقیقت این است که اگر روی آن حساب کنید !important برای اینکه نشانه گذاری خود را به درستی انجام دهید، احتمالاً باید مدتی را صرف یادگیری در مورد یک ویژگی خاص CSS کنید. اگر می‌دانید حریم خصوصی چگونه کار می‌کند، معمولاً ایجاد یک انتخابگر هدفمندتر برای بازنویسی آنچه می‌خواهید بازنویسی کنید، دشوار نیست.

نمونه حریم خصوصی css

موارد دیگر که در آن !important استایل های درون خطی یا شیوه نامه های خارجی اغلب استفاده می شود. اگر با این موارد روبرو شدید، باید از آنها به عنوان فرصتی برای فکر کردن به سازماندهی و ساختار بهتر روش های خود استفاده کنید تا اینکه هسته ای شوید.

به طور خلاصه، پشتیبان گیری کنید !important برای اهداف آزمایشی اما برای جلوگیری از آن در محیط های تولید.

5. استفاده از یک چارچوب را در نظر بگیرید

فریمورک های CSS می توانند بسیار مفید باشند و به شما در شروع سریع کمک کنند. مانند سایر فریم ورک ها، عناصر از پیش ساخته شده ای دارد که می توانید از آنها برای ایجاد طرح بندی سریع و بدون نیاز به شروع از ابتدا استفاده کنید. اگر می‌خواهید درباره چارچوب‌های CSS اطلاعات بیشتری کسب کنید، می‌توانید در Tailwind، Bootstrap یا Bulma جستجو کنید.

صفحه اصلی Tailwind

در عین حال، یک هشدار بزرگ وجود دارد: فقط در صورتی که می‌خواهید از آن استفاده کنید، چارچوبی را وارد پروژه خود کنید. در غیر این صورت، احتمالاً به عملکرد شما آسیب می رساند. اگر فقط برای یک ویژگی به چارچوبی پایبند باشید، همچنان باید کل شیوه نامه را بارگیری کنید تا کار کند. همانطور که می توانید تصور کنید، اغلب بسیار بیشتر از ارزش آن است.

بنابراین، اگر متوجه شدید که در حال بازنویسی یا هک الگوهای چارچوب خود هستید، احتمالاً نباید از آنها استفاده کنید.

6. از reset/normalize CSS خود استفاده کنید

تنظیم مجدد در ابتدای شیوه نامه ظاهر می شود و تعدادی ویژگی پیش فرض مانند ارتفاع خط، حاشیه ها، رنگ های پس زمینه و غیره را برای وب سایت شما تعریف می کند. انجام این کار به حذف ناهماهنگی های طراحی در مرورگرهای مختلف و ایجاد یک خط پایه مشترک کمک می کند. به عنوان مثال:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

موارد فوق از MeyerWeb، یکی از محبوب ترین راه حل ها است. همچنین می توانید Normalize.css را جستجو کنید.

7. قابلیت دسترسی در طراحی شما

در دسترس قرار دادن سایت شما به این معنی است که آن را برای هر چه بیشتر افراد بدون توجه به توانایی های آنها قابل استفاده کنید. CSS نقش مهمی در این امر ایفا می کند، بنابراین بیایید برخی از بهترین روش ها را برای این کار مرور کنیم:

  • کنتراست کافی ارائه دهید – اطمینان حاصل کنید که کنتراست کافی بین رنگ های پیش زمینه (مثلا متن) و رنگ های پس زمینه وجود دارد تا افراد کم بینا بتوانند آنها را بخوانند. می توانید از کنترل کنتراست استفاده کنید برای این. به همین ترتیب، لینک های خود را رنگارنگ کنید تا قابل تشخیص باشند. علاوه بر این، از اندازه فونت به اندازه کافی بزرگ (حداقل 18-20 پیکسل) استفاده کنید.
  • نگاه داشتن outline منشا آن خطوط کلی برای افرادی که در سایت شما با استفاده از صفحه کلید یا صفحه خوان ها حرکت می کنند ضروری است. این به ردیابی ماده فعال کمک می کند. اگر ظاهر طرح را دوست ندارید، امکان طراحی آن را دارید. اطلاعات بیشتر در مورد آن در اینجا.
  • عناصر اسکرول را قابل مشاهده نگه دارید – در امتداد همین خطوط، مطمئن شوید که راهنمایی های ابزار یا موارد دیگری که هنگام نگه داشتن ماوس روی یک مورد ظاهر می شوند، هنگام انتخاب آن از طریق برگه نیز ظاهر شوند. برای آن به نقش های ARIA نگاه کنید.

برای بسیاری از موارد فوق، دانستن در مورد شبه عناصر بسیار مفید است. اطلاعات بیشتر در مورد CSS و دسترسی در اینجا.

8. از ویرایش مستقیم شیت های قالب در وردپرس خودداری کنید

وردپرس دارای CSS های زیادی است که بیشتر آن ها در شیوه نامه های موضوع قرار دارند (مگر اینکه از یک تم بلوک استفاده کنید). اگر برنامه شما ایجاد تغییرات در طراحی تم است، بدترین ایده ویرایش است style.css به طور مستقیم.

چرا؟

زیرا دفعه بعد که روی a کلیک کردید اکنون به روز رسانی کنید دکمه ظاهر شما (یا دفعه بعد که به‌روزرسانی خودکار را شروع می‌کنید)، تمام ویرایش‌های شما پاک می‌شود.

بنابراین، به جای آن چه می کنید؟

اگر فقط قصد ایجاد تغییرات کوچکتر را دارید، می توانید از یک افزونه استفاده کنید CSS اضافی بخش در سفارشی ساز وردپرس.

فیلد css اضافی وردپرس در سفارشی ساز

این قابلیت به روز رسانی را دارد و CSS را مستقیماً به سایت شما تزریق می کند <head> بخش.

در غیر این صورت، برای تغییرات بزرگتر، از تم کودک استفاده کنید. هر چیزی که در استایل شیت خود قرار دهید، آنچه را که در موضوع اصلی وجود دارد بازنویسی می‌کند و همچنین هنگام به‌روزرسانی طرح زمینه ثابت می‌ماند.

9. نکات سریع برای بهترین شیوه های CSS

خوب، برای بخش آخر، ما چند روش سریع CSS را به شما ارائه می دهیم که باید در نظر داشته باشید:

  • درباره کلاس ها در مقابل شناسه ها بیاموزید کلاس ها و IF ها به روش های بسیار متفاوتی استفاده می شوند. کلاس ها برای عناصر تکرار شونده و شناسه ها برای عناصر منحصر به فرد هستند. برای اطلاعات بیشتر، ما یک مقاله کامل در این زمینه داریم.
  • به جای شناور از فلکس و توری استفاده کنید شناورها راه اصلی چیدمان عناصر وب به چپ و راست و ایجاد طرح‌بندی بودند. اکنون سیستم های جامد برای آن را با فلکس باکس و شبکه در اختیار دارید، پس وقت بگذارید و از آن استفاده کنید.
  • از مزایای پیش درمان استفاده کنید پیش پردازشگرها به سازماندهی برچسب های شما، جلوگیری از تکرار، اضافه کردن ماژول ها، ارائه اتوماسیون و موارد دیگر کمک می کنند. در زمان متغیرهای سفارشی دیگر لازم نیست اما همچنان مفید است. محبوب ترین آنها SASS، LESS و Stylus هستند. شما همچنین می توانید به پس پردازشگرهایی مانند PostCSS و Autofixer نگاه کنید.
  • از واحدهای نسبی استفاده کنید در روزهای طراحی ریسپانسیو و رندر کردن وب سایت ها در طیف گسترده ای از اندازه های صفحه نمایش، معمولاً باید به ماژول هایی مانند emو remو %، و سایر اندازه های نسبی. اندازه های ثابت مانند px این فقط برای سناریوهای خاص است.
  • CSS خود را کوچک کنید کوچک‌سازی هر چیزی که برای خوانایی انسان لازم است را از کد حذف می‌کند (یعنی همه چیزهایی که قبلاً به شما گفتیم). با این حال، مرورگرها نیازی به فرمت خاصی ندارند و کوچک‌سازی فایل‌های کوچک‌تری ایجاد می‌کند و سریع‌تر بارگذاری می‌شود، پس از آن استفاده کنید! Autoptimize یک افزونه عالی است که می تواند این کار را به صورت خودکار انجام دهد.
  • برچسب های استفاده نشده را حذف کنید – به دلایل مشابه بالا، کد خود را برای نشانه گذاری که قبلاً در صفحات شما استفاده نشده است بررسی کنید و آن را حذف کنید. با این کار حجم فایل های شما کاهش می یابد. ما یک مقاله کامل در مورد این موضوع نیز داریم.
  • از اعتبار سنج CSS استفاده کنید – CSS خود را اعتبارسنجی کنید تا تگ های خود را برای استفاده صحیح تأیید کنید. ابزارهای کافی در اینترنت برای این کار وجود دارد.

بهترین روش‌های CSS پایه‌ای عالی برای یادگیری بیشتر است

وقتی برای اولین بار وارد CSS می شوید، ممکن است کمی گیج کننده باشد. چیزهای زیادی برای یادگیری و چیزهای زیادی برای دور زدن وجود دارد. با اتخاذ بهترین شیوه های CSS در اوایل، شما به خودتان پایه خوبی برای ایستادن و ادامه یادگیری می دهید.

در بالا، تعدادی از مهم‌ترین شیوه‌هایی را که باید اتخاذ کنید، پوشش داده‌ایم. این تنها چیزی نیست که باید از نظر بهترین شیوه های CSS بدانید، اما مکان خوبی برای شروع است. امیدواریم از سفر بعدی خود لذت ببرید!

دانستن چه بهترین روش های CSS را کاملا ضروری می دانید؟ در بخش نظرات زیر به ما اطلاع دهید!


– ارائه و ترجمه توسط تیم wordpress-templates.ir

سفارش طراحی سایت به وی تی!