مهارت های CSS خود را با این 20 راهنمایی بالا ببرید

مهارت های CSS خود را با این 20 راهنمایی بالا ببرید

مهارت های CSS خود را با این 20 راهنمایی بالا ببرید

مهارت های CSS خود را با این 20 راهنمایی بالا ببرید

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

1 - از بازنشانی CSS استفاده کنید

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

* {    
  box-sizing: border-box;   
  margin: 0;    
  padding: 0;  
}

2 - box-sizing

اجازه بدهید box-sizing از html به ارث برده شود این باعث می شود تغییر box-sizing هنگامی که کد از طریق پلاگین های rd  party3 یا برنامه های کاربردی که از رفتار های مختلف استفاده می کند معرفی شود.

html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

3 - خلاص شدن از حاشیه ها با Flexbox

چند بار تلاش کرده اید طراحی یک شبکه را انجام دهید مانند نمونه کارها یا گالری عکس یا جایی که شما از شناورها استفاده کردید و سپس مجبور بودید آنها را پاک کنید یا رجیسترهای حاشیه را باز کنید تا ستون ها به تعداد ردیف هایی که می خواهید برسد؟ با استفاده از flexbox از فضای بین ارزش ملک در خلاص شوید.

.flex-container { display: flex; justify-content: space-between; } .flex-container .item { flex-basis: 23%; }

4- اسبفاده از () not  به سبک مرزها در لیست ها

یک شیوه بسیار رایج در طراحی وب استفاده از: select child ها یا nth child برای لغو سبک ها در انتخاب والدین است. از یک منوی ناوبری استفاده کنید که از مرزها برای ایجاد یک جداساز بین هر لینک استفاده می کند.

 

.nav li {    
    border-right: 1px solid #666;  
}
.nav li:last-child {    
    border-right: none;  
}

گام های بازنشانی این روش گاهی اجتناب ناپذیر است، اما برای اکثر بخش ها، می توانید از کلاس pseudo-class استفاده کنید: فقط یک عنصر را به عناصر مورد نظر خود اعمال کنید.پس () notبرای فهمیدن همیشه معنایی آسان است.

 

.nav li:not(:last-child) {    
    border-right: 1px solid #666;  
}

5 - اضافه کردن line-height به body

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

body {    
    line-height: 1.5;  
}

به جای اضافه کردن Line height به هر <h> و <*p> آن را به body اضافه کنید:

توجه داشته باشید ما یک واحد را در اینجا اعلام نمی کنیم  ما فقط آن را می گوئیم تا Line height یک و نیم برابر بیشتر از اندازه فونت برای متن ارائه شود.

6 - عمودی - مرکز

تنظیم یک قانون جهانی به طور عمودی - مرکز برای طرح خود یک راه عالی برای ایجاد یک پایه برای طرح بندی محتوای ظریف است که در آن شما آماده استفاده از شبکه CSS نیستید.

html, body { height: 100%; margin: 0; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; }

7 - استفاده از SVG برای آیکن ها

SVG به خوبی و برای همه انواع رزولوشن موجود است و در تمام مرورگرها پشتیبانی می شود. بنابراین پرونده های .png، .jpg. یا gif-jif-whatev را رها کنید. اکنون SVG Icon Fonts را در FontAwesome وجود دارد. تنظیم SVG درست مثل هر نوع تصویر دیگر کار می کند:

.logo { background: url("logo.svg"); }

اگر از SVG ها برای عناصر interactable مثل دکمه ها استفاده می کنید و SVG بارگیری نمی شود، شما باید مطمئن شوید که دارای مشخصه های aria مناسب در HTML هستید.

.logo { background: url("logo.svg"); }

8 - از انتخاب کننده ها(selector)  استفاده کنید

استفاده از انتخابگر جهانی (*) و یا انتخابگر (+) توانایی قدرتمند CSS را فراهم می کند که به ما اجازه می دهد قوانین را برای تمام عناصر در جریان سند تعیین کنیم که به طور خاص از عناصر دیگر نیز پیروی می کند:

 

* + * {    
    margin-top: 1.5rem;  
}

این یک ترفند دیگر است که می تواند به شما در ایجاد یک نوع کمک کند. در مثال بالا، تمام عناصری مانند H4 که H3 که عناصر دیگر را دنبال می کنند هر کدام حداقل 1.5 بار از فضا (برابر با حدود 30PX) دارند.

9 - ریتم عمودی پایدار

ریتم عمودی پایدار یک زیبایی بصری را فراهم می کند که محتوا را بسیار قابل خواندن می کند. جایی که انتخاب ممکن است خیلی عادی باشد، از یک انتخاب جهانی (*) در یک عنصر برای ایجاد یک ریتم عمودی سازگار برای بخش های خاص طرح خود استفاده کنید:

