Tôi nên viết HTML hay CSS trước?


28

Có rất nhiều điểm tương đồng để phát triển HTML / CSS; có thể hơi khó hiểu cho người mới bắt đầu.

  • HTML = nền móng / nhà
  • CSS = tường / bản thiết kế / hình nền

Có thực hành tốt nhất ở đây? Cái nào chúng ta nên viết trước?


8
Tôi không chắc bạn nên viết CSS như thế nào trước, nếu bạn muốn làm điều đó.
TRiG

Đó là một câu hỏi? Giống như: câu hỏi bình thường mà người ta có thể hỏi và chờ câu trả lời?
Alex Yu

Câu trả lời:


82

Bạn nên xây dựng một ngôi nhà đầu tiên, sau đó sơn nó.

Một tài liệu HTML có thể tự đứng, mặc dù nó có thể trông buồn tẻ. Một biểu định kiểu CSS không thể; nó không có gì có thể hiển thị (ngoại trừ mã) nhưng hướng dẫn hiển thị.

Đó là một vấn đề khác mà trong khi vẽ, bạn có thể muốn thay đổi ngôi nhà. Với những ngôi nhà thực thường không khả thi, nhưng trong quá trình phát triển HTML + CSS, người ta thường nhận thấy rằng bạn cần đánh dấu thêm trong tài liệu HTML của mình để giúp việc tạo kiểu dễ dàng hơn. (Nó ít phổ biến hơn trước đây, nhờ các bộ chọn CSS3 mạnh mẽ.)


Tôi hầu hết đồng ý. Vấn đề duy nhất là khi bạn sử dụng CSS để bố trí..aka hệ thống lưới.
Daniel

@Daniel, tại sao điều đó sẽ là một vấn đề? Có một số cách để làm bố cục trong CSS. Một số cách cũ hơn không cho phép bạn sắp xếp lại các phần tử một cách tự do, độc lập với thứ tự của chúng trong tài liệu HTML. Nhưng ví dụ: định vị tuyệt đối cho phép bạn làm điều đó và hệ thống lưới CSS3 cũng đang được phát triển). Nếu các công cụ bố cục cũ hơn được sử dụng, thì thực sự tài liệu HTML có thể cần phải được tổ chức lại nếu ý tưởng về bố cục thay đổi.
Jukka K. Korpela

1
@ Bố trí càng nhiều với css thì thiết kế sẽ dễ dàng hơn để duy trì đường đi. Hầu hết các trang web trải qua thay đổi thiết kế thông qua thời gian cuộc sống của họ. Điều này dễ thực hiện hơn nhiều nếu tất cả những gì bạn phải làm là thay đổi css.
Kenneth

7
Không thực tế là CSS và HTML hoàn toàn tách biệt. Trong cuộc sống thực, trong hầu hết các dự án, bạn sẽ viết ít nhất một số HTML chỉ dành cho mục đích tạo kiểu. Tôi đề xuất một mô hình lặp, nơi bạn bắt đầu với một số HTML, thêm CSS và sau đó thêm một số HTML nữa. Làm điều này theo cách mà trước tiên bạn viết cấu trúc (như lưới) cho trang web, sau đó thực hiện theo cách của bạn vào các chi tiết tốt hơn.
Thomas

4
Một điều tôi muốn thêm vào câu trả lời hay này: không chỉ một tài liệu HTML có thể tự đứng vững mà còn phải rõ ràng và dễ hiểu một cách hợp lý khi làm như vậy. Hãy nhớ rằng, HTML chưa được chỉnh sửa về cơ bản là những gì các công cụ tìm kiếm sẽ thấy. Hãy nhìn vào nó, nó có được tổ chức tốt với các tiêu đề và danh sách và đánh dấu ngữ nghĩa khác như vậy không?
Carson63000

13

Tôi luôn luôn sử dụng bút và giấy trước, giấy có kích thước đầy đủ, bản vẽ tỷ lệ.

Đó là nếu bạn không thiết kế của bạn. Nếu bạn tự tin vào thiết kế của mình, tôi có một cách tiếp cận cân bằng; html là cấu trúc, css keo. Tiếp tục xây dựng khái niệm (HTML, CSS) 'tuples'.

(HTML,CSS) + (HTML,CSS) -> (bigHTML,bigCSS)

