Giải thích lý do tại sao kiểu dáng không nên được thực hiện trực tiếp trong HTML

ItamarG3 08/09/2017. 12 answers, 2.942 views
lesson-ideas web-development html css

Gần đây tôi nhận thấy rằng đã bị phản đối từ html theo trang web này . Từ câu trả lời trên Stack Overflow , việc thay thế vùng chọn được thực hiện từ CSS. Giải thích cho thay đổi là html là về cấu trúc tài liệu, bố cục và hình ảnh động và kiểu dáng nên được thực hiện từ CSS.

Điều này khiến tôi suy nghĩ:

Sẽ rõ ràng giảng dạy sự khác biệt giữa việc thiết lập thuộc tính style của một thẻ html , và làm nó thông qua CSS hữu ích để tăng sự hiểu biết của học sinh về việc tham gia CSS và HTML?

Để thu hẹp nó, tôi đang tìm kiếm các ví dụ hoặc giải thích về cách giảng dạy nó rõ ràng có thể làm cho nó dễ dàng hơn cho sinh viên để phong cách trang web của họ . Tốt hơn là một lời giải thích.

Bằng cách "giảng dạy một cách rõ ràng" ý của tôi thực sự là dành một bài học với tiêu đề "Styling through .CSS" hoặc một cái gì đó tương tự.

Một số bối cảnh, nếu cần thiết:

Các sinh viên học thiết kế web cơ bản: HTML, JavaScript (rất cơ bản), JSP và SQL. Họ học những điều này trong 1 năm và vào cuối năm họ cần có một trang web (mà họ nhận được điểm). Tôi tự hỏi nếu một bài học hoàn toàn về CSS cuối cùng có thể dẫn đến trang web tìm kiếm tốt hơn.

5 Comments
3 Puppy 30/07/2017
Vấn đề cốt lõi ở đây là bạn đang giả định rằng kiểu dáng không nên được thực hiện trực tiếp trong HTML, và rằng sử dụng CSS là tốt hơn. Không phải những điều đó là đúng.
ItamarG3 31/07/2017
@ Puppy tốt, một phần của câu hỏi là liệu tôi nên dạy nó cách ly. Nếu tôi không, thì họ sẽ không sử dụng bảng định kiểu. Nhưng bạn có nghĩ rằng bất kỳ trang web bất cứ nơi nào thực sự hardcodes tất cả nó css trong html? Every div có một dãy mã trong thuộc tính style của nó?
1 David Spence 31/07/2017
Trang web này cho thấy sức mạnh của việc tách riêng css. csszengarden.com - Cấu trúc tương tự, biểu định kiểu css khác nhau.
ItamarG3 31/07/2017
@DavidSpence tốt đẹp. Tôi chắc chắn sẽ sử dụng
1 no comprende 31/07/2017
Dù bạn làm gì, đừng hiển thị cho họ bài đăng SO về việc phân tích cú pháp HTML với Regex . Có thể cho họ cơn ác mộng!

12 Answers


richard 30/07/2017.

Tôi thích ý tưởng sản xuất một vài tấm phong cách, và có các học sinh áp dụng chúng vào HTML của họ. Sau đó, họ có thể nhìn thấy sức mạnh của việc có các bảng kiểu riêng biệt.

Sau đó họ có thể bắt đầu chỉnh sửa các tờ kiểu dáng, và xem sức mạnh của một thay đổi nhỏ có thể thay đổi mỗi tiêu đề, hoặc mỗi đoạn văn vv

Tôi cũng đã có trong quá khứ, viết một tập tin HTML có một bộ nút ở phía dưới. Các nút này sẽ kích hoạt một tệp tin CSS khác để được tải. Đó là một số JavaScript rất đơn giản.

Để trả lời nên giữ chúng riêng biệt

Giữ phong cách và nội dung riêng biệt, được khuyến cáo bởi W3 và nhiều người khác. Nó thực hiện việc tách những mối quan tâm và trách nhiệm duy nhất. Cả hai mẫu rất quan trọng trong thiết kế phần mềm.

Để trả lời, bạn nên dành một bài học để tách các tập tin CSS.

Vâng. Nếu điều quan trọng là để giữ những riêng biệt, mà là, sau đó bạn nên dạy cho học sinh để giữ chúng riêng biệt. Tiết kiệm thời gian bằng cách không giảng dạy cho họ để trộn nó với HTML (Điều này sẽ tiết kiệm thời gian hai lần, vì bạn sẽ không phải bỏ dạy nó).


