6 مرحله براي نوشتن بهتر CSS

ما همه آنجا بوده ايم. در حالي كه به آرامي پرونده Style.css جديدترين CSS تماشايي خود را باز مي كنيد ، مي بينيد كه طول آن 2،000 خط است و كلاس مورد نظر براي تغيير ، وسط آن است.

شما تنها هستيد ، مي ترسيد و هيچ ايده اي براي ويرايش آن كلاس نداريد زيرا مي تواند چيزي را در يك صفحه كاملاً متفاوت سرنگون كند. به عنوان آخرين راه حل ، به انتهاي پرونده مي رويد و يك كلاس جديد ايجاد مي كنيد تا روي عنصري كه قبلاً هفت كلاس ديگر دارد روي آن قرار دهيد. اين يك تجربه مشترك براي هر توسعه دهنده اي است كه به اندازه كافي طولاني با CSS كار مي كند ( براي برخي از الهامات CSS به نمونه هاي مورد علاقه ما از انيميشن CSS مراجعه كنيد).

بنابراين ، بياييد در مورد نوشتن CSS خوب ، هدف را بدانيم. هدف ايجاد قوانين هوشمندانه و پيچيده نيست. مهندسي رشته انتخابي به گونه اي نيست كه تا حد امكان قابل استفاده باشد. هدف CSS خوب بايد نوشتن قوانين ساده ، مدولار و از همه مهم تر ، به راحتي قابل حفظ باشد. در اينجا ما به شما چند قانون ساده و هوشمندانه براي كمك به شما در ايجاد و حفظ يك كد بهداشتي سالم مي پردازيم. 

اگر بعد از مشاوره بيشتر در زمينه طراحي وب هستيد ، صفحات ما را در طرح وب سايت و بهترين ابزار طراحي وب در اطراف از دست ندهيد .

01. ترتيب و ساختار را به پرونده ها اضافه كنيد

براي دسترسي سريعتر و آسانتر ، پرونده هاي سازه را به صورت صفحه انجام دهيد (اعتبار تصوير: Kyle Trenal)

ابتدا ، بر اساس ساختار توافق شده بين توسعه دهندگان ، به شكستن سبك ها در پرونده هاي CSS خود بپردازيد و سپس به آن بچسبانيد. باز كردن يك پوشه سبك سازماندهي شده ، يك تجربه وحشتناك است. شما نمي دانيد كه چه سبك هايي در كدام پرونده ها قرار دارند و تغيير سبك چگونه بر سبك ديگر تأثير مي گذارد. به ياد داشته باشيد اگر به هر سبكي فايل خاص خود را داده ايد ، سرور شما اهميتي كمتري نخواهد داد و سپس آنها را به هم وصل كرده و يا در انتها آنها را به يكي كوچك مي كنيد. 

سايت شما بسيار آهسته بارگيري مي شود اما سرور با خواندن آنها بسيار خوب روبرو مي شود. ساختار پرونده فقط براي انسان ها است و اگر ساختار پرونده شما هيچ ارزشي را ارائه نمي دهد ، بايد مجدداً مورد تجديد نظر قرار گيرد.

يكي از كمترين راههاي گيج كننده براي ساخت پرونده ها ، صفحه است. اگر در حال كار روي يك صفحه در مورد هستيد و چيزي براي اصلاح نياز دارد ، به پرونده about.css مي رويد. اين مسئله از تأثيرگذاري سبك در خارج از about.css جلوگيري مي كند. سپس تمام كاري كه شما بايد انجام دهيد اينست كه تغييرات در پرونده about.css را بررسي كنيد.

اين مسئله مشكل طول پرونده را برطرف نمي كند. يك صفحه قابل توجهي طولاني به راحتي مي تواند بيش از 1000 خط CSS داشته باشد. ساختار پرونده هاي شما در داخل راهي براي كاهش اين مسئله است. مرتب سازي حروف الفبا در داخل يك پرونده به اين معني است كه اگر شما در جستجوي چيزي هستيد كه از C شروع شده باشد و در آنجا نباشد ، مي دانيد كه گنجانده نشده است. 

اين همچنين براي سبك هايي كه از قبل وجود دارند ، كار مي كند. با گروه بندي همه چيز به ترتيب الفباي ، مي توانيد ببينيد كه آيا يك سبك سه يا چهار بار در كل پرونده نوشته شده است يا خير.

.boundingBox{
        padding: 1rem;
}
/* .contactHeader would go here if it existed
 Since it doesn’t we can safely assume it doesn’t exist */
.headerChildren{
        padding: 10px 5px;
        background: #ccc;
}