(bigHTML,bigHTML) + (bigHTML,bigCSS) -> (biggerHTML, biggerCSS)

vân vân

Dù sao đó cũng là cách tôi làm.


2

Rất nhiều phụ thuộc vào loại trang web / ứng dụng web bạn thực hiện và loại bối cảnh mà nó sẽ được sử dụng.

Trong hầu hết các trường hợp, cách tốt nhất để xây dựng HTML âm thanh ngữ nghĩa, sau đó thêm CSS cho các trình duyệt tuân thủ tiêu chuẩn và sau đó áp dụng các quy tắc và hack không xâm phạm (ví dụ: nhận xét có điều kiện của IE, -vendor-somethingquy tắc CSS, lớp tuân thủ javascript, v.v. ) để hỗ trợ các trình duyệt không chuẩn và cho phép các tính năng dành riêng cho nhà cung cấp.

Tuy nhiên, đôi khi bạn có một loạt các ứng dụng web độc lập chia sẻ biểu định kiểu (ví dụ như một phần của kiểu nhà) và thậm chí bạn có thể ở vị trí sang trọng để kiểm soát đầu ra HTML của từng kiểu. Trong trường hợp đó, viết CSS trước, sau đó điều chỉnh HTML để hoạt động với nó, có thể là một cách tốt hơn để đi. Nếu bạn làm điều này, cách đầu tiên là phân tích loại phần tử trang nào bạn sẽ cần, xác định các lớp cho những thứ này, sau đó viết một tài liệu thử nghiệm tĩnh sử dụng chúng, viết biểu định kiểu và chỉ sau đó bắt đầu viết các ứng dụng sử dụng chúng.

Mặc dù vậy, trong tất cả sự trung thực, tôi nghi ngờ rằng một vị trí sang trọng như vậy là cực kỳ hiếm, và rất ít công ty thực sự nhận ra giá trị của một kiểu nhà thống nhất ở cấp độ CSS; thường xuyên hơn, tính thực tế chỉ ra rằng một nhà thiết kế tạo ra kiểu nhà, và sau đó các bộ kiểu dáng độc lập được viết cho mỗi ứng dụng cần tuân theo nó. Lý do cho điều này là, chủ yếu là, hầu hết các công ty sử dụng phần mềm sẵn có với khả năng sửa đổi hạn chế cho ít nhất một số ngăn xếp của họ và thông thường, việc thay đổi đầu ra HTML của họ để phù hợp với biểu định kiểu đã cho là khó hơn nhiều (hoặc thậm chí là không thể đối với một số gói độc quyền) hơn là viết lại CSS. Ngoài ra, nỗ lực duy trì hàng tá bộ bản định kiểu thường bị đánh giá thấp và một số khác biệt nhỏ và quirks được coi là chấp nhận được.


2

Mặc dù đây là một câu hỏi và trả lời rất cũ, tôi cảm thấy cần phải có trách nhiệm và nhận xét về nó.

Có, HTML nên được viết trước CSS, tuy nhiên ...

Bạn KHÔNG viết tất cả HTML trên trang và sau đó quay lại để viết CSS. Điều này sẽ khiến việc ghi nhớ rõ ràng các phần khi bạn xây dựng nó trở nên cực kỳ khó khăn, ngay cả với khoảng cách và nhận xét thích hợp.

Bạn xây dựng một trang web theo từng lớp, như thể bạn đang làm một chiếc bánh nhiều lớp.

Lớp thứ nhất - Đầu tiên bạn xây dựng cơ sở, div container, với css chiều cao và chiều rộng tối thiểu.

Lớp thứ 2 - Sau đó, bạn xây dựng lớp tiếp theo, các phần lớn của trang (div và kiểu dáng cho cấu trúc), chẳng hạn như các hàng hoặc các phần trông giống như các cột.

Lớp thứ 3 và hơn thế nữa - Sau đó, bạn tiếp tục thêm vào trong lớp thứ hai của các phần.

Theo cách này, bạn viết một số HTML, thêm rồi tạo kiểu bằng CSS cho cấu trúc, rửa và lặp lại. Theo kinh nghiệm của tôi, đây là cách xây dựng trang web hiệu quả hơn nhiều và theo ý kiến ​​của tôi nhanh hơn nhiều so với việc thay thế tất cả HTML trước tiên.

