Bày tỏ IT

Đi xe đạp lại Buzzword và Phát triển Web có nghĩa là không có khác nhau. Bảo tồn năng lượng, trong nỗ lực!

Trong những năm của văn bản CSS và tạo ra HTML từ thiết kế, tôi đã theo một vài thực hành tốt nhất, trong việc theo đuổi của tiết kiệm thời gian và năng lượng trong những gì chúng ta thường hạn như "Wheel Re-Phát minh ra các". Thời gian và thời gian một lần nữa, tôi đã nói với bản thân mình, rằng tôi phải tạo ra một mẫu, một số lại có thể sử dụng tiêu chuẩn CSS rằng tôi sẽ sử dụng ra khỏi hộp trong công việc tương lai của tôi. Mặc dù không hoàn toàn nhưng tôi đã quản lý để đạt được một số mục tiêu.

Trong thúc đẩy hơn nữa, sử dụng của CSS, tôi có một cái nhìn tại các khuôn khổ CSS thường có sẵn cho chúng tôi và quyết định đưa vào sử dụng, vì đây là những cố gắng và thử nghiệm và tạo ra bởi các nhà phát triển có kinh nghiệm nhiều hơn bản thân mình. Quan trọng hơn "TRÁNH tái phát minh ra".

Mặc dù phổ biến kiến ​​thức cho cựu chiến binh, tôi đã cố gắng để viết một số khái niệm quan trọng / tốt nhất-thực hành / suy nghĩ đã đi vào việc tạo ra những khuôn khổ này, để làm cho XE ĐẠP RE của CSS có thể. Hy vọng điều này sẽ giúp một số nhà phát triển CSS chỉ là về và gần đây lên bandwagon CSS!

Phím Re-đi xe đạp của CSS:

Sử dụng Công ước đặt tên

Điều này có phải là yếu tố quan trọng nhất trong việc đưa ra các CSS / HTML lại có thể sử dụng. Đưa ra tên phù hợp cho các phần tử trang cho phép sử dụng lại các thành phần trang và phong cách của họ với ít hoặc sửa đổi. Trong phù hợp với lập luận này, Thậm chí HTML5, trong một sự thay đổi thay đổi lớn hơn người tiền nhiệm của nó, là để giới thiệu một số thẻ tức là cấu trúc. <article>, <section>, <header>, <aside>, và <nav> HTML5 sẽ mang lại? ]. Ngay cả với HTML 4 (hoặc thấp hơn), nó là tốt nhất để đặt tên cho phần tiêu chuẩn của trang của bạn consistanly như trong ví dụ đơn giản dưới đây ...

Hãy nhớ rằng, Hầu hết các trang trên dự án của bạn, sẽ có các yếu tố cốt lõi cùng một cấu trúc. Xác định những yếu tố cốt lõi trang phổ biến ....

  <div id="container">
    <div id="header"> ... </ div>
    <div id="nav"> ... </ div>
    <div id="sidebar"> ... </ div>
    <div id="footer"> ... </ div>
   </ Div> 