Tôi chỉ làm điều này với một hoặc hai người (không phải là một lớp học).

5 comments
ItamarG3 30/07/2017
Đoạn thứ hai nghe có vẻ rất hữu ích. Nhưng điều đó không trả lời liệu tôi nên thực sự cống hiến một bài học để giảng dạy như thế nào và tại sao một người nên viết một css stylesheet, thay vì nội tuyến html thuộc tính thuộc tính.
richard 30/07/2017
Thêm câu trả lời một phần cho Nếu và tại sao lại dành một bài học cho nó.
1 Buffy 30/07/2017
Tôi đồng ý rằng việc bỏ dạy học là một cách sử dụng đặc biệt lãng phí thời gian của mọi người. Tốt nhất là nắm bắt quan niệm sai lầm trước khi những thói quen xấu được xây dựng và củng cố.
1 richard 30/07/2017
@ tim, đây chỉ là một optimisation tải. Khái niệm nên vẫn riêng biệt. Tuy nhiên Google đang nói đặt nó trong cùng một tập tin. Họ không nói rằng bạn nên phong cách mỗi bit riêng biệt. Họ đang nói đi những gì có thể được trong một tập tin css và thêm nó vào <style> phần của html.
1 Darren 31/07/2017
Thay vì cho sinh viên một loạt các kiểu mẫu ảnh hưởng đến mã của họ, tôi sẽ thử cách tiếp cận ngược lại. Sau khi dạy chúng các kiểu nội tuyến bằng HTML, hãy cho họ một trang dựa trên một tài liệu CSS cho phong cách của nó và yêu cầu họ tạo một bảng kiểu cho nó (sử dụng các kỹ thuật tương tự mà họ đã học bằng cách sử dụng HTML nội tuyến - chỉ là vấn đề ghi nhãn các kiểu và đặt chúng lại với nhau ở một nơi). Sau đó, tất cả mọi người trong lớp có thể so sánh các trang tính của họ trên một chủ đề kiểm tra thông thường (một trong những bạn đã cung cấp) và xem các khả năng.

Buffy 30/07/2017.

Nếu bạn chỉ muốn xây dựng một trang đơn giản và quảng cáo ngẫu nhiên và sẽ không bao giờ thay đổi trong tương lai và sẽ chỉ bao giờ được nhìn thấy trên một loại thiết bị, sau đó, chắc chắn, xây dựng các kiểu dáng trực tiếp vào html. Cũng giống như vậy khi bạn viết chương trình chỉ chạy một lần trên một thiết bị để có câu trả lời, sau đó chương trình trở nên lỗi thời. Có, sau đó, không có lý do để mã cẩn thận. "Nhanh và bẩn" làm việc cho những việc như vậy.

However mọi thứ sẽ thay đổi và các trang web được xem trên các thiết bị có kích cỡ màn hình khác nhau, thậm chí là các mẫu màu. Và họ có thể được xem trong tương lai trên các thiết bị chưa tồn tại.

Vì vậy, nếu bạn muốn xây dựng các trang web quan trọng và lâu dài và phải được duy trì trong tương lai, hãy sử dụng CSS. Bạn có lẽ sẽ không viết một chương trình C quan trọng trong tất cả các main , nhưng ít nhất, yếu tố ra những điều đó phải giống nhau nhưng được tái sử dụng. Trong lập trình C đơn giản, chúng tôi tính ra các chức năng cho việc này. Trong html chúng tôi tính ra phong cách. Ở cấp độ sâu hơn, phía máy chủ cũng đưa ra nhiều dữ liệu, vv Điều này cho phép những thứ được cho là giống nhau, giữ nguyên, và cho phép chúng ta sửa đổi một mức độ thiết kế độc lập với các cấp độ khác.

Đây không phải là điều tương tự, nhưng hãy nhìn vào mã nguồn của trang chủ của Google. Tôi không biết những gì họ sử dụng để gắn kết và duy trì nó, nhưng tôi nghi ngờ rằng nó chỉ là một trình soạn thảo văn bản. Lưu ý rằng trang đầu tiên của họ, mặc dù bố trí bố cục cực kỳ đơn giản, thay đổi thường xuyên.

Note to the Instructor Khi bạn sẵn sàng để phân loại công việc của học sinh, hãy xem nó trên các thiết bị khác nhau, với các độ phân giải màn hình khác nhau. Tôi không, tuy nhiên, đề nghị bạn cũng làm cho họ cung cấp cho mỗi thiết bị css.