Cuối cùng, hãy thử sử dụng " * {phác thảo: 1px chấm đỏ} " để có được một phác thảo về tất cả các yếu tố của bạn, khi bạn thêm chúng trên trang của mình với kiểu dáng, bạn có thể thấy phác thảo của chúng và không phải lo lắng về việc đoán nó trông như thế nào cho đến khi bạn thêm màu nền của bạn. Tôi tránh đường viền cho trường hợp sử dụng cụ thể này vì viền thêm pixel trên các thành phần, đường viền là lớp phủ.

Hãy thử xem, cảm ơn!


Điều này cũng sẽ phục vụ tốt cho bạn nếu cuối cùng bạn chuyển sang sử dụng khung MVC như AngularJS, trong đó ý tưởng về các lớp như bạn mô tả về mặt khái niệm sẽ ánh xạ khá tốt vào cách bạn có thể sử dụng các tuyến / khung nhìn lồng nhau để xây dựng một trang trong cách phân cấp.
Sean Burton

1

Tôi tin rằng làm việc với cấu trúc trang web (HTML) trước tiên có ý nghĩa hơn khi bạn sẽ có ý tưởng về các yếu tố và có tên khi nói đến việc tạo kiểu và định dạng trang web của bạn.


0

Điều này phụ thuộc vào vai trò thực tế của bạn và mục tiêu chính của sự phát triển. Nếu mục tiêu là xác định những gì sẽ được hiển thị cho phần mở rộng tại một trang web, thì nên bắt đầu với HTML. Nếu mục tiêu là tạo ra một thiết kế dễ chịu và thống nhất, người ta có thể bắt đầu với CSS. Trong cả hai trường hợp, người ta có thể bắt đầu tốt hơn bằng giấy và bút chì và nếu mục tiêu hiện tại là phát triển ứng dụng web, thì người ta không nên bắt đầu với HTML hoặc CSS. Cách thực hành tốt nhất là trước tiên hãy nghĩ về những gì bạn muốn phát triển và sau đó phân chia nhiệm vụ thành các mục tiêu và mục tiêu phụ thay vì chỉ hack mọi thứ cùng nhau.


0

Thiết kế ngôi nhà (bố trí lưới) cùng với ý tưởng về cách nó sẽ được trang trí; Xây dựng nhà (HTML) với lưới điện; sau đó trang trí nó (CSS style sheet).

Sau khi bạn đã xây dựng ngôi nhà đầu tiên (trang HTML), bạn chỉ có thể áp dụng cùng một trang trí (biểu định kiểu CSS) khi bạn đi cùng. Bạn có thể tinh chỉnh trang trí khi bạn đi cùng.

Cuối cùng, bạn có thể muốn trang trí lại (làm lại biểu định kiểu CSS).


0

Bạn đã chọn một khung thực sự nghèo cho học tập và xây dựng.

Có hai vấn đề trực giao trong tay ở đây.

  1. Làm thế nào để tôi xây dựng một trang web phục vụ nhu cầu của tôi?
  2. Làm thế nào để tôi học cách xây dựng một trang web?

Đó là hai nhiệm vụ rất khác nhau có thể (và thường làm) yêu cầu các cách tiếp cận có khả năng xung đột khác nhau.

Nếu bạn đã quen thuộc với các kỹ năng, công nghệ và yêu cầu của một dự án, người ta bắt đầu với một cuộc thảo luận về nhu cầu của một trang web, và trải qua các bài tập thiết kế để xác định những gì cần được thực hiện. Điều đó thường có nghĩa là đánh dấu và công cụ thiết kế, thường sẽ không liên quan gì đến HTML hoặc CSS (mặc dù một số người thực hiện mockup với HTML & CSS).

Nếu bạn đang cố gắng học cách xây dựng một trang web, đồng thời xây dựng một trang web, có một quá trình khám phá và học hỏi mà bạn phải tham gia trước khi bạn biết những gì thậm chí có thể xây dựng.

Đây là nơi mà một chiến lược thiết kế và xây dựng mô-đun và lặp đi lặp lại đã trở nên phổ biến. Khi bạn không nhất thiết phải biết mình sẽ đi đâu với sản phẩm cuối cùng của mình (vì bạn không biết những gì có thể), bạn xây dựng các khối chức năng nhỏ, thử nghiệm xem liệu nó có đáp ứng yêu cầu của bạn không, sau đó kết hợp thử nghiệm nhỏ hơn đó vào toàn bộ lớn hơn.

