5 Bước để viết tốt hơn CSS Phần II
Đây là phần thứ hai của 5 Bước để viết tốt hơn CSS. Có rất nhiều hướng dẫn CSS có sẵn trên mạng Internet nhưng vài hướng dẫn có ích. Trong bài này bạn sẽ tìm thấy 5 bước để viết mã css tốt hơn cho các dự án tiếp theo trang web của bạn. Tôi hy vọng bạn sẽ thích thú với hướng dẫn này.
1. Giữ CSS khai báo trong một dòng
bạn nên luôn luôn giữ CSS khai báo trong một dòng, nó giúp trong việc giữ CSS của bạn tập tin sạch sẽ và nhỏ hơn. Nó cũng giúp loại bỏ dấu cách và ký tự không mong muốn.
Good Mã
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333333; background: # cccccc;)
Tình trạng Mã
h2 ( font-size: 18px; ; color: # 333333; ; background: # cccccc; )
2. Kết hợp các yếu tố
Một trong những cách tốt nhất để lưu các dòng mã được bằng cách nhóm Selectors. Có một số ví dụ dưới đây của những gì tôi đang đề cập đến.
Good Mã
h1, h2, h3 ( ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333; )
Tình trạng Mã
h1 ( ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333; ) h2 ( ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333; ) h3 ( ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333; )
3. Sử dụng "Margin" để Trung tâm Giao diện
Nhiều người mới bắt đầu để CSS không thể hiểu tại sao bạn không thể đơn giản sử dụng phao: trung tâm để đạt được hiệu quả mà trung tâm trên block-yếu tố cấp. Nếu chỉ có nó được dễ dàng! Thật không may, bạn sẽ cần phải sử dụng.
Mã số
# Container ( ; /* top, bottom - and left, right*/ margin: 0 auto; / * đầu trang, dưới cùng - và trái, bên phải * / width: xxxpx; )
4. Bình luận của bạn CSS
Đó là một ý tưởng tuyệt vời để xét mã của bạn trong phần. Để thêm một bình luận, chỉ cần thêm / * phía sau bình luận, và * / để đóng nó, như vậy:
Mã số
/******** MÃ START HERE ********/
5. Công cụ nén sử dụng CSS
nếu bạn không muốn lãng phí thời gian của bạn trong tờ chỉnh sửa kiểu cũ của bạn, bạn có thể chỉ cần sử dụng công cụ nén css trực tuyến, nó làm cho công việc của bạn trong vài giây.
kiểm tra này css nén các công cụ trực tuyến ...
Css Tidy
Sạch Css
Css Optimizer
Flumpcakes Css tôi ưu hoa
cssdrive Css Comperasor
W3C Css Validator
Kết luận
Đây chỉ là một số mẹo giúp tôi viết code tốt hơn. Tôi hy vọng rằng hướng dẫn, cũng sẽ giúp bạn ghi tốt hơn và sạch mã. Lời khuyên này áp dụng cho các dự án của bạn hiện tại và kế tiếp, và bạn chắc chắn sẽ đánh giá cao những nỗ lực.
Nếu bạn nghĩ rằng có thể được hướng dẫn chi tiết hơn, Hãy chia sẻ với chúng tôi. Thảo luận với chúng tôi
nếu bạn muốn nhận được hướng dẫn thêm từ chúng tôi, hãy xem xét việc đăng ký vào nguồn cấp dữ liệu của chúng tôi bằng RSS, hoặc bằng email.
Thúc đẩy hệ
Bài viết liên quan:
nếu bạn rất thích đọc bài viết này, xin vui lòng kiểm tra các sản phẩm khác liên quan dưới đây:
Revell nói trên: 27 Tháng Mười Một năm 2009 lúc 9:05 Said:
Chào,
Trước hết, bài đẹp! Không có bài viết nhiều địa chỉ kiểu văn bản của CSS. Tôi có một vài suy nghĩ về những điểm đầu tiên mặc dù. Theo tôi đó là tốt hơn để sử dụng kiểu văn bản dài trong khi phát triển và có một kịch bản "minify" CSS của bạn khi sử dụng nó trên một môi trường sống.
Dave nói trên: 27 Tháng 11 2009 at 10:06 Said:
Tôi hoàn toàn không đồng ý với quan điểm 1. Khi bạn đã có 3 tờ khai, 1 dòng mã là rất tốt, nhưng khi có 6 hoặc 7, nó được thực sự khó khăn để đọc.
Tất cả những gì có thể để tiết kiệm 1KB? Tôi không nhận được nó.
Khác hơn là một, một số phong nha ý tưởng ở đây.
Blog cuối Dave .. 2 hơn phải có CMS cho phép bổ sung cho WordPress
Nicolo 'Fasce nói trên: Ngày 27 tháng 11 năm 2009 at 10:34 Said:
Tôi đồng ý với Dave, điểm 1 là sai, chỉ đơn giản bởi vì nếu bạn làm việc trong nhóm một nó rất khó đọc một mã dòng một.
Bạn cũng nên viết mã trong thứ tự chữ cái cho cùng một mục đích.
EJ Semeijn nói trên: Ngày 27 tháng 11 năm 2009 at 10:57 Said:
Tại sao chúng ta ngừng đăng những lời khuyên này? Internet đã được đầy đủ những lời khuyên này cơ bản. Và tôi cũng không đồng ý với # 1. Nó không làm cho mã của bạn dễ dàng hơn để hiểu được, nó chỉ làm cho nó khó khăn hơn.
Lời khuyên của tôi sẽ được đặt cấu trúc trang này trong CSS của bạn, làm cho phần cho RESET, tiêu đề, HÌNH THỨC, HTML ELEMENTS, FONTS vv Bằng cách đó CSS của bạn sẽ dễ dàng hơn để hiểu được.
safetycopy nói trên: Ngày 27 tháng 11 năm 2009 lúc 9:38 Said:
Tôi đồng ý với ý kiến của một số người khác - 1 điểm ví dụ của mã xấu không phải là xấu mã - chỉ là một phong cách khác. Bài đăng này sẽ chỉ có ích để hoàn thành người mới và chúng tôi không muốn bắt đầu dạy họ giả định xấu đã!
safetycopy's blog cuối .. Photo
Josh nói trên: 29 tháng 11 năm 2009 lúc 4:38 Said:
Tôi làm tất cả trong số này, ngoại trừ con cuối cùng. Tôi không thấy nó hữu ích để nén css của tôi, nhưng không giống như tất cả các độc giả trước tôi mạnh mẽ đồng ý về điểm # 1. Tôi chỉ bắt đầu viết CSS của tôi trong một dòng và nó được to lớn. Di chuyển đến nay đã được giảm. Tôi đoán đây là một sở thích cá nhân. Cái gì đó giúp cho là trình soạn thảo kết thúc tốt đẹp tôi sử dụng mã xuống dòng kế tiếp như vậy không có cuộn ngang.
Josh's blog cuối .. Addicted to Flickr
FAQPAL nói trên: 29 tháng 11 năm 2009 lúc 4:06 Said:
Mẹo mới bắt đầu học tốt, tôi không minify CSS của tôi hoặc là, có lẽ là một dự án lớn hơn sẽ được hưởng lợi từ minifying, nhưng các trang web trung bình không thực sự cần.
Xa như # 1 đi, tôi nghĩ từ ngữ là những gì được ném người ra, thay vì nói rằng: "Tình trạng Mã", có lẽ nó nên nói như safetycopy đã gợi ý, "Thay Mã".
FAQPAL's blog cuối .. Effect Bubble với CSS
favSHARE nói trên: ngày 30 tháng 11 năm 2009 at 12:49 Said:
Bài viết này đã được chia sẻ trên favSHARE.net. Đi và bình chọn nó!
favSHARE's blog cuối .. 25 Hướng dẫn Giao diện web
Jean-Patrick Smith nói trên: 11 tháng 12 2009 at 11:15 Said:
Tôi thường tạo một tập tin PHP bao gồm tất cả các file css, minifies nó, và thêm nén + hết hạn tiêu đề.
Bằng cách đó tôi không có đồng ý với quan điểm # 1 ...
Có gì quan trọng hơn tất cả các bạn có CSS trên một dòng là giảm số lượng các cuộc gọi HTTP với sprites CSS và kết hợp tất cả các CSS / JS của bạn vào một tập tin.