Thiết lập lại kiểu mặc định (CSS Đặt lại): Cho dù bạn sử dụng một khuôn khổ hoặc viết riêng của bạn, bạn phải cung cấp CSS Đặt lại [ CSS Đặt lại là gì? ], vì chúng làm giảm hoặc đôi khi loại bỏ hình ảnh mâu thuẫn xảy ra giữa các trình duyệt khác nhau. Nói một cách đơn giản CSS Thiết lập lại cơ chế thiết lập phong cách của phần tử HTML để các giá trị số không hoặc null, do đó trọng các giá trị mặc định của trình duyệt họ có thể đặt ra. Cung cấp một slate sạch để thiết lập các thuộc tính của các yếu tố khoảng trống của bất kỳ mặc định User-Agent [ CSS2.1 User Agent Bảng Phong cách mặc định . Tất cả các khuôn khổ CSS có cơ chế thiết lập lại. Nếu bạn đang viết riêng của CSS Đặt lại, một lời cảnh cáo rằng nếu bạn quên để thiết lập lại một tài sản quan trọng, có thể dẫn đến các vấn đề qua trình duyệt, đó là rất khó khăn để gỡ lỗi. Hãy nhớ rằng, Giữ một bản sao của phong cách thiết lập lại và thả chúng vào mỗi dự án mới bạn tạo ra.

  cơ thể, div, dl, dt, dd, ul, ol, li,
  h1, h2, h3, h4, h5, h6,
  trước, hình thức, fieldset, đầu vào, lựa chọn, textarea,
  p, blockquote, bàn, th, td
  {
    border: 0px;
    margin: 0;
    padding: 0;
  } 

Thiết lập mặc định (Styles cơ bản) để yếu tố:

Sau khi bạn đã thiết lập (không hoặc null) các giá trị mặc định của thuộc tính nhất định của một số yếu tố HTML, là cần thiết để áp dụng một số phong cách trên tất cả các thể hiện của những yếu tố này. Những thiết lập mặc định có thể khác nhau theo thiết kế hoặc theo các thực hành tốt nhất bạn làm theo.

Hầu hết các CSS khuôn khổ, luôn luôn giới thiệu một số mặc định mới, ngoài việc cài đặt lại phong cách trình duyệt mặc định.
Những mặc định là khoảng trống mặc định User-Agent (bị tước đi bởi Thiết lập lại CSS), những điều này sẽ phù hợp trên các trình duyệt.

Hãy nhớ rằng, phong cách cơ bản được sử dụng để thiết lập phong cách mà sẽ được sử dụng thiết kế rộng. ví dụ.

  html {font-size: 77%; font-family: Arial, sans-serif;}
 mạnh mẽ, h1, h2, h3, h4, h5, h6 {font-weight: in đậm;} 

Tóm tắt Styles cho các thành phần HTML thông thường và lớp học chung:

Hầu hết các dự án bao gồm một vài trang sẽ có các phần tử HTML thông thường được sử dụng trên trang web, ví dụ như để sắp xếp Một số hình thức, cảnh báo và lỗi, Popups Tuỳ chỉnh, LightBoxes ... Kể từ khi thành phần này được sử dụng trên một lần nữa qua các dự án, sẽ là hữu ích để cung cấp một thiết lập các lớp học liên kết với các phong cách được xác định trước cho các thành phần và bạn có thể tiết kiệm cho mình rất nhiều thời gian.

Ngoài việc xác định phong cách định nghĩa có thể tái sử dụng cho các thành phần HTML thông thường, chúng ta có thể phong cách trừu tượng các lớp học liên quan đến màu sắc, kiểu chữ, bố trí ngay cả. Bản thân tôi có xu hướng bạn sử dụng ... các lớp học phổ biến như clearfix, Font08, FontGrey, AlignL, DisplayB.

  hình thức đầu vào {border: 0px; background: # ffffff; padding: 10px 0px; _padding: 0px 0px; chiều cao: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;}
 hình thức textarea {border: 0px; background: # ffffff; color: # 000000; font-size: 0,9 em; line-height: 1.5em; tràn: có thể nhìn thấy;}
 Fbold {font-weight: in đậm màu: # cccccc;}.
 Fgrey {color: # 666666;}
 Flightgrey {color: # bbbbbb;}
 Clearfix {rõ ràng: cả hai;}.
 Chia {biên giới-top: 1px solid # 647B06; biên giới-bottom: 1px solid # 9CC00A; height: 0px;}.
 Displayb {display: block;}. Displayn {display: none;}.
 Alignr {text-align: right}. Alignc {text-align: center}
 Floatr {float: right;}. Floatl {float: left;} 

Bản sửa lỗi cho quirks trình duyệt phổ biến

Trình duyệt khác nhau thực hiện mã CSS và cung cấp các mức độ khác nhau hỗ trợ cho các chi tiết kỹ thuật của CSS. Các kết quả này .... "Browser quirks", chúng tôi phát triển được để lại để giải quyết. Đặc biệt, IE6 ám ảnh hầu hết các lập trình CSS với một thời hạn cuối cùng để đáp ứng. Các tin tốt là kinh nghiệm đã mang lại cùng nhau sửa lỗi có thể tái sử dụng những vấn đề này (Thường được gọi là CSS Hacks ).

Hãy nhớ rằng, Giữ các hacks / sửa chữa tiện dụng

  / * Zoom sau đây: 1 quy tắc đặc biệt là cho IE6 + IE7.  * /
    * Html. Clearfix,
    * Đầu tiên con + html clearfix {
           zoom: 1;
      } 

Tinh chỉnh CSS của bạn

• Thói quen đi xe đạp lại không sẽ đến với bạn trong ngày. Nó có để phát triển. Vì vậy, kế hoạch Re-Đi xe đạp của bạn. Chịu đựng điều này trong tâm trí bạn có thể mặc định phong cách trừu tượng, định nghĩa kiểu chữ, bố cục, kiểu phần tử HTML. Hãy thử nghĩ về phía trước.
• Ngoài ra nhìn lại dự án trước đây của bạn, nó sẽ giúp xác định phong cách mà bạn có xu hướng sử dụng thường xuyên trên porjects. Tóm tắt nó.
• Hủy bỏ bất kỳ phong cách không sử dụng. Thực hành này sẽ giữ cho khung CSS của bạn từ một triệu chứng phổ biến được gọi là "Sưng phù"
• Hủy bỏ phong cách lặp đi lặp lại.
• Xây dựng một tập hợp các phong cách linh hoạt đến cổng nó qua các dự án.

A Look At Khung CSS

Cuối cùng. Nếu bạn được truyền cảm hứng và có ý định sử dụng một hoặc nhiều các khuôn khổ CSS, Heres là nhanh chóng danh sách của một số những người nổi tiếng ....

• 960 lưới hệ thống : 960 hệ thống lưới điện là một nỗ lực để sắp xếp công việc phát triển web bằng cách cung cấp kích thước thường được sử dụng, dựa trên một chiều rộng 960 pixel. Có ba phiên bản: 12, 16 và 24 cột, có thể được sử dụng riêng rẽ hoặc song song. Tư tưởng không có gì là bạn không thể tạo cho riêng bạn một cách dễ dàng, khuôn khổ cung cấp cho lưới điện cho các mẫu in ở định dạng PDF, mà ta có thể sử dụng để phác thảo designs.Bet trang của bạn, Nó sẽ tạo một ấn tượng chuyên nghiệp, nếu bạn mang theo một vài tờ khi bạn đi đến một khách hàng để thu thập yêu cầu giao diện người dùng. Nó cũng cung cấp các mẫu lưới cơ bản cho phần mềm thiết kế phổ biến như Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio, cung cấp một "khởi đầu cho mười" để bắt đầu công việc thiết kế của bạn.
• Kế hoạch chi tiết : Kế hoạch cung cấp rõ ràng phân loại các tập tin CSS Đặt lại, lưới, hình thức, In, Typography, bổ trợ cho các nút, tab và sprites. Nó cũng cung cấp hỗ trợ cho trình duyệt IE như là một riêng biệt bao gồm.
• SenCSs : Không giống như trên, SenCSs (phát âm Sense), không có định nghĩa CSS cho Layout. Nó không bao gồm phông chữ, paddings, lợi nhuận, bảng biểu, danh sách, tiêu đề, blockquotes, hình thức và nhiều hơn nữa.
• BlueTrip : yêu cầu bồi thường ban đầu của nó nổi tiếng là vậy, nó là một sự kết hợp của các tính năng tốt nhất được cung cấp bởi những người khác các khuôn khổ khác như Blue in, Trip Oli ... từ nơi nó được tên của nó. Tính năng của nó bao gồm 24 cột lưới, phong cách kiểu chữ, phong cách orm, in ấn, các nút.
• YUI Grids : Mang lại cho bạn do Mạng lưới phát triển Yahooo, hỗ trợ chất lỏng-width (100%) bố trí cũng như bố trí cài sẵn chiều rộng cố định tại 750px, 950px và 974px, và khả năng dễ dàng tùy chỉnh để bất kỳ số nào. Như bạn thấy, nó về mặt kỹ thuật chỉ bố trí thành phần. YUI cũng cung cấp HTML / CSS bộ cho các phần tử trang khác
• YAML (Yet Another Giao diện multicolumn)
• Emastic

Hãy nhớ rằng, bằng cách sử dụng CSS khuôn khổ không có nghĩa rằng bạn là lười biếng để tạo ra một trong những của riêng bạn ... Điều đó ngụ ý rằng bạn là thông minh để học hỏi từ những người khác kinh nghiệm những sai lầm, TIẾT KIỆM THỜI GIAN và tăng năng suất!