{"id":4567,"date":"2026-01-16T14:40:33","date_gmt":"2026-01-16T07:40:33","guid":{"rendered":"https:\/\/wpdesign.vn\/toi-uu-css-nang-tam-tu-duy-tu-biet-sang-chuyen\/"},"modified":"2026-05-06T13:43:30","modified_gmt":"2026-05-06T06:43:30","slug":"toi-uu-css-nang-tam-tu-duy-tu-biet-sang-chuyen","status":"publish","type":"post","link":"https:\/\/wpdesign.vn\/vi\/toi-uu-css-nang-tam-tu-duy-tu-biet-sang-chuyen\/","title":{"rendered":"T\u1ed1i \u01afu CSS: N\u00e2ng T\u1ea7m T\u01b0 Duy T\u1eeb “Bi\u1ebft” Sang “Chuy\u00ean”"},"content":{"rendered":"\n

Khi m\u1edbi b\u1eaft \u0111\u1ea7u, ch\u00fang ta th\u01b0\u1eddng vui s\u01b0\u1edbng khi th\u1ea5y giao di\u1ec7n hi\u1ec3n th\u1ecb \u0111\u00fang nh\u01b0 b\u1ea3n v\u1ebd. Canh gi\u1eefa \u0111\u01b0\u1ee3c c\u00e1i div<\/code>, ch\u1ecdn \u0111\u00fang m\u00e3 m\u00e0u, hay ch\u1ec9nh font ch\u1eef v\u1eeba m\u1eaft \u0111\u00e3 l\u00e0 m\u1ed9t c\u1ed9t m\u1ed1c \u0111\u00e1ng t\u1ef1 h\u00e0o. <\/p>\n\n

Nh\u01b0ng khi b\u01b0\u1edbc v\u00e0o nh\u1eefng d\u1ef1 \u00e1n th\u1ef1c t\u1ebf, b\u1ea1n s\u1ebd nh\u1eadn ra: L\u00e0m cho n\u00f3 ch\u1ea1y th\u00ec d\u1ec5, gi\u1eef cho n\u00f3 ch\u1ea1y t\u1ed1t v\u00e0 d\u1ec5 s\u1eeda m\u1edbi kh\u00f3. M\u1ed9t file CSS d\u00e0i d\u1eb1ng d\u1eb7c, nh\u1eefng th\u1ebb !important<\/code> c\u1ee9u v\u00e3n t\u1ea1m th\u1eddi, hay l\u1ed7i “s\u1eeda ch\u1ed7 n\u00e0y h\u1ecfng ch\u1ed7 kia” ch\u00ednh l\u00e0 d\u1ea5u hi\u1ec7u b\u1ea1n c\u1ea7n n\u00e2ng c\u1ea5p t\u01b0 duy: \u0110\u1eebng ch\u1ec9 vi\u1ebft cho tr\u00ecnh duy\u1ec7t hi\u1ec3u, h\u00e3y vi\u1ebft cho con ng\u01b0\u1eddi qu\u1ea3n tr\u1ecb. <\/p>\n\n

B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n t\u1ed1i \u01b0u CSS \u0111\u1ec3 \u0111\u1ea1t \u0111\u01b0\u1ee3c 3 m\u1ee5c ti\u00eau: Nh\u1eb9 (Hi\u1ec7u n\u0103ng) – \u0110\u1eb9p (D\u1ec5 \u0111\u1ecdc) – B\u1ec1n (D\u1ec5 b\u1ea3o tr\u00ec).<\/p>\n\n

1. T\u01b0 duy h\u1ec7 th\u1ed1ng: X\u00e2y d\u1ef1ng thay v\u00ec “V\u00e1 l\u1ed7i”<\/h4>\n\n

Sai l\u1ea7m l\u1edbn nh\u1ea5t c\u1ee7a ng\u01b0\u1eddi m\u1edbi l\u00e0 t\u01b0 duy “th\u1ea5y \u0111\u00e2u \u0111\u00e1nh \u0111\u00f3”. Khi th\u1ea5y m\u1ed9t th\u00e0nh ph\u1ea7n b\u1ecb l\u1ec7ch, b\u1ea1n ti\u1ec7n tay th\u00eam m\u1ed9t selector th\u1eadt d\u00e0i ho\u1eb7c d\u00f9ng !important<\/code> \u0111\u1ec3 ghi \u0111\u00e8. <\/p>\n\n

T\u1ed1i \u01b0u CSS b\u1eaft \u0111\u1ea7u t\u1eeb vi\u1ec7c t\u1ef1 \u0111\u1eb7t c\u00e2u h\u1ecfi tr\u01b0\u1edbc khi g\u00f5 ph\u00edm:<\/p>\n\n

    \n
  • Class n\u00e0y 3 th\u00e1ng n\u1eefa m\u00ecnh \u0111\u1ecdc l\u1ea1i c\u00f3 hi\u1ec3u n\u00f3 l\u00e0m g\u00ec kh\u00f4ng?<\/li>\n\n\n\n
  • N\u1ebfu kh\u00e1ch h\u00e0ng mu\u1ed1n \u0111\u1ed5i t\u00f4ng m\u00e0u ch\u1ee7 \u0111\u1ea1o c\u1ee7a c\u1ea3 website, m\u00ecnh ph\u1ea3i s\u1eeda \u1edf 1 ch\u1ed7 hay 100 ch\u1ed7?<\/li>\n\n\n\n
  • \u0110o\u1ea1n code n\u00e0y c\u00f3 th\u1ec3 t\u00e1i s\u1eed d\u1ee5ng cho c\u00e1c trang kh\u00e1c kh\u00f4ng?<\/li>\n<\/ul>\n\n

    2. T\u1ed5 ch\u1ee9c m\u00e3 ngu\u1ed3n: Quy t\u1eafc “Chia \u0111\u1ec3 tr\u1ecb”<\/h4>\n\n

    \u0110\u1eebng d\u1ed3n t\u1ea5t c\u1ea3 v\u00e0o m\u1ed9t file style.css<\/code> duy nh\u1ea5t. H\u00e3y h\u1ecdc c\u00e1ch ph\u00e2n r\u00e3 CSS theo ch\u1ee9c n\u0103ng: <\/p>\n\n

      \n
    • base.css:<\/strong> Nh\u1eefng th\u1ee9 c\u1ed1t l\u00f5i (Reset CSS, Typography, Variable m\u00e0u s\u1eafc).<\/li>\n\n\n\n
    • layout.css:<\/strong> Khung s\u01b0\u1eddn c\u1ee7a trang (Header, Footer, Grid h\u1ec7 th\u1ed1ng).<\/li>\n\n\n\n
    • components.css:<\/strong> C\u00e1c “vi\u00ean g\u1ea1ch” nh\u1ecf (Button, Card, Input, Modal).<\/li>\n\n\n\n
    • pages.css:<\/strong> Nh\u1eefng t\u00f9y ch\u1ec9nh \u0111\u1eb7c bi\u1ec7t ch\u1ec9 d\u00e0nh ri\u00eang cho m\u1ed9t trang c\u1ee5 th\u1ec3.<\/li>\n<\/ul>\n\n

      M\u1eb9o nh\u1ecf:<\/strong> H\u00e3y gi\u1eef th\u1ee9 t\u1ef1 vi\u1ebft thu\u1ed9c t\u00ednh trong m\u1ed9t block CSS nh\u1ea5t qu\u00e1n. \u0110i\u1ec1u n\u00e0y gi\u00fap \u0111\u1ed3ng \u0111\u1ed9i (v\u00e0 ch\u00ednh b\u1ea1n) qu\u00e9t m\u1eaft r\u1ea5t nhanh: <\/p>\n\n

        \n
      1. Nh\u00f3m \u0111\u1ecbnh v\u1ecb:<\/strong> position<\/code>, display<\/code>, z-index<\/code>.<\/li>\n\n\n\n
      2. Nh\u00f3m h\u00ecnh kh\u1ed1i:<\/strong> width<\/code>, height<\/code>, margin<\/code>, padding<\/code>.<\/li>\n\n\n\n
      3. Nh\u00f3m ch\u1eef ngh\u0129a:<\/strong> font<\/code>, line-height<\/code>, color<\/code>.<\/li>\n\n\n\n
      4. Nh\u00f3m trang tr\u00ed:<\/strong> background<\/code>, border<\/code>, opacity<\/code>.<\/li>\n\n\n\n
      5. Nh\u00f3m hi\u1ec7u \u1ee9ng:<\/strong> transition<\/code>, animation<\/code>.<\/li>\n<\/ol>\n\n

        3. Selector: “Less is More”<\/h4>\n\n

        3.1. \u0110\u1ed9 \u01b0u ti\u00ean (Specificity)<\/h6>\n\n

        S\u1ef1 chuy\u00ean nghi\u1ec7p n\u1eb1m \u1edf s\u1ef1 \u0111\u01a1n gi\u1ea3n.<\/p>\n\n

        \u0110\u1eebng vi\u1ebft:<\/strong> #main .content .product-list ul li span { ... }<\/code> (Qu\u00e1 d\u00e0i, kh\u00f3 t\u00e1i s\u1eed d\u1ee5ng).<\/p>\n\n

        N\u00ean vi\u1ebft:<\/strong> .product-price { ... }<\/code> (G\u1ecdn, t\u01b0\u1eddng minh, v\u00e0 \u0111\u1ed9c l\u1eadp v\u1edbi c\u1ea5u tr\u00fac HTML).<\/p>\n\n

        3.2. \u0110\u1eb7t t\u00ean b\u1eb1ng ng\u00f4n ng\u1eef ch\u1ee9c n\u0103ng<\/h6>\n\n

        \u0110\u1eebng \u0111\u1eb7t t\u00ean theo di\u1ec7n m\u1ea1o nh\u01b0 .red-text<\/code>, h\u00e3y \u0111\u1eb7t theo m\u1ee5c \u0111\u00edch nh\u01b0 .status-error<\/code>. B\u1edfi m\u00e0u s\u1eafc c\u00f3 th\u1ec3 thay \u0111\u1ed5i theo xu h\u01b0\u1edbng, nh\u01b0ng m\u1ee5c \u0111\u00edch c\u1ee7a th\u00e0nh ph\u1ea7n \u0111\u00f3 th\u00ec kh\u00f4ng. <\/p>\n\n

        4. BEM \u2013 Ng\u00f4n ng\u1eef chung c\u1ee7a gi\u1edbi Frontend<\/h4>\n\n

        BEM (Block – Element – Modifier) kh\u00f4ng ch\u1ec9 l\u00e0 m\u1ed9t c\u00e1ch \u0111\u1eb7t t\u00ean, n\u00f3 l\u00e0 c\u00e1ch b\u1ea1n module h\u00f3a t\u01b0 duy:<\/p>\n\n

          \n
        • Block:<\/strong> Th\u00e0nh ph\u1ea7n \u0111\u1ed9c l\u1eadp (.card<\/code>)<\/li>\n\n\n\n
        • Element:<\/strong> Th\u00e0nh ph\u1ea7n con b\u00ean trong (.card__title<\/code>)<\/li>\n\n\n\n
        • Modifier:<\/strong> Phi\u00ean b\u1ea3n bi\u1ebfn th\u1ec3 (.card--highlighted<\/code>)<\/li>\n<\/ul>\n\n

          V\u00ed d\u1ee5:<\/strong><\/p>\n\n

          \"\"<\/figure>\n\n

          5. S\u1ee9c m\u1ea1nh c\u1ee7a s\u1ef1 k\u1ebf th\u1eeba v\u00e0 Bi\u1ebfn<\/h4>\n\n

          5.1. T\u1ea1m bi\u1ec7t Copy-Paste<\/h6>\n\n

          N\u1ebfu b\u1ea1n d\u00f9ng margin-bottom: 20px<\/code> qu\u00e1 nhi\u1ec1u l\u1ea7n, h\u00e3y t\u1ea1o m\u1ed9t class ti\u1ec7n \u00edch nh\u01b0 .m-bottom-20<\/code>. \u0110i\u1ec1u n\u00e0y gi\u00fap file CSS nh\u1eb9 \u0111i \u0111\u00e1ng k\u1ec3. <\/p>\n\n

          5.2. CSS Variables: “Tr\u00e1i tim” c\u1ee7a s\u1ef1 b\u1ea3o tr\u00ec<\/h6>\n\n
          \"\"<\/figure>\n\n

          H\u00e3y \u0111\u1ec3 nh\u1eefng con s\u1ed1 v\u00e0 m\u00e3 m\u00e0u n\u1eb1m t\u1eadp trung t\u1ea1i m\u1ed9t n\u01a1i. Khi c\u1ea7n thay \u0111\u1ed5i, b\u1ea1n ch\u1ec9 c\u1ea7n s\u1eeda m\u1ed9t d\u00f2ng duy nh\u1ea5t. <\/p>\n\n

          6. Hi\u1ec7u n\u0103ng v\u00e0 Tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng<\/h4>\n\n

          CSS kh\u00f4ng ch\u1ec9 l\u00e0 v\u1ec1 giao di\u1ec7n, n\u00f3 c\u00f2n \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn t\u1ed1c \u0111\u1ed9 load.<\/p>\n\n

            \n
          • H\u1ea1n ch\u1ebf Animation v\u00e0o c\u00e1c thu\u1ed9c t\u00ednh h\u00ecnh kh\u1ed1i:<\/strong> Tr\u00e1nh animate width<\/code>, height<\/code>, top<\/code>, left<\/code> v\u00ec ch\u00fang b\u1eaft tr\u00ecnh duy\u1ec7t ph\u1ea3i t\u00ednh to\u00e1n l\u1ea1i layout (Reflow).<\/li>\n\n\n\n
          • \u01afu ti\u00ean transform<\/code> v\u00e0 opacity<\/code>:<\/strong> \u0110\u00e2y l\u00e0 nh\u1eefng thu\u1ed9c t\u00ednh \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1eb1ng GPU, gi\u00fap chuy\u1ec3n \u0111\u1ed9ng m\u01b0\u1ee3t m\u00e0 60fps.<\/li>\n\n\n\n
          • X\u00f3a code th\u1eeba:<\/strong> S\u1eed d\u1ee5ng c\u00e1c c\u00f4ng c\u1ee5 nh\u01b0 PurgeCSS \u0111\u1ec3 lo\u1ea1i b\u1ecf nh\u1eefng \u0111o\u1ea1n CSS “ng\u1ee7 qu\u00ean” kh\u00f4ng bao gi\u1edd d\u00f9ng t\u1edbi.<\/li>\n<\/ul>\n\n

            7. Mobile First: S\u1ef1 l\u1ef1a ch\u1ecdn th\u00f4ng minh<\/h4>\n\n

            Thay v\u00ec vi\u1ebft cho Desktop r\u1ed3i h\u00ec h\u1ee5c \u0111i “\u00e9p” nh\u1ecf l\u1ea1i, h\u00e3y vi\u1ebft cho Mobile tr\u01b0\u1edbc. Vi\u1ebft nh\u1eefng g\u00ec c\u01a1 b\u1ea3n nh\u1ea5t, sau \u0111\u00f3 m\u1edbi d\u00f9ng @media<\/code> \u0111\u1ec3 m\u1edf r\u1ed9ng cho m\u00e0n h\u00ecnh l\u1edbn. Code c\u1ee7a b\u1ea1n s\u1ebd g\u1ecdn g\u00e0ng v\u00e0 logic h\u01a1n r\u1ea5t nhi\u1ec1u. <\/p>\n\n

            K\u1ebft lu\u1eadn<\/h6>\n\n

            T\u1ed1i \u01b0u CSS kh\u00f4ng ph\u1ea3i l\u00e0 m\u1ed9t \u0111\u00edch \u0111\u1ebfn, m\u00e0 l\u00e0 m\u1ed9t th\u00f3i quen t\u1ec9 m\u1ec9. M\u1ed9t file CSS s\u1ea1ch s\u1ebd kh\u00f4ng ch\u1ec9 gi\u00fap website ch\u1ea1y nhanh h\u01a1n, m\u00e0 c\u00f2n l\u00e0 c\u00e1ch b\u1ea1n th\u1ec3 hi\u1ec7n s\u1ef1 t\u00f4n tr\u1ecdng \u0111\u1ed1i v\u1edbi ch\u00ednh m\u00ecnh v\u00e0 \u0111\u1ed3ng nghi\u1ec7p trong t\u01b0\u01a1ng lai. <\/p>\n","protected":false},"excerpt":{"rendered":"

            Khi m\u1edbi b\u1eaft \u0111\u1ea7u, ch\u00fang ta th\u01b0\u1eddng vui s\u01b0\u1edbng khi th\u1ea5y giao di\u1ec7n hi\u1ec3n th\u1ecb \u0111\u00fang nh\u01b0 b\u1ea3n v\u1ebd. Canh […]<\/p>\n","protected":false},"author":4,"featured_media":4566,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[25],"tags":[],"class_list":["post-4567","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-publishing"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts\/4567","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/comments?post=4567"}],"version-history":[{"count":1,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts\/4567\/revisions"}],"predecessor-version":[{"id":4571,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts\/4567\/revisions\/4571"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/media\/4566"}],"wp:attachment":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/media?parent=4567"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/categories?post=4567"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/tags?post=4567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}