Vì vậy, điều đó thực sự có nghĩa gì trong các điều khoản cụ thể? Xây dựng một trang web có thể giống như xây dựng một ngôi nhà, nơi bạn lên kế hoạch kiến ​​trúc (thiết kế mô phỏng) và sau đó bắt đầu làm kỹ thuật để tính toán xem ngôi nhà của bạn sẽ đứng lên và đáp ứng nhu cầu thẩm mỹ của bạn. Nhưng việc xây dựng một trang web có thể (và thường nên) trông giống như xây dựng một loạt các thử nghiệm nhỏ và thực hiện từng bước tiếp cận để tiếp cận một sản phẩm đáp ứng khái niệm ban đầu của bạn.

Là một vấn đề rất thực tế, hầu hết mọi người đều đồng ý với cả HTML và CSS của họ cùng một lúc.


0

Đây là vấn đề phổ biến trong bất kỳ dự án phát triển phần mềm nào và do đó bạn có thể hưởng lợi từ việc sử dụng bất kỳ khái niệm nào như Tạo mẫu nhanh, DSDM. Kết hợp với bất kỳ phong cách nào, ví dụ như nhanh nhẹn (lập trình cực đoan hoặc Design Driven Design (yêu thích của tôi)). Bám sát các nguyên tắc phổ biến mà bạn quyết định ngay từ đầu khi bạn đối mặt với chúng và bám sát chúng (KISS, YAGNI).

Vì vậy, đối với tôi, đó là: - trước tiên hãy xây dựng một 'nguyên mẫu' chức năng cơ bản, bao gồm một khối chức năng của nhu cầu Hạn chế bản thân bạn trong việc 'điều này có thể tốt' / 'tôi có thể cần phải sử dụng lại những thứ này sau' trừ khi chúng là OBVIOUS. Hãy nói với chính mình, bạn sẽ không cần nó! (YAGNI). - Viết ra các quyết định bạn đưa ra như một 'quy ước mã hóa' và tuân theo chúng, ví dụ như các thẻ php: Tôi sử dụng các quyết định ngắn vì đối với kịch bản của tôi .. áp dụng và ... không. - thêm kiểu dáng cơ bản nhưng hạn chế lại bản thân.

Sau đó mở rộng mã của bạn cho đến khi bạn đạt được một nguyên mẫu cấp cao hơn bao gồm nhiều khối chức năng hơn. Phù hợp với nó, làm cho mô hình css của bạn phát triển. Ngay khi bạn đối mặt với các quyết định ảnh hưởng đến tất cả những gì bạn đã làm (bạn sẽ), hãy đọc nó, đưa ra quyết định và viết ra các quy ước mã hóa của bạn tại sao bạn đi sang trái hay phải.

'Circle' theo cách của bạn hướng tới một sản phẩm trưởng thành hơn và cuối cùng.

Đừng sợ về những quyết định lớn mà bạn có thể phải đối mặt, bởi vì lo lắng về chúng có thể khiến bạn mất nhiều thời gian hơn là sửa nó xuống đường. Ngoài ra, đừng lo lắng về việc cộng đồng mạng đang nhìn thẳng vào vai bạn, cuối cùng khi bạn có một sản phẩm hoạt động, bạn đã học được rất nhiều và thẩm phán giàu trí tưởng tượng về mã nguồn xấu sẽ hài lòng hơn bởi điều tiếp theo bạn xây dựng (chú ý lặp lại ở đây).

Chỉ 50cts của tôi


0

Khi bạn so sánh một trang web với một ngôi nhà:

HTML = móng / nhà CSS = tường / bản thiết kế / hình nền

Làm thế nào bạn sẽ nổi những bức tường giữa không trung cho đến khi bạn xây dựng nền móng mà họ ngồi? Làm cách nào bạn có thể viết CSS để tạo kiểu cho trang của mình cho đến khi bạn có các thẻ HTML được viết mà bạn đang áp dụng các kiểu.

Mỗi phần của CSS là kiểu thẻ HTML cụ thể. Những thẻ đó cần tồn tại để có thể tạo kiểu cho chúng. Nếu bạn không có HTML để tạo kiểu thì tệp CSS sẽ trống vì mọi kiểu trong đó đều dư thừa vì chúng không thực sự tạo kiểu bất cứ thứ gì.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.