Đối với vấn đề đó, hãy xem một số trang StackExchange trên máy tính để bàn và điện thoại. Và đối với người giật điện, hãy nhìn vào cả nguồn và bảng định kiểu của một số trang.

2 comments
1 Luke Sawczak 31/07/2017
So sánh với chức năng là tốt. Tôi cho rằng tội lỗi đang được đề cập là trực tiếp cung cấp các thuộc tính phong cách trong mã nguồn HTML. Nếu vậy, nó có thể được so sánh với cơ thể của một phương pháp và chỉ cần gắn bó với nơi mà bạn sẽ gọi phương pháp. Phản tác dụng ở mức cực đoan.
no comprende 01/08/2017
Đối với một cú sốc thực sự, hãy nhìn vào nguồn và bảng định kiểu của các trang của Microsoft và Moodle! Chúng có thể dài hàng trăm dòng. Khái niệm ban đầu của HTML là nó sẽ làm việc trên các thiết bị "chưa tồn tại". Và hiện tại có rất nhiều kích cỡ màn hình mà nó có thể cũng chỉ là một biến.

AnoE 30/07/2017.

Để làm cho họ thực sự hiểu bạn có thể làm gì với CSS - only bằng một tệp CSS khác - đưa họ đến Zen Zen Garden . Với chính xác cùng một mã HTML cho mỗi trang và only thay thế tệp .css, bạn sẽ nhận được các trang hoang dã vô lý. Từ sự trống rỗng nhỏ bé thanh bình đến các khối cuộn 3D ...

Sau đó giải thích với họ rằng các skillset cần thiết để tạo HTML, so với CSS (đặc biệt là cực đoan như CSS) là khác nhau rất nhiều, và rằng HTML chức năng như là các tàu sân bay thông tin chỉ.

Một điểm đáng chú ý nữa là cài đặt trình đọc màn hình (dành cho người khiếm thị) - có những ứng dụng có giới hạn sử dụng miễn phí - để cho họ thấy HTML trông giống nhau như thế nào khi nói to.

Cũng chỉ ra rằng những công cụ cho người khiếm thị có thể ví dụ như trích xuất văn bản liên kết và vv từ HTML nếu nó được cấu trúc tốt, và điều này cũng làm cho nó có thể di chuyển một trang với bàn phím chỉ - đó có thể hữu ích nếu một rất nghiêng, ngay cả khi thị lực là tốt.

Cuối cùng, chỉ ra rằng một trang có sự tách biệt nội dung và kiểu dáng tốt có cơ hội làm việc trên các thiết bị di động cao hơn - từ khóa là thiết kế đáp ứng, ở đó nội dung có thể tự do chảy vào bất kỳ độ phân giải nào nếu cần.


thehayro 30/07/2017.

Để thu hẹp nó, tôi đang tìm kiếm các ví dụ hoặc giải thích về cách giảng dạy nó rõ ràng có thể làm cho nó dễ dàng hơn cho sinh viên để phong cách trang web của họ. Tốt hơn là một lời giải thích.

Như Richard nói, các em học sinh có thể thấy cách chỉnh sửa đơn giản kiểu này có thể thay đổi mọi yếu tố.

Ví dụ, bạn có thể để cho các em học sinh 'cảm thấy' lợi ích của cách ly của phong cách từ html. Có nghĩa là, cho họ một bài tập, nơi mà họ cần phải phong cách một số yếu tố (ví dụ như màu nền phần tử) trong html của họ. Sau đó, để chúng thay đổi từng phần tử thành màu khác. Bài học sẽ giúp họ hiểu rằng nhiệm vụ này có thể tốn ít thời gian hơn nếu bạn tách biệt phong cách khỏi html. Sau đó bạn có thể chứng minh làm thế nào để thay đổi một dòng trong css, thay đổi tất cả các yếu tố màu nền.

4 comments
thesecretmaster♦ 30/07/2017
HI thehayro! Chào mừng đến với các nhà giáo dục về Khoa học Máy tính !
Puppy 30/07/2017
Ngoài ra, họ có thể tạo ra HTML của họ thông qua mã như một người sane, trong trường hợp đó, tầm thường để thay đổi màu sắc của mỗi phần tử mà không có phong cách riêng biệt.
1 thehayro 30/07/2017
Chắc chắn rồi. Đó là tùy theo yêu cầu nơi trang web được hiển thị (di động / máy tính để bàn). Nhưng câu hỏi như tôi đã hiểu, đó là làm thế nào để giải thích tại sao và như thế nào cần phải tách HTML và CSS.
no comprende 01/08/2017
Khi tôi học CSS, tôi đã tự tạo cho mình những nhiệm vụ tạo ra một bàn cờ vua có thể tái tạo lại và bố trí trang 3 cột theo tiêu chuẩn với tiêu đề và chân trang.