02. يك فايل CSS پايه ايجاد كنيد

همه سبك ها فقط به يك صفحه واحد تعلق نمي گيرند و داشتن سبك هايي كه در چندين صفحه وجود دارد معمول است. همچنين داشتن سبك هايي كه بطور كلي در مورد مشاغل كاربرد دارد و نه فقط وب سايت نيز معمول است. اينجاست كه شما سبكهاي كاملاً كلي نوشتيد كه به هيچ چيز تعلق ندارند. به عنوان مثال رنگهاي مختلفي كه استفاده خواهيد كرد ، قلمها ، تايپوگرافيها و همچنين ساير تنظيم مجدد براي سايت شما خاص است. 

همچنين ممكن است شما بخواهيد سبك هاي اصلي مانند اجزاي سازنده را در اين بخش مانند دكمه ها ، عناصر فرم و سبك هاي هشدار قرار دهيد. به اين بخش به عنوان راهنماي سبك سايت خود فكر كنيد. اين امر نه تنها به سايت شما راهي آسان تر براي حفظ CSS مي دهد ، بلكه تضمين مي كند كه استايل به طور يكنواخت مورد استفاده قرار گيرد. 

اين مكاني است كه شما ممكن است بخواهيد استايل هايي را كه متعلق به بخش هايي از سايت است كه خود را در چندين صفحه مانند header يا footer تكرار مي كنند ، بگنجانيد. اگر استايل قابل توجهي در اين بخش ها وجود دارد ، مي تواند به شكسته شدن آنها در پرونده هاي خود مانند header.css و footer.css كمك كند.

فقط مراقب باشيد كه سبك هايي را در پرونده هايي كه در واقع تعلق ندارند شروع نكنيد. به ياد داشته باشيد يك ساختار پوشه كثيف راهي عالي براي دشوار نگه داشتن CSS است. 

03. طرح خود را از CSS ديگر جدا كنيد

سبك هاي جداگانه اي براي تمركز بر ساير CSS (اعتبار تصوير: Kyle Tranel)

كساني كه شما با SMACSS آشنا هستيد ممكن است با اين ايده آشنا باشند كه سبك هاي چيدمان را مي توان از سبك هاي عمومي تري كه در سايت خود اعمال مي كنيد جدا كرد. با جدا كردن اين سبك ها از بقيه CSS ، اين بدان معني است كه شما مي توانيد به راحتي به نحوه نگاه بخش هاي مختلف توجه كنيد و كمتر به نحوه رفتار آنها نسبت به بخش هاي نزديك به آنها توجه كنيد.

اين امر مي تواند با اضافه كردن سيستم شبكه مانند كتابخانه محبوب Bootstrap يا با پياده سازي يكي از آنها انجام شود. ايده خوبي است كه در اين مرحله با طراح سايت صحبت كنيد ، زيرا بسياري از طراحان هنگام ايجاد يك سايت از سيستم شبكه استفاده مي كنند و شما مي خواهيد تا حد امكان به آن نزديك شويد.

04. CSS خود را بصورت مدولار بنويسيد

ايجاد CSS ماژولار مربوط به شناسايي زمان متعلق به يك گروه است (اعتبار تصوير: Kyle Tranel)

جدا كردن CSS طرح شما روش ديگري براي ساده سازي CSS شما را نشان مي دهد. روش هاي مختلف زيادي در رابطه با CSS وجود دارد. SMACSS ، BEM ، OOCSS وجود دارد كه اسامي چندي را ذكر مي كنيد ، اما خواه شما آنها را به بخش ها ، قطعات ، ماژول ها ، اجزاء يا بلوك ها فرا مي خوانيد ، همه آنها يك چيز مشترك دارند. يعني آنها سعي دارند قطعات قابل استفاده مجدد و تخصصي را به صفحه سبك شما اضافه كنند.

با انجام اين كار ، سبك هاي خود را به عنوان DRY نگه مي داريم (خود را تكرار نكنيد) و محصور سازي را ايجاد مي كنيم. عوارض جانبي در CSS بسيار زياد است. مرورگر CSS را به روشي صحيح يا غلط اعمال مي كند: اگر سبكي مطابق با برنامه اعمال شده باشد ، در غير اينصورت از آن خارج مي شويد. اين امر سبكي را فراهم مي كند كه نويسنده از آن استفاده نكرد تا همچنان مطابقت داشته باشد و نحوه تغيير صفحه را تغيير دهد. وقتي ما CSS را بيشتر مدولار مي نويسيم ، با كپسوله كردن سبك ها ، اين عوارض جانبي را كاهش مي دهيم. 

