10 cách tối ưu file css

  • Nguyễn Lê Điệp
  • 11-12-2016
  • 240
  • 0
  • 2
  • 0
  • Bài viết được đăng tại kennis.vn - không copy dưới mọi hình thức.
    Đối với các bạn chuyên về lập trình thì có lẻ sẽ không còn xa lạ với từ  tối ưu. Tối ưu đối với các sản phẩm công nghệ nói chung và sản phẩm web nói riêng thì các bạn thiết kế, phát triển web cần nên biết. Vì tối ưu web sẽ giúp web của bạn tải nhanh hơn, ít chiếm banwidth hơn và đặc biệt là giữ lại các độc giả khi vào web. Bởi vì không một độc giả nào thích vào một trang web có tốc độ tải trang rất chậm phải ngồi chờ đợi mới có thể đọc được nội dung của trang. Ở bài này Kennis sẽ hướng dẫn cho các bạn 10 cách tối ưu file css

    Bỏ dấu chấm phẩy

    Như ta đã biết trong CSS thì mỗi thuộc tính được viết ra và kết thúc bởi một dấu chấm phẩy(;) nhưng ở thuộc tính cuối không ta cần dấu này. Các bạn có thể theo dõi ví dụ bên dưới:
    Trước khi xóa bỏ
    .header {
        position: fixed;
        width: 1000px;
    }
    Sau khi xóa bỏ
    .header {
        position: fixed;
        width: 1000px
    }

    Đặt file css

    Tại sao lại phải đặt file css nằm trong thẻ head? Bởi vì trong các ngôn ngữ lập trình nói chung và ngôn ngữ web nói riêng khi tải dữ liệu hoặc chạy một chương trình nào đó thì luôn luôn chạy từ đầu đến cuối cùng. Nếu bạn vô tình đặt file này ở giữa trang hoặc ở cuối trang thì các đoạn HTML ở trên nó sẽ được chạy trước và đồng nghĩa các đoạn HTML đó chưa định dạng bởi CSS và chuyện gì sẽ xảy ra có phải trang của ta bị mất định dạng điều đó là tất nhiên rồi. Ở tình trạng này thường xảy ra đối với tốc độ nét bị chậm hoặc trang quá nặng.

    Viết tắt

    Lúc xưa khi nghe cô dạy sử bảo các em chuẩn bị ghi nào và thế là cô đọc rất nhanh chúng ta viết không kịp nên có những từ chúng ta phải viết tắt. Ở trong CSS cũng tương tự như vậy các bạn có thể theo dõi ví dụ bên dưới
    Trước khi viết tắt
    p {
        margin-top:1px;
        margin-right:0;
        margin-bottom:2px;
        margin-left:1px;
    }
    Sau khi viết tắt
    p {
    	margin:1px 0 2px 1px;
    }

    Gộp các selector

    Ví dụ hôm nay buổi sáng mẹ nói mai con nhớ đi mua đồ cho mẹ nha, đến trưa mẹ lại nói câu ấy tiếp và đến tối cũng vậy. Khi bạn nghe hoài như vậy bạn có chán, có bực không trong file css cũng vậy nó bực mình bằng cách nó sẽ tải chậm hơn bởi vì nó đã tải bên trên xuống bên dưới nó lại phải tải cũng các thuộc tính giống nhau.
    Trước khi gộp
    .text_top {
    	margin:1px 0 2px 1px;
    }
    .text_bottom {
    	margin:1px 0 2px 1px;
    }
    Sau khi gộp
    .text_top, .text_bottom {
    	margin:1px 0 2px 1px;
    }

    Giảm số lượng dòng

    Với số lượng nhiều dòng thì vô tình chúng ta đã làm tăng số lần đọc của trình duyệt và dẫn đến tải chậm.
    Trước khi giảm
    h1 {
    	margin-top:1px;
    	margin-right:0;
    	margin-bottom:2px;
    	margin-left:1px;
    }
    Sau khi giảm
    h2 {margin-top:1px;margin-right:0;margin-bottom:2px;margin-left:1px;}

    Ghi chú đơn giản

    Bạn có thể theo ví dụ bên dưới để hiểu rõ hơn
    Trước khi đơn giản
    /************************************/
    /*          	Ghi chú             */
    /************************************/
    Sau khi đơn giản
    /* Ghi chú */

    Short code color

    Thông thường khi bạn viết code CSS thì đa số các phần mềm đều hỗ trợ về các mã màu với 6 ký tự như: #ffffff, #000000, #ff0000
    Với các màu như trên ta hoàn toàn có thể viết: #fff, #000, #f00
    Lưu ý đối với các màu phức tạp thì bạn nên viết đủ 6 ký tự mã màu vì có thể viết tắt trình duyệt không hiểu mã màu đó.

    Xóa bỏ đơn vị tính

    Trước khi bỏ
    h5 {padding:0px; margin:0px;}
    Sau khi bỏ
    h2 {padding:0; margin:0;}
    Chúng ta hoàn toàn có thẻ bỏ các đơn vị đó mà không xuất hiện lỗi thì tội gì mà chúng ta viết thêm cho tốn công và dài dòng đúng không ạ.

    Gộp các file css

    Bạn có hai tay nhưng có ai đó bắt buộc bạn vừa lau nhà, vừa nấu ăn cùng lúc và hai việc đó phải song cùng nhau. Có phải bạn làm việc này một xí rồi nhảy qua việc nọ không. Vậy theo bạn, bạn có thể làm tốt hai công việc đó. Và ở đây cũng vậy nếu bạn để rất nhiều file CSS thì bắt buộc nó phải chia nhau ra tải các file đó cho bạn nó có tốt bằng việc nó tập trung tải một file này rồi đến tải các phần khác không?
    Trước khi gộp
    <link rel='stylesheet' href='home/css/responsive.css' type='text/css' media='all' />
    <link rel='stylesheet' href='home/css/css.css' type='text/css' media='all' />
    <link rel='stylesheet' href='home/css/animate.css' type='text/css' media='all' />
    <link rel='stylesheet' href='home/css/theme.css' type='text/css' media='all' />
    Sau khi gộp
    <link rel='stylesheet' href='home/css/style.css' type='text/css' media='all' />

    Như vậy file style.css nó sẽ chứa các file như: responsive.css, css.css, animate.css và theme.css

    CSS ngoài thẻ head

    Các bạn đã từng viết các style ở ngoài thẻ head chưa chứ riêng mình đã từng có. Bạn có thể theo dõi ví dụ bên dưới để hiểu hơn.
    <p>Học SEO tại Kennis Vn</p>
    <style type="text/css">
    	.home{color:#f00;font-weight:bold;}
    </style>
    <div class="home">Từ SEO onpage đến offpage</div>
    Như ví dụ bên trên thì khi trình duyệt đã tải file css trên head rồi khi vào đến vùng HTML nó đang tải HTML đột nhiên bắt nó phải tải CSS liệu rằng tải có nhanh được không ạ? Vì vậy tốt nhất bạn nên viết CSS vào một file và chèn file đó vào trong thẻ head.
    Chúc các bạn thành công!wink
    Từ khóa:

    10 cách tối ưu file css

    10 cách tối ưu file css

    10 cách tối ưu file css

    10 cách tối ưu file css
    10 cách tối ưu file css
    2 or 0
    Lưu ý: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.
    Đang tải...
    Nguyễn Lê Điệp
    Có sở thích lập trình, viết lách nên đã từng tham gia quản trị và viết bài ở một số diễn đàn, đến năm 2016 mới có điều kiện sáng lập ra kennis.vn với mục đích chia sẻ để học tập. Sinh năm 93, đang học tập và làm việc tại Hồ Chí Minh City.

    Thống kê

    - Hôm nay:
    505
    - Hôm qua:
    904
    - Tuần này:
    4.967
    - Tuần trước:
    6.504
    - Tháng này:
    19.124
    - Tháng trước:
    24.702
    - Năm này:
    136.515
    - Năm trước:
    17.373
    - Tổng cộng:
    153.888