SpiritBH 31/07/2017.

Tự hỏi bản thân: Tại sao chúng ta tách bất cứ thứ gì dưới bất kỳ dạng mã nào?

Trong hầu hết mọi ngôn ngữ lập trình / kịch bản, có sự tách biệt và phân quyền. Chúng tôi làm việc này để đảm bảo có thể dễ dàng theo dõi được tất cả các mã và có thể dễ dàng xác định các vấn đề (điều đó chắc chắn sẽ mọc lên vì không có lập trình viên nào là không sai lầm)

Vì vậy, tôi nghĩ rằng một bài học dành riêng cho CSS là một ý tưởng hay, bởi vì nó giúp họ hiểu những gì chịu trách nhiệm về nó. Nó giúp họ hiểu rằng nếu tất cả các HTML là chính xác khi nhìn vào nguồn, nhưng tất cả các trang điểm vẫn lộn xộn, rằng họ cần phải nhìn vào CSS.

Trên hết, CSS là lớn, linh hoạt và có thể làm nhiều hơn là chỉ đặt một đường viền tốt đẹp xung quanh mọi thứ. Để hiển thị lớp học, nó có thể làm gì, và nó phức tạp như thế nào, sẽ đẩy điểm này đến tận nhà hơn là làm cho HTML và CSS quá sâu sắc.

Cuối cùng, tách CSS từ HTML (hoặc bất kỳ mã nào cho vấn đề đó) là một điều khoản phát triển; nó không phải về việc tạo ra chức năng (tốt hơn) của nó về các nhà phát triển có kiểm soát dễ dàng hơn và nhiều hơn nữa về sáng tạo của họ.

Có thể trong lưu ý đó bạn muốn thử và kiểm tra lại lớp của mỗi người khác, nó sẽ giúp họ thấy được làm thế nào để có mã được ủy nhiệm sạch sẽ khi bạn làm việc trong một nhóm.

1 comments
ItamarG3 31/07/2017
bạn nêu ra một số điểm rất thú vị. Cảm ơn! và chào mừng các nhà giáo dục Khoa học Máy tính

gabe3886 31/07/2017.

Một cách hơi khác để nhìn vào nó có thể là để giới thiệu mã DRY (Do not Repeat Yourself).

Bằng cách sử dụng CSS để tạo kiểu dáng, bạn biết rằng bằng cách đơn giản thêm một lớp vào một phần tử HTML, kiểu dáng nên giữ. Nếu bạn phải tự thêm tất cả, sau đó khi bạn cần thay đổi một phần, bạn cần phải thay đổi nhiều, nhiều hơn nữa.

Để ăn cắp một ý tưởng minh hoạ từ trường W3 , nếu bạn muốn, nói, các đoạn văn có màu nền khác nhau, bạn có thể làm theo cách này:

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

Nhưng, nếu tôi muốn thay đổi thứ tự vì vậy nó là 2,4,3,1 nhưng giữ cho màu sắc, sau đó tôi phải thay đổi tất cả các phong cách được xây dựng trong mỗi thẻ. Nếu đó là trên nhiều trang, sau đó tải công việc có thể đến rất lớn.

Nếu tôi đã làm nó trong CSS, tôi có thể làm như sau:

p:nth-child(odd) {
    background: red;
}

p:nth-child(even) {
    background: blue;
} 

Bây giờ nó không còn quan tâm đến những gì nội dung, tôi có thể đặt họ như thế nào tôi thích và phong cách vẫn hoạt động. Rất nhiều nỗ lực đã thay đổi. Bỏ qua việc đặt hàng, nếu tôi muốn thay đổi chúng thành màu sắc hợp lý hơn để chúng có thể đọc được dễ dàng, tôi sẽ thay đổi giá trị trong CSS một lần và nó được áp dụng cho mỗi mục DOM khớp.

Hơn thế nữa (vì CSS có thể được nhúng trong HTML trong thẻ head), tách nó ra thành một tệp và bao gồm cả điều đó không có nghĩa tôi không phải lặp lại CSS (bây giờ là hợp lý hơn) vào các tệp tin khác nhau, vào các cấu trúc thư mục cho mỗi trang tôi có. Tôi bao gồm các tập tin CSS trong tiêu đề và phong cách có hiệu lực. Bây giờ nếu tôi cần phải thực hiện thay đổi màu sắc hoặc thêm phong cách bổ sung, tôi nhận được những lợi ích tương tự mà không cần phải lặp lại mà tôi đã có từ không sử dụng các phong cách nội tuyến.