يك مؤلفه يا ماژول بخشي از HTML است كه به يكديگر گروه بندي مي شوند و سبك هاي آن بر يكديگر تأثير مي گذارد. ايجاد CSS ماژولار درمورد شناسايي چيزي است كه متعلق به يك گروه است و سپس جدا كردن آن از محيط اطراف. اين بدان معناست كه ديگر نيازي به نگراني در مورد بيرون نيست و احتمالاً نيازي به نگراني در مورد ماژول هاي داخل آن نيز نيست. 

ما ممكن است كلاسهايي را كه ايجاد مي كند به شرح زير بنويسد:

.aboutHeader{}
.aboutHeader_topMenu{}
.aboutHeader_bottomMenu{}

آنچه كه در واقع در اين سبك ها اتفاق مي افتد بي اهميت است اما آنچه انجام مي دهد اين است كه كنترل آنچه اتفاق مي افتد در كل هدر ، خط بالاي هدر و خط پايين مي باشد. با قرار دادن نام آنها با كلاس .aboutHeader تضمين مي كند كه هيچ سبك ديگري براي آنها اعمال نمي شود.

05. از زنجيرهاي بلند مدت انتخاب خودداري كنيد

وقتي قطعات را مي نويسيد آسان است كه آنها را نسبتاً كم عمق نگه داريد و بيشتر از دو تا سه لايه در اعماق انتخاب كنندگان كلاس قرار نگيريد. با اين حال ، برخي از مؤلفه ها ممكن است باعث شوند شما قبل از رسيدن به عنصري كه مي خواهيد هدف بگيريد ، به پنج ، شش يا حتي لايه هاي بيشتري برسيد.

به ياد داشته باشيد كه CSS توانايي حذف مشكلات انتزاعي مانند JavaScript را ندارد. اين يك جريان كنترل يا توانايي عملكردي ندارد. اين يك چيز خوب است ، بنابراين سعي نكنيد با ايجاد زنجيرهاي بلند مدت ، سبك هاي عميقاً توخالي يا سبك هاي بسيار كلي ، آن را تقليد كنيد.

در اينجا مثالي از چگونگي انجام ندادن آن آورده شده است:

.homeCTA .titleContainer .title .subheader .list{}

در اينجا نحوه نوشتن آن آورده شده است:

كلاسهاي subheader را به عنوان مؤلفه خاص خود تغيير نام دهيد

.subheaderCTA .list{}

يك زنجيره انتخاب مانند مثال "چطور اين كار را نكند" نشان مي دهد كه شما سبكي اشتباه را هدف قرار داده ايد. اين اغلب زنجيره اي نيست كه در واقع لازم باشد. در عوض ، اين به معناي آن است كه شما يك جزء در داخل يك جزء داريد و بايد مستقيم آن را هدف بگيريد. اگر سعي كنيد خيلي زياد داخل آن را محاصره كنيد ، كپسوله سازي CSS مدولار خراب مي شود ، به اين معني كه دوباره عوارض جانبي را مشاهده خواهيد كرد.

06. اصول خود را فراموش نكنيد

روش هاي زيادي براي ايجاد CSS وجود دارد و هر پروژه اي كه روي آن كار مي كنيد كمي متفاوت خواهد بود. اگرچه تقريباً اجتناب ناپذير است كه در نهايت نياز به هرگونه برنامه نويسي وجود داشته باشد ، اما مي توانيد از اين اصول استفاده كنيد تا اين اتفاق را كندتر كند. 

هميشه بايد توجه داشته باشيد كه سبك هاي شما خشك ، محصور شده ، قابل خواندن و جستجو باشد. آغاز اصول مورد بحث كمك مي كند تا اطمينان حاصل شود كه امور در آينده آسانتر حفظ و تغيير مي يابد. 

بنابراين به ياد داشته باشيد كه برخي از سفارشات را به سيستم فايل و پرونده هاي خود نگه داريد. فضاي نام را وارد كنيد و سبك هاي خود را مدولار كنيد. سبك هاي اساسي ، سبك هاي چيدمان و سبك هاي كلي را براي حفظ نگراني هاي جداگانه از هم جدا كنيد. 

در آخر ، سبك هاي خود را تا حد ممكن ساده و كم عمق نگه داريد. اولين باري كه سبك جديدي مي نويسيد ، دشوار نيست و اگر فهميديد ، فكر كنيد كه آيا آن بخش را بيش از حد پيچيده مي كنيد. زيرا اگر بار اول سخت است ، فقط تصور كنيد كه سردرد چه تجديد نظر خواهد كرد.