Tăng kỹ năng CSS với 20 tips sau

Nguồn: webdesignerwall.com  | Dịch bởi: Canti – có tóm lược theo khả năng hiểu của bản thân, mong mọi người góp ý để Canti hoàn thiện post này nhé!

1- Sử dụng một bộ CSS Reset

Không phải hầu hết các PJ đều cần tất cả các rule trong những thư viện reset (normalize.css,…).

Kiến nghị:

* {

box-sizing: border-box;

margin: 0;

padding: 0;

}

Không bắt buộc phải sử dụng khai báo box-sing – nếu sử dụng inherit box-sizing bên dưới đây, bạn có thể bỏ nó.

2 – Inherit box-sizing

Cho box-sizing kế thừa từ html

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

Sẽ dễ dàng hơn trong việc thay đổi box-sing khi code được giới thiệu thông qua các plugin bên thứ 3 hoặc các ứng dụng sử dụng  behavior khác.

3 – Bỏ Margin Hacks với Flexbox

.flex-container { display: flex; justify-content: space-between; }

.flex-container .item { flex-basis: 23%; }

How many times have you tried designing a grid, such as a portfolio or image gallery, where you used floats and then had to clear them or reset margins to get the columns to break into the number of rows you want? Get rid of nth-, first-, and last-child hacks by using the space-between property value in flexbox:

Đã bao lần bạn design lại một grid, như portfolio hay image gallery,

 

 

 

 

 

 

 

 

 

 

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s