Một lợi ích khác từ việc có một tệp riêng biệt, tách biệt với trách nhiệm chia tách, là hiệu suất. Các trình duyệt khá tốt ở các tệp tin lưu vào bộ nhớ đệm, vì vậy nếu tải xuống một tệp CSS (lý tưởng nhất) cho trang web một khi nó có thể áp dụng lại, thì sẽ ít hơn một điều để tải xuống cho các trang khác. Hiệu suất nên luôn luôn được xem xét cho mọi người, đặc biệt là với sự gia tăng trong duyệt web di động. Nếu một trang web có rất nhiều CSS trong nó thì nguồn là, tự nhiên, lớn. Quá trình tải xuống và / hoặc trở nên có thể sử dụng được lâu hơn, có thể khiến mọi người khỏi phải chờ sự chấp nhận trở nên không chấp nhận được đối với họ.


ncmathsadist 01/08/2017.

Chúng tôi dạy rằng có ba lớp cho một trang web: cấu trúc, ngoại hình, và hành vi. Cấu trúc được xác định bởi DOM, được tạo ra với đánh giá HTML5 tốt. Khi chúng ta tìm hiểu về HTML, ngay lập tức chúng ta bắt đầu vẽ cây tài liệu, vì vậy chúng ta có thể hiểu các phần tử trên một trang liên quan đến nhau như thế nào.

Xuất hiện được xác định bởi CSS, truy cập vào DOM để định dạng và cách trang. Điều này được lưu giữ trong một tệp riêng biệt để nó có thể được chia sẻ bởi một nhóm các trang có liên quan. HTML xử lý những trường hợp quảng cáo bằng cách sử dụng id hoặc class . Sử dụng những điều này làm cho việc duy trì các trang dễ dàng hơn, vì phong cách cho các mục mang các thuộc tính này được thực hiện ở one place trong một tệp CSS.

Lớp thứ ba là hành vi, nó sẽ xuất hiện trong một tệp JavaScript. JavaScript never cần xuất hiện trên trang, tiết kiệm cho chức năng gọi từ mã xử lý sự kiện. Ngay cả điều này có thể được đính kèm trong một tập tin JS. Đảm bảo sinh viên của bạn biết về các sự kiện loadload sớm, để họ có thể trì hoãn việc gọi mã cho đến khi các phần tử trang tồn tại.

Nếu bạn cài đặt Node, bạn có thể chạy thử nghiệm mã JS ở dòng lệnh và phát triển các bộ kiểm tra cho các chức năng bạn đã tạo.

Tách ba lớp giữ mọi thứ gọn gàng và tối đa hóa việc tái sử dụng mã.


user1639154 31/07/2017.

Có vẻ như nhiều câu trả lời ở đây không đề cập đến điểm thừa kế về kiểu dáng, vì điều này cũng nên được giảng dạy. Nguyên tắc cơ bản là những gì được đọc lần cuối sẽ được áp dụng.

người đầu tiên nạp thường là tờ bên ngoài trong phần đầu của tài liệu. Một bảng kiểu được liên kết trong đầu của tài liệu sẽ được ridden bởi các kiểu được đặt trong dòng nội tuyến trong cơ thể html, và những kiểu này cũng sẽ được ghi đè bởi các kiểu được đặt trực tiếp trên phần tử DOM. Thẻ quan trọng cũng có thể được sử dụng để thay đổi hành vi này.

Hầu hết sẽ đặt tất cả các css của họ vào tập tin riêng của nó vì nó dễ dàng hơn để duy trì và sẽ không yêu cầu làm việc nhiều khi cập nhật / thay đổi.

EDIT: Chỉ để làm rõ hơn một chút nữa, nó chỉ là những kiểu cụ thể phù hợp trong các lớp mà sẽ đụng độ / ghi đè lên nhau, nếu một dòng nội tuyến thêm một kiểu cho văn bản gạch dưới, không có trong lớp trong tờ ngoài cho ví dụ nó sẽ chỉ thêm rằng phong cách thêm. Các lớp học không trực tiếp thay thế nhau nhưng hợp nhất vào nhau.

