F8
Quay lại
Đang tải...

Khang Ng

Dev quèn tập viết blog

23

Một số "cẩm nang" hay khi làm việc với HTML/CSS😂 

Khang Ng
Khang Ng

3 năm trước · 4 phút đọc

Bài viết này đơn giản là nơi để mình lưu lại những kinh nghiệm mình đã làm việc với HTML/CSS cũng như chia sẻ phần nào cho bạn nào chưa biết. Mình cùng bắt đầu bài viết thôi, yooolo🚀

Nội dung bài viết:

  1. Bố trí CSS cho gọn, dễ nhìn
  2. Vì sao khi sử dụng media queries thì nên sd đơn vị em hơn là đơn vị rem
  3. Reset CSS phong cách "hại điện"

1. Bố trí CSS cho gọn, dễ nhìn

Khi làm việc với CSS, ắt hẳn ae sẽ theo nhiều trường phái khác nhau khi đặt code: đặt random, đặt theo alphabet, nhóm theo group

Thì theo như khảo sát từ css-tricks (một trang web nổi tiếng về các bài viết chất lượng về CSS, các bạn có thể tìm hiểu thêm ở link này CSS-Trick, đa số ae Developer chúng ta chọn Nhóm theo group (Chiếm tới 43%) 1.png

Chúng ta cùng nhau nhìn xem sự khác biệt khi bố trí 1 cách random (mình thấy nhiều ae sẽ viết theo cách này, kể cả mình trước đây) Đây là cách bố trí CSS theo random

.selector {
  top: 0;
  right: 0;
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
  position: absolute;
  z-index: 10;
  background: #000;
  color: #fff
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 10px solid #333;
  margin: 10px;
  cursor: pointer;
  text-align: right;
}

Có bạn nào nhìn nhanh qua đoạn code trên mà trả lời được các câu hỏi: sử dụng font-family gì, đang sử dụng position absolute hay relative, font-size là bao nhiêu ta

Nhiều bạn sẽ bảo trong dự án thực tế làm gì có đoạn code CSS nào dài dữ dằn 😂, nhưng đây là code mình lấy từ dự án thực tế luôn nha các bạn, nhìn sơ qua chúng ta cũng thấy nó khó quản lí thế nào rồi phải không

Chúng ta cùng đến với đoạn code sau:

.selector {
  /* Positioning */
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;

  /* Display & Box Model */
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 10px solid #333;
  margin: 10px;

  /* Color */
  background: #000;
  color: #fff
  
  /* Text */
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
  text-align: right;

  /* Other */
  cursor: pointer;
}

Tèn ten, chòi oi, ở trên rối bao nhiêu, ở đây lại dễ hiểu bấy nhiêu. Giỡn thôi, nhưng mà phải công nhận cách tiếp cận này thì mình sẽ dễ dàng tìm kiếm cũng như quản lí hơn phải k nè.

Tin mình đi, các bạn k phải lo phải ghi nhớ từng group khi code đâu, giống như khi mới học CSS vậy, mưa dầm thấm lâu đúng không nè.

Nhưng, cũng sẽ có cách để các bạn auto format theo group như trên mà k cần ngồi tự sắp xếp. Các bạn tìm hiểu thư viện stylint-config-rational-order nhé, quá đã phải không nào 😂

2. Vì sao khi sử dụng media queries thì nên sd đơn vị em hơn là đơn vị rem

Nhìn chung, cả 2 thằng rem và em nó cũng tương tự nhau cả thôi

Nhưng, thằng em nó sẽ có 1 điều tốt hơn mà thằng rem không có

Vì khi user zoom trang web lên (sử dụng Ctrl + dấu + → đơn vị em sẽ cộng thêm phần width được zoom vào, còn px và rem thì không (chỉ có safari mới đúng khi user zoom))

2.png

Tóm lại, khi dùng media queries chúng ta nên sử dụng đơn vị em hơn là rem

Dưới đây là các demo khi sử dụng em

Thay vì sử dụng px

@media screen and (max-width: 768px) {
// code...
}

Ta chuyển sang em

@media screen and (max-width: 48em) {
// code...
}

Bạn có thể dùng trang web này để chuyển từ px sang em: https://nekocalc.com/px-to-em-converter

3. Reset CSS phong cách "hại điện"

Khi làm việc với HTML/CSS, không ai lạ với việc sử dụng Reset CSS ban đầu để trang web mình có thể giống nhau nhất với mọi trình duyệt phải không nè

Đây là cách mà mình học được từ các blogger nổi tiếng:

/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
    box-sizing: border-box;
    border: none;
}
* {
    font: inherit;
}
/*
  2. Remove default margin
*/
* {
    margin: 0;
}
/*
  3. Allow percentage-based heights in the application
*/
html {
    font-size: 62.5%; /* (62.5/100) * 16px = 10px */
}
html,
body {
    height: 100%;
}
/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
/*
  6. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}
/*
  7. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
    font: inherit;
}
/*
  8. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}
/*
  9. Create a root stacking context
*/
#root,
#__next {
    isolation: isolate;
}
/*
  10. Smooth scrolling only when the user does not have vestibular disorders
*/
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}
menu:not(article menu),
ol:not(article ol),
ul:not(article ul) {
    list-style: none;
}
menu,
ol,
ul {
    padding-left: 0;
}
/*
  11. Only outline when using keyboard
*/
:focus:not(:focus-visible) {
    outline: none;
}
/*
  12. Add pointers for required components
*/
label,
button,
select,
summary,
[type="radio"],
[type="submit"],
[type="checkbox"] {
    cursor: pointer;
}

Nguồn tham khảo: https://www.joshwcomeau.com/css/custom-css-reset/, https://blog.logrocket.com/what-should-modern-css-boilerplate-look-like/

Trên đây là 1 số tips khi làm việc với CSS, bạn nào thấy thú vị thì có thể comment bên dưới để cùng mình thảo luận 😎

23
Front-endHTML-CSS