.intro > * { margin-bottom: 1.25rem; }

10 - استفاده از box-decoration-break  برای متنهای  پیچیده تر

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

 

.p {
  display: inline-block;
  box-decoration-break: clone;
  -o-box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

 box-decoration-break  به شما اجازه می دهد تا شما فقط حفظ متن خود را در سبک وسط و حاشیه نگه دارید. این بسیار مفید است اگر شما می خواهید برجسته سازی رااعمال کنید.

اعلان inline block اجازه می دهد که رنگ ها، زمینه ها، حاشیه ها و پرده ها به هر خط متن و نسبت به کل عنصر اعمال شود، و اعلان clone اطمینان حاصل می کند که این سبک ها به صورت یکسان به هر خط به طور یکسان اعمال می شوند.

11 - سلولهای جدول برابر با عرض

استفاده از table-layout برای ثابت نگه داشتن سلول ها در عرض مساوی

 

.calendar {    
    table-layout: fixed;  
}

12 - نیروهای لینک خالی برای نمایش با انتخاب ویژگی ها

این آیتم خصوصا برای لینکهایی که در یک سیستم مدیریت محتوا (CMS) قرار می گیرند مفید است، که معمولا دارای ویژگی کلاس نیستند و به شما کمک می کند تا آنها را به طور خاص و بدون هیچگونه عاملی در آبشار تاثیر بگذارید. به عنوان مثال، عنصر <a> دارای مقدار متن نیست، اما ویژگی href دارای پیوند است:

 

}a[href^="http"]:empty::before    
    content: attr(href);  
{ 

13 - سبک "پیش فرض" لینک ها

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

}a[href]:not([class])     
    color: #999;    
    text-decoration: none;  
    transition: all ease-in-out .3s;
{

14 - جعبه نسبت ذاتی

برای ایجاد یک جعبه با نسبت ذاتی، همه چیزهایی که لازم دارید انجام دهید، پد بالا یا پایین را به div تقسیم می کند:

.container { height: 0; padding-bottom: 20%; position: relative; } .container div { border: 2px dashed #ddd; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }

15 - سبک تصاویر

این نکته در مورد کاهش کد و جزئیات بیشتر در مورد طراحی شما کمتر است. تصاویر شکسته به دلایل مختلف اتفاق می افتد و یا ناخوشایند هستند یا منجر به سردرگمی می شوند (فقط یک عنصر خالی).

img { display: block; font-family: Helvetica, Arial, sans-serif; font-weight: 300; height: auto; line-height: 2; position: relative; text-align: center; width: 100%; } img:before { content: "We're sorry, the image below is missing :("; display: block; margin-bottom: 10px; } img:after { content: "(url: " attr(src) ")"; display: block; font-size: 12px; }

16 - استفاده از rem برای Global Sizing؛ استفاده از em برای اندازه محلی

پس از تنظیم اندازه قلم پایه در ریشه، می توانید اندازه فونت را برای عناصر به rem تنظیم کنید:

سپس اندازه فونت را برای عناصر متنی به em تنظیم کنید:

article { font-size: 1.25rem; } aside { font-size: .9rem; }

حالا هر عنصر حاوی عناصر سازگار و سبک تر، قابل نگهداری و قابل انعطاف تری است.

}h2     
    font-size: 2em;  
{   
}p     
    font-size: 1em;  
{

17 - مخفی کردن ویدیوهای خودکار که خاموش نیستند

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

video[autoplay]:not([muted]) { display: none; }

18 - استفاده از: root برای انعطاف پذیری

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

:root { font-size: calc(1vw + 1vh + .5vmin); }

حالا شما می توانید واحد ریشه EM بر اساس مقدار root محاسبه کنید

body { font: 1rem/1.6 sans-serif; }

19 - تنظیم فونت اندازه در عناصر فرم برای نمایش بهتر در بهتر موبایل

برای جلوگیری از بزرگنمایی عناصر HTML در مرورگرهای تلفن همراه (iOS Safari، و غیره) یک کشوی <select> را ایجاد کرده و اندازه قلم را به شیوه های ورودی اضافه کنید:

 

,["input[type="text"] 
,["input[type="number"]  
,select 
}textarea     
    font-size: 16px;  
{

20 - استفاده از متغیرهای CSS!

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

 

:root {
  --main-color: #06c;
  --accent-color: #999;
}

h1, h2, h3 {
  color: var(--main-color);
}
a[href]:not([class]),
p,
footer span{
 color: var(--accent-color);
}

لطفا نظرات خود را با ما در میان بگذارید.

(0)نظر


ارسال دیدگاه

ارسال دیدگاه

گروه بندی مطالب

برچسب ها