5 comments
1 ItamarG3 31/07/2017
Wow. Chào mừng các bạn đến với các nhà giáo dục Khoa học Máy tính . Đây thực sự là điều tôi chưa xem xét. Tôi rất thích nó nếu bạn có thể thêm một số ví dụ hoặc mô tả cho thấy điều đó. (Tôi can viết bản thân mình, nhưng tôi quan tâm đến việc xem những gì bạn nghĩ ra). Đây thực sự là một câu trả lời thú vị :)
1 ItamarG3 31/07/2017
Không liên quan: tại sao bạn không đi tour của chúng tôi? Tôi chắc rằng bạn sẽ cảm thấy thú vị.
user1639154 31/07/2017
Tôi đã nhận nó hơi sai, tờ kiểu dáng bên ngoài của nó trước tiên, sau đó tài liệu phong cách và sau đó trên các yếu tố, não của tôi là không bao giờ 100% vào một buổi sáng thứ hai. :)
ItamarG3 31/07/2017
tha thứ và quên đi ;). Bạn có thể chỉnh sửa câu trả lời của bạn. Có nút edit \ liên kết trực tiếp dưới câu trả lời của bạn. Trong khi bạn đang ở đó, bạn có muốn thêm một số ví dụ để chứng minh câu trả lời của bạn là địa chỉ? Nó thực sự làm cho nó thành một câu trả lời tốt hơn nhiều: D
user1639154 31/07/2017
Thật không may tôi không có thời gian ngay bây giờ. Tôi chỉ muốn đề cập đến thừa kế css, vì nó là khía cạnh quan trọng của css.

rackandboneman 03/08/2017.

Thực hiện một dự án trong đó kết quả là hai lần xem same document , ví dụ như một phiên bản trông tuyệt vời trên màn hình lớn và một màn hình trông tuyệt vời trên iPhone.

Sử dụng không phải là một trang web tĩnh nhưng các tài liệu có thể cập nhật được tạo bởi máy tính sẽ đẩy điểm về nhà nhiều hơn, vì việc nhúng thông tin kiểu dáng trong trình tạo tài liệu sẽ làm cho nó trở nên phức tạp hơn - chỉ những lựa chọn gây rối với phong cách sẽ thay đổi generator tài liệu tất cả những rắc rối liên quan hoặc các stylesheet mà là chính xác những gì bạn dự định. Thậm chí tốt hơn: Chỉ định two nhóm ở các góc riêng biệt của phòng để làm việc tạo tài liệu và các phần của bảng định kiểu - và điều chỉnh cách thức truyền thông giữa hai đối tượng.

4 comments
ItamarG3 03/08/2017
Điều này thật phi thường. Wow.
rackandboneman 03/08/2017
Vâng, làm cho nó đáng tin cậy sau đó.
ItamarG3 03/08/2017
Thật không thể tin được vì nó giải quyết vấn đề với hoàn cảnh mà tôi không thể tiết lộ (trường học), nhưng nó không exactly câu hỏi ...
1 rackandboneman 03/08/2017
Oh, và tôi đang can thiệp vào cuộc thảo luận chứ không phải là một giáo viên nhưng là một chuyên gia CNTT - tôi mô tả điều gì là lý do tại sao mọi thứ được thực hiện trong thực tế giống như lý thuyết mà bạn muốn dạy :)

Chris M. 02/08/2017.

Có rất nhiều câu trả lời tốt ở đây. Một điểm tôi chưa từng thấy là nội dung và thiết kế thường được tạo ra bởi những người hoặc nhóm riêng biệt, và vì vậy mỗi công cụ được xác định bằng các công cụ và ngôn ngữ riêng của nó cho phép các quy trình công việc riêng biệt cần thiết.

4 comments
ItamarG3 02/08/2017
Wow. Tôi đã không nghĩ về điều đó. Bạn có thể mở rộng một chút về cách tôi có thể giải thích điều này trong một bài học riêng về sử dụng bảng định kiểu CSS?
Chris M. 02/08/2017
Tôi sẽ sử dụng một sự tương tự. Kỹ sư ô tô không chọn màu xe. Người viết kịch bản thường không thiết kế trang phục.
ItamarG3 02/08/2017
Tôi hiểu rồi. Có lẽ bạn nên bao gồm những sự tương tự trong câu trả lời của bạn bằng cách chỉnh sửa câu trả lời.
1 Buffy 03/08/2017
Trên thực tế nó còn tệ hơn thế. Tại một số công ty lớn có sự hiện diện web quan trọng, có một nhóm tiêu chuẩn ngồi trên cả nhóm nội dung và bố trí. Nếu bố cục là một pixel tắt của tiêu chuẩn, bạn làm điều đó hơn. Một pixel.

