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

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

راهنمای سبک زندگی چیست؟

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

نه تنها این راهنماها تمرکز دارند روی HTML و CSS، اما همچنین زبان های دیگری که می توانند برای عملکرد ماژولار شوند مانند جاوا اسکریپت و PHP. چند نمونه محکم از راهنماهای سبک زندگی را می توان در اینجا یافت Github، موزیلا، و MailChimp. همانطور که از آن مثال ها می بینید، معمول است که یکی را داشته باشیم page یا سایت فرعی برای نمایش موارد استفاده در کنار کد هر جزء. این کار باعث می‌شود تا زمانی که به آن‌ها نیاز دارید، آن‌ها را بگیرید و آن‌ها را بگیرید و طراحان یا توسعه‌دهندگان ناآشنا ببینند چگونه اجزا به صورت تعاملی کار می‌کنند.

راهنمای سبک زندگی خود را شروع کنید

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

با پایه شروع کنید

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

اهداف کد قابل نگهداری

هدف از کدهای قابل نگهداری این است که چیزها را قابل استفاده مجدد و مقاوم در آینده کند. مؤلفه هایی مانند نوارهای اعلان، دکمه ها، سرصفحه ها و پاورقی ها، نمونه های عالی از کدهای قابل استفاده مجدد هستند – مواردی که ممکن است چندین بار در سایت استفاده کنید، یا روی همان page. اگر کدهای قدیمی یا از قبل نوشته شده را شکسته اید تا بعد از این واقعیت قابل نگهداری تر باشد، در واقع بسیار ساده است. با حذف CSS به اصول اولیه شروع کنید. شما باید با یک کلاس مؤلفه باقی بمانید که چیزهای ساختاری مانند ارتفاع، عرض و موقعیت را تعریف می کند. در حالی که از کلاس های اصلاح کننده اضافی می توان برای تغییر موارد زیبایی شناختی مانند رنگ یا تایپوگرافی استفاده کرد. علاوه بر این، اگر پروژه شما از یک ID بدن یا کلاس برای هر یک استفاده می کند page، می توانید موارد استفاده منحصر به فرد را سبک کنید روی یک درpage بر این اساس مطمئن شوید که زیاد به این عمل متوسل نمی‌شوید، زیرا می‌تواند به راحتی به راهنمای استایل شما اضافه کند.

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

قراردادهای نامگذاری در CSS

وقتی صحبت از کار با ساختار کد قابل نگهداری می شود، قراردادهای نامگذاری بسیار مهم می شوند. نوشتن کلاس‌های CSS توصیفی برای اطمینان از حفظ پایگاه کد شما کار آسانی خواهد بود. وجود دارد بدون محدودیت روی طول کلاس CSS، بنابراین از این به نفع خود استفاده کنید. مطمئن شوید که به یک قرارداد نامگذاری واضح پایبند باشید، زیرا ترکیب خط تیره در مقابل زیرخط یا حروف شتری در مقابل همه نام‌های کوچک می‌تواند به راحتی گیج کننده باشد. معمولاً ایده خوبی است که کلاس های مؤلفه خود را بسیار توصیفی کنید، در حالی که کلاس های اصلاح کننده را کمتر کنید. در زیر نمونه ای از یک دکمه، یک قانون مورد استفاده منحصر به فرد و کلاس های اصلاح کننده آورده شده است.

<a href="www.webdesignerdepot.com" class="“button"

/* This is a component class, it should only contain basic structural rules */
.button {
display: block;
width: 250px;
height: 48px;
line-height: 48px;}

/* This unique use-case outlines a button used روی the homepage */
.homepage-cta-button {
display: block
margin: 0 auto 50px;
width: 180px;
height: 60px;
line-height: 60px;}

/* Below are modifier classes, these are added in addition to the component class to add color or other aesthetic changes */
.red {background: #C54F48}
.rounded {border-radius: 5px;}

راه حل های خودکار

ژنراتورهای خودکار راهنمای سبک شروع به ظاهر شدن به چپ و راست کرده اند تا به دنبال راهنماهای سبک کمک کنند. نمونه اولیه سبک یک ژنراتور SASS است که توسط رام ریچارد و میسون وندل ساخته شده است تیم SASS. این یکی از گزینه های بهتر در حال حاضر با ژنراتورهای مشابه است هولوگرام، کالی، StyleDocco، و KSS نیز مفید بودن.

خودکار در مقابل دست ساز

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

در حال بررسی کد شما

وب سایت ها هرگز تمام نمی شوند. ما چیزها را تغییر می‌دهیم، به سبک‌ها و گرایش‌های جدید انتقال می‌دهیم، و در پایان می‌توانیم کدهای زیادی را از بازبینی‌های گذشته دریافت کنیم. مهم است که لحظه ای وقت بگذارید و به “پایان” هر بازبینی نگاه کنید تا مطمئن شوید که همه چیز تا آنجا که می تواند تمیز است. در این مرحله، من همچنین دوست دارم هر جزء (و کلاس های اصلاح کننده) را در a پرتاب کنم کد باز کردن برای تست پشتیبانی مرورگر و یادداشت برداری بر اساس آن. این می تواند بعداً اگر در حال طراحی هستید، در زمان زیادی صرفه جویی کنید page با محدودیت های پشتیبانی در حین بازبینی، حتماً مراقب اجزایی باشید که ممکن است به روش‌های عجیب و غریب با یکدیگر تضاد داشته باشند یا باعث مشکلات مدل جعبه شوند.

نتیجه

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

در پایان، همه ما باید تلاش کنیم تا کدی تمیز و قابل نگهداری بنویسیم که تمرکز داشته باشد روی آینده نگر راهنماهای سبک زندگی تمایل دارند چنین جریان کاری را تشویق کنند و به توسعه دهندگان و بینندگان به طور یکسان بسیار شادتر شوند.

تصویر/تصویر کوچک ویژه، تصویر برنامه نویسی از طریق Shutterstock.