thesecretmaster 03/08/2017.

Một lý do quan trọng tại sao các kiểu nội tuyến là xấu là khả năng đọc mã, đơn giản và đơn giản. Trong trường hợp này, một ví dụ nên là đủ để chứng minh quan điểm của bạn:

  
The Title
This is a super great article

So với:

  
The Title
This is a super great article

Ngoài ví dụ này, không sử dụng các lớp và id, bạn làm cho DOM khó khăn hơn để thao tác sử dụng javascript và bạn làm cho nó không thể sử dụng các phần tử giả và một số các bộ chọn CSS thực sự tuyệt vời như :nth-child():first-child , để đặt tên cho một vài.


Puppy 31/07/2017.

Tôi hoàn toàn không đồng ý - kiểu dáng nên được thực hiện trực tiếp trong HTML.

Vấn đề chính là kiểu dáng thậm chí không phải là từ xa độc lập với cấu trúc HTML. Đơn giản chỉ cần viết các phong cách trong một tập tin thể chất riêng biệt không thay đổi này. Một ví dụ điển hình là hỗ trợ thiết bị di động. Về lý thuyết, bạn có thể tạo một tệp CSS di động. Nhưng trên thực tế, bạn có thể cần một thiết kế giao diện người dùng hoàn toàn riêng biệt để tạo ra trải nghiệm tốt trên thiết bị di động, và sau đó là một cấu trúc HTML riêng để hỗ trợ việc này, và sau đó là một bộ phong cách riêng biệt. "Làm cho nút giống nhau nhưng một chút nhỏ hơn" chỉ hoạt động cho những mảnh nhỏ nhất.

Sản xuất giao diện chính xác bao gồm việc tạo ra cấu trúc HTML hỗ trợ các kiểu bạn cần. Kể từ khi hai trong thực tế, kết hợp chặt chẽ, có được colocated chỉ làm cho mọi thứ dễ hiểu và tất cả ở một nơi.

Hơn nữa, vì bạn có thể tạo mã HTML của bạn thông qua mã, không có vấn đề gì với việc tạo HTML với các kiểu trùng lặp, vì trình tạo mã của bạn có thể nhổ ra các kiểu trong suốt cả ngày.

Việc CSS thô là một vấn đề rất phức tạp bởi phong cách hoàn toàn ngẫu nhiên và ở phạm vi toàn cầu, và khó sử dụng lại. Bạn tạo một tên lớp với hy vọng rằng không ai khác sử dụng nó. Bạn tổ lớp riêng của bạn bên trong phần tử đó để cố gắng giải quyết vấn đề này một chút nhưng bây giờ bạn không thể sử dụng lại các lớp này ở những nơi khác vì chúng không có trong cấu trúc DOM đúng. Sau đó, bạn tìm ra rằng một số ngẫu nhiên ngẫu nhiên trong một số phần riêng biệt của trang đã sử dụng lớp học của bạn mà không thông báo cho bạn và bây giờ bạn đã chia nhỏ nó bằng cách thay đổi kiểu của bạn. Và cũng may mắn khi kiểm tra kiểu, hỗ trợ IDE, vv. Cũng rất khó để tạo ra các lớp được tham số hóa, hoặc áp dụng các thay thế trên toàn cầu, ví dụ như display: flex với display: flexdisplay: -webkit-flex cho iOS.

Cách chính xác để đối xử với phong cách là để đối phó với họ như với bất kỳ mã khác - gói gọn chúng trong một số chức năng.

5 comments
1 thesecretmaster♦ 31/07/2017
Hi Puppy, chào mừng các nhà giáo dục Khoa học Máy tính ! Nếu bạn muốn gặp một con chó con khác, bạn có thể nói chào với Buffy , người là một bulldog, trong cuộc trò chuyện . Đây là một câu trả lời thú vị, cảm ơn đã chia sẻ quan điểm của bạn ở đây!
2 richard 31/07/2017
Trong khi tôi không đồng ý với mọi thứ bạn nói. Tôi nhìn thấy quan điểm của bạn. Đặc biệt là dòng cuối cùng (tôi nghĩ bạn nên mở rộng về điều này). Cho chúng tôi biết cách bạn nghĩ nó nên được thực hiện như thế nào. Thậm chí nếu chúng ta không đồng ý 100%, chúng ta có thể học được điều gì đó.
no comprende 01/08/2017
Câu trả lời của bạn nhắc nhở tôi về thời điểm tôi hỏi một câu hỏi và ai đó nói, "Nếu bạn đọc Thánh Lễ bằng tiếng Latinh." Có rất nhiều cách "đúng đắn" để làm việc, và theo quan điểm của bạn, với HTML được tạo ra, thực sự nó không tạo ra sự khác biệt. Nhưng hầu hết các giảng viên không dạy HTML được tạo ra, giống như hầu hết các lập trình viên không biết cách viết trình biên dịch. Lớp mà chúng tôi bổ sung để đảm bảo việc duy trì các tệp HTML dễ dàng hơn là không cần thiết với HTML. Tôi cũng muốn tạo ra những thứ, nhưng tôi trong số đông thiểu số. Có lẽ chúng ta có thể nói về Domain Specific Languages ​​đôi khi?
Puppy 01/08/2017
Giảng viên không dạy HTML được tạo ra không dạy HTML hữu ích.
ItamarG3 02/08/2017
@ Puppy Có phải vậy không?

HighResolutionMusic.com - Download Hi-Res Songs

1 The Chainsmokers

Beach House flac

The Chainsmokers. 2018. Writer: Andrew Taggart.
2 (G)I-DLE

POP/STARS flac

(G)I-DLE. 2018. Writer: Riot Music Team;Harloe.
3 Ariana Grande

​Thank U, Next flac

Ariana Grande. 2018. Writer: Crazy Mike;Scootie;Victoria Monét;Tayla Parx;TBHits;Ariana Grande.
4 Anne-Marie

Rewrite The Stars flac

Anne-Marie. 2018. Writer: Benj Pasek;Justin Paul.
5 Clean Bandit

Baby flac

Clean Bandit. 2018. Writer: Jack Patterson;Kamille;Jason Evigan;Matthew Knott;Marina;Luis Fonsi.
6 Nicki Minaj

No Candle No Light flac

Nicki Minaj. 2018. Writer: Denisia “Blu June” Andrews;Kathryn Ostenberg;Brittany "Chi" Coney;Brian Lee;TJ Routon;Tushar Apte;ZAYN;Nicki Minaj.
7 BlackPink

Kiss And Make Up flac

BlackPink. 2018. Writer: Soke;Kny Factory;Billboard;Chelcee Grimes;Teddy Park;Marc Vincent;Dua Lipa.
8 Imagine Dragons

Bad Liar flac

Imagine Dragons. 2018. Writer: Jorgen Odegard;Daniel Platzman;Ben McKee;Wayne Sermon;Aja Volkman;Dan Reynolds.
9 BTS

Waste It On Me flac

BTS. 2018. Writer: Steve Aoki;Jeff Halavacs;Ryan Ogren;Michael Gazzo;Nate Cyphert;Sean Foreman;RM.
10 Halsey

Without Me flac

Halsey. 2018. Writer: Halsey;Delacey;Louis Bell;Amy Allen;Justin Timberlake;Timbaland;Scott Storch.
11 Little Mix

Woman Like Me flac

Little Mix. 2018. Writer: Nicki Minaj;Steve Mac;Ed Sheeran;Jess Glynne.
12 Brooks

Limbo flac

Brooks. 2018.
13 Fitz And The Tantrums

HandClap flac

Fitz And The Tantrums. 2017. Writer: Fitz And The Tantrums;Eric Frederic;Sam Hollander.
14 Backstreet Boys

Chances flac

Backstreet Boys. 2018.
15 Lady Gaga

I'll Never Love Again flac

Lady Gaga. 2018. Writer: Benjamin Rice;Lady Gaga.
16 Diplo

Close To Me flac

Diplo. 2018. Writer: Ellie Goulding;Savan Kotecha;Peter Svensson;Ilya;Swae Lee;Diplo.
17 Rita Ora

Velvet Rope flac

Rita Ora. 2018.
18 Bradley Cooper

Always Remember Us This Way flac

Bradley Cooper. 2018. Writer: Lady Gaga;Dave Cobb.
19 Imagine Dragons

Machine flac

Imagine Dragons. 2018. Writer: Wayne Sermon;Daniel Platzman;Dan Reynolds;Ben McKee;Alex Da Kid.
20 Erika Sirola

Speechless flac

Erika Sirola. 2018. Writer: Teemu Brunila;Stefan Dabruck;Jürgen Dohr;Guido Kramer;Dennis Bierbrodt;Chris Braide;Robin Schulz.

Related questions

Hot questions

Language

Popular Tags