Phương pháp của HTML
|
Đây là những khái niệm đóng khung đằng sau một kiến trúc và cấu trúc của nó. Các kỹ sư hệ thống quan tâm và mới bắt đầu được khuyến khích sử dụng ISO/IEC/IEEE 42010 để biết cơ sở khái niệm về mô tả kiến trúc hệ thống. ARC-IT, giống như CVRIA và Kiến trúc ITS quốc gia trước đó, thúc đẩy sự tham gia của các bên liên quan, cả trực tiếp và gián tiếp thông qua việc kiểm tra các tài liệu liên quan đến ITS đã xuất bản (Khái niệm về hoạt động, Yêu cầu hệ thống, Tiêu chuẩn, v.v. ) để cung cấp cơ sở cho các khái niệm kiến trúc Show
Kiến trúc tạo cơ sở cho định nghĩa ngôn ngữ chung của cả ITS (cũ) đã được thiết lập và C-ITS ban đầu hoặc các khái niệm triển khai phương tiện được kết nối. ARC-IT là một kiến trúc tham chiếu. nó cung cấp cơ sở cho việc thực hiện khu vực và địa phương. Người triển khai dự kiến sẽ tùy chỉnh kiến trúc theo nhu cầu của riêng họ. đầu tiên bằng cách tạo ra một kiến trúc khu vực mô tả tầm nhìn dài hạn của khu vực họ quan tâm, sau đó xác định các dự án trong kiến trúc khu vực đó và cuối cùng bằng cách phát triển các kiến trúc hệ thống dự án chi tiết. Bộ công cụ liên quan của ARC-IT cung cấp các công cụ cho phép các hoạt động này. RAD-IT cung cấp các chức năng định nghĩa kiến trúc dự án và phát triển kiến trúc khu vực, trong khi SET-IT lấy các định nghĩa dự án đó và cho phép tạo ra các tạo phẩm cấp thiết kế ARC-IT là một kiến trúc đơn lẻ bao gồm bốn quan điểm. Vật lý, Chức năng, Truyền thông và Doanh nghiệp. Những quan điểm này đóng khung các mối quan tâm của các bên liên quan ARC-IT. Các quan điểm được mô hình hóa dưới dạng các sơ đồ, bảng và cơ sở dữ liệu liên quan khác nhau. Các quan điểm có liên quan thông qua các quy tắc tương ứng khác nhau và có thể cần được xem xét cùng nhau tùy thuộc vào nhiệm vụ của người dùng. Ví dụ, những người quan tâm đến quy hoạch vùng có lẽ quan tâm nhất đến nội dung trong quan điểm vật lý và doanh nghiệp, trong khi những người quan tâm đến việc thực hiện dự án cũng cần xem xét quan điểm truyền thông. HTML. Thuộc tính phương thức được sử dụng để chỉ định phương thức HTTP được sử dụng để gửi dữ liệu trong khi gửi biểu mẫu. Có hai loại Phương thức HTTP, đó là GET và POST. Thuộc tính phương thức có thể được sử dụng với phần tử. Thuộc tính Dữ liệu biểu mẫu có thể được gửi dưới dạng biến URL (với CSS nổi tiếng là khó quản lý trong các hệ thống lớn, phức tạp và lặp đi lặp lại nhanh chóng. Một lý do là CSS thiếu cơ chế xác định phạm vi tích hợp. Mọi thứ trong CSS là toàn cầu Điều đó có nghĩa là bất kỳ thay đổi nào bạn thực hiện đều có khả năng xếp tầng và thay đổi cách trình bày các bit không liên quan của giao diện người dùng. Ngôn ngữ CSS mở rộng, một. k. a. Các bộ tiền xử lý CSS, chẳng hạn như Sass, Less và Stylus giúp mọi thứ dễ dàng hơn một chút bằng cách cung cấp các tính năng giúp viết CSS dễ dàng hơn Nhưng theo tôi, ngay cả những ngôn ngữ CSS mở rộng này cũng không thực sự khắc phục được vấn đề về khả năng mở rộng. Cho đến khi CSS có được cơ chế phạm vi riêng, chúng ta cần tạo ra hệ thống của riêng mình để khóa các kiểu đối với các phần cụ thể của tài liệu HTML. Phương pháp CSS là giải pháp Trong bài viết này, chúng ta sẽ xem xét các phương pháp CSS này tiết lộ đầy đủ. Tôi là người tạo CSS có hệ thống. Các phương pháp CSS là các hệ thống chính thức, được ghi lại để tạo CSS theo cách cho phép chúng tôi phát triển, duy trì và mở rộng giao diện người dùng dưới dạng một tập hợp các mô-đun nhỏ, biệt lập. Thay vì là một khối lớn mã không thể chia cắt. Áp dụng phương pháp CSS — ngay cả khi đó là phương pháp do bạn tự tạo — sẽ giúp bạn dễ dàng thiết kế và lặp lại các dự án thiết kế web của mình, bất kể quy mô và độ phức tạp Có liên quan. Phát triển CSS tại các trang web quy mô lớn Mỗi phương pháp CSS cung cấp một bộ giải pháp hơi khác nhau cho vấn đề về khả năng mở rộng/bảo trì CSS. Một phương pháp CSS thường sẽ xác định các nguyên tắc cho Không có phương pháp CSS “tốt nhất”. Các cách tiếp cận khác nhau hoạt động tốt hơn cho các cá nhân/nhóm/dự án khác nhau Hy vọng rằng việc xem xét một vài phương pháp CSS hiện có sẽ giúp bạn khám phá ra một phương pháp phù hợp với nhu cầu của mình. Hoặc nó có thể truyền cảm hứng cho bạn để tạo các nguyên tắc soạn thảo CSS tùy chỉnh của riêng bạn Phương pháp này phân biệt rõ ràng giữa nội dung và vùng chứa của nó. Trong OOCSS, quy tắc kiểu được viết riêng bằng cách sử dụng bộ chọn lớp CSS Ví dụ về OOCSSVí dụ: kiểu của các phần tử
CSS HTML Một mục tiêu của phương pháp OOCSS là giảm trùng lặp các thuộc tính giống nhau trong các quy tắc kiểu khác nhau của bạn Nói cách khác, OOCSS có thể giúp chúng ta duy trì DRY stylesheets. Phương pháp cố gắng đạt được mục tiêu này bằng cách sử dụng nhiều lớp CSS nhỏ, mô-đun, chuyên gia. Rất ít thuộc tính kiểu được áp dụng thông qua bộ chọn kiểu (e. g phản ví dụViệc sử dụng bộ chọn con cháu không được khuyến khích. Ví dụ. CSS Bằng cách này, việc trình bày các phần tử HTML của bạn không bao giờ phụ thuộc vào việc chúng được sử dụng trong một ngữ cảnh hoặc cấu trúc DOM cụ thể. Điều tuyệt vời về phương pháp OOCSS là nó khuyến khích các tác giả tận dụng tối đa hành vi xếp tầng của CSS, thay vì cố gắng khóa nó bằng các bộ chọn có tính đặc hiệu cao. Có liên quan. Cách thức hoạt động của tính đặc hiệu CSS Các tác giả được khuyến khích, bất cứ khi nào có thể, sử dụng lại các quy tắc kiểu hiện có thay vì tạo các quy tắc mới Chúng tôi cũng được khuyến khích mở rộng các quy tắc kiểu bằng cách chỉ định các thuộc tính CSS bổ sung với các lớp mới, thay vì sửa đổi hoặc ghi đè lên các thuộc tính CSS hiện có phản ví dụGiả sử chúng ta muốn cung cấp cho mục danh sách đầu tiên của phần tử danh sách không có thứ tự một màu khác. Đây là một cách để làm điều đó. HTML CSS Ví dụ về OOCSSĐể làm cho CSS của chúng ta trở nên mô-đun và linh hoạt hơn, đồng thời để tránh các bộ chọn con cháu, ví dụ ngược lại ở trên có thể được viết lại theo cách này. HTML CSS Nhược điểm chính của OOCSS là bạn có thể kết thúc với rất nhiều lớp học Có thể khó duy trì và quản lý. Và, theo ý kiến của tôi, khái niệm lập trình hướng đối tượng — vốn là nguồn cảm hứng của OOCSS — không phù hợp thoải mái với CSS. Nhưng điều đó không có nghĩa là các nguyên tắc của OOCSS là không hợp lệ Ngược lại, OOCSS là một phương pháp CSS thông thường mang lại sự tỉnh táo cho quá trình phát triển CSS quy mô lớn Khối, Phần tử, Công cụ sửa đổi (BEM) Điều này được thực hiện bằng cách đặt tên các lớp CSS theo cách chỉ ra vai trò của chúng. BEM bổ sung cho OOCSS vì OOCSS không áp đặt bất kỳ quy ước đặt tên lớp cụ thể nào. Theo thuật ngữ BEM, một khối là một thành phần giao diện người dùng mô-đun, độc lập Một khối có thể bao gồm nhiều phần tử HTML hoặc thậm chí nhiều khối. Một ví dụ về khối có thể là menu điều hướng hoặc biểu mẫu tìm kiếm của bạn. Một phần tử là một thành phần của một khối Một yếu tố phục vụ một mục đích duy nhất. Ví dụ: nếu bạn có một khối menu điều hướng, thì các phần tử của khối đó có thể là các liên kết của menu điều hướng của bạn, do đó, các liên kết này có thể ở dạng các mục danh sách ( Đây là cú pháp đặt tên lớp BEM
phản ví dụXem xét ví dụ sau, đánh dấu cho biểu mẫu đăng nhập. HTML Ví dụ BEMĐây là đánh dấu ở trên với các lớp BEM được áp dụng. HTML Lớp Ba công cụ sửa đổi là Công cụ sửa đổi Mô tảQuy ước đặt tên BEM giúp các tác giả CSS tuân thủ nguyên tắc OOCSS trong việc sử dụng hệ thống phân cấp bộ chọn phẳng bao gồm các bộ chọn lớp cụ thể như nhau. Nó cũng giúp các tác giả OOCSS tránh các bộ chọn hậu duệ sâu phản ví dụVì vậy, thay vì quy tắc kiểu sau, sử dụng ba bộ chọn lớp CSS… CSS Ví dụ BEM…bạn chỉ có thể sử dụng một bộ chọn lớp duy nhất. CSS BEM là một quy ước đặt tên lớp rất mạnh mẽ. Nó phân biệt thành công các mối quan tâm khác nhau mà các lớp được sử dụng cho. Và thật dễ dàng để thấy trong phần đánh dấu các lớp nào có liên quan đến nhau Một vài lời chỉ trích chủ quan đối với BEM là
Cá nhân tôi không nghĩ đó là những lời chỉ trích đặc biệt mạnh mẽ. Tuy nhiên, sẽ rất tuyệt nếu có một quy ước đặt tên lớp mạnh mẽ như BEM, đồng thời gọn gàng và trực quan hơn một chút Kiến trúc mô-đun và có thể mở rộng cho CSS (SMACSS)ví dụ ví dụ Chủ đềLà các quy tắc kiểu ảnh hưởng đến bố cục và mô-đun, được kích hoạt bởi tùy chọn/hành động/bối cảnh xem của người dùng SMACSS cung cấp quy ước đặt tên đơn giản hơn BEM Không có tên cho kiểu cơ sở vì chỉ có bộ chọn kiểu ( Ví dụ SMACSSGiả sử bố cục của chúng ta có tên là Đây có thể là đánh dấu của chúng tôi. HTML SMACSS không khuyến khích sử dụng bộ chọn con cháu. Jonathan Snook giải thích điều này bằng cách giới thiệu một khái niệm mà ông gọi là độ sâu của khả năng áp dụng. Khái niệm này là tất cả về việc hạn chế tác động của CSS đối với đánh dấu HTML bằng cách sử dụng các lớp để nhắm mục tiêu rất chính xác các phần tử bạn muốn tạo kiểu PHÙ HỢP VỚI CSS
Quy ước đặt tên lớp này làm nổi bật sự phân chia giữa
Ví dụ CSS SUITĐây là cách phương pháp CSS này có thể được áp dụng cho biểu mẫu đăng nhập. HTML CSS có hệ thốngCSS có hệ thống dựa trên hệ thống tạo CSS mà tôi đã tinh chỉnh trong nhiều năm khi làm việc cho nhiều công ty khởi nghiệp công nghệ khác nhau. CSS có hệ thống là cách cá nhân tôi soạn các thiết kế web. CSS có hệ thống chia sẻ nhiều nguyên tắc và ý tưởng mà bạn có thể tìm thấy trong OOCSS, BEM, SMACSS, SUIT CSS và các phương pháp CSS khác CSS có hệ thống có nghĩa là một giải pháp thay thế đơn giản hơn cho các phương pháp CSS hiện có. Có ít quy ước đặt tên cần nhớ hơn và quy ước đặt tên lớp nhằm mục đích trực quan hơn. Trong phương pháp CSS có hệ thống, quá trình phát triển một thiết kế web mới được chia thành bốn giai đoạn
Ví dụ CSS có hệ thốngHTML Đầu tiên, một bố cục giống như khung dây trống được tạo từ một loạt các phần tử phân chia, chẳng hạn như Thứ hai, chúng tôi thiết lập bản trình bày mặc định cho các phần tử HTML sẽ đóng gói nội dung và hiển thị các điều khiển tương tác. Ví dụ bao gồm tiêu đề ( Thứ ba, chúng tôi xác định các mẫu nội dung lặp lại trong thiết kế của mình. Chúng tôi kết hợp các mẫu định kỳ này thành các mô-đun đánh dấu và tạo kiểu độc lập (và tạo tập lệnh nếu cần). Các gói mẫu nội dung định kỳ này được gọi là widget trong phương pháp Systematic CSS Ví dụ CSS có hệ thốngĐây là đánh dấu cho hai tiện ích hiển thị thanh điều hướng và biểu mẫu tìm kiếm. HTML Nội dung — ở dạng tiện ích con và các phần tử HTML trần trụi — sau đó được đặt trong bố cục. Cuối cùng, các lớp sửa đổi được thêm vào để thay đổi cách trình bày mặc định của mọi thứ Ví dụ CSS có hệ thốngTrong ví dụ sau, công cụ sửa đổi Trong CSS có hệ thống, mỗi lớp hoặc
Các lớp học phải thuộc một trong ba mục đích riêng biệt ở trên Một lớp không được kết hợp/kết hợp các mục đích trên với nhau. Ba loại lớp áp dụng các quy ước đặt tên khác nhau, để dễ dàng phân biệt chúng Loại lớpCasingLayoutĐiều thú vị về quy ước đặt tên này là hệ thống phân cấp của các lớp được thể hiện bằng cách viết hoa của chúng. Các lớp bố cục, được viết bằng các chữ cái viết hoa, hét lên từ phần đánh dấu. ví dụ. ví dụ. Tóm lại làTất cả các phương pháp CSS giải quyết vấn đề về khả năng mở rộng và khả năng bảo trì trong CSS bằng cách cung cấp một hệ thống dựa trên lớp để chia các thiết kế web lớn thành nhiều đơn vị nhỏ, mô-đun, riêng biệt. Mỗi mô-đun giao diện người dùng có thể được sử dụng lại nhiều lần trong suốt một thiết kế và thậm chí được chuyển từ dự án này sang dự án khác nếu hai dự án chia sẻ cùng một phương pháp CSS. Trong quá trình này, các phương pháp CSS làm được nhiều việc hơn là khắc phục sự cố về khả năng mở rộng CSS Chúng làm cho việc phát triển và lặp lại một thiết kế trở nên dễ dàng hơn. Chúng làm cho mã front-end dễ đọc và dễ hiểu hơn, cung cấp tài liệu làm sẵn và giúp nhiều người cộng tác trên một thiết kế dễ dàng hơn. Việc áp dụng phương pháp CSS có thể giảm thời gian học tập cho các nhà thiết kế mới tham gia dự án và giúp quá trình chuyển đổi suôn sẻ hơn khi dự án được bàn giao cho một nhóm mới Và bởi vì các phương pháp CSS khuyến khích sử dụng lại mã hiện có, chúng thực thi tính nhất quán trong thiết kế trực quan, đồng thời giảm kích thước trang và tăng tốc độ hiển thị trang. Các phương pháp CSS có các quy ước đặt tên lớp khác nhau và chúng khắc các thiết kế web theo các dòng hơi khác nhau. Nhưng các chi tiết cụ thể của bất kỳ phương pháp cụ thể nào ít quan trọng hơn các giải pháp chung mà chúng cung cấp để mô đun hóa mã giao diện người dùng và giúp CSS dễ dàng mở rộng quy mô hơn Bạn có thể loại bỏ các ý tưởng và phát triển các danh mục lớp của riêng mình và đưa ra các quy ước đặt tên lớp phù hợp nhất với bạn. Đó là những gì tôi làm. CSS có hệ thống là điểm khởi đầu của tôi, nhưng mọi dự án đều khác nhau và tôi luôn điều chỉnh cũng như mở rộng phương pháp CSS của mình để phù hợp hơn với bộ kỹ năng và khí chất sáng tạo của nhóm mà tôi đang làm việc cùng Các phương pháp CSS khác
Nội dung liên quan
Mục lục
Tài nguyên liên quan
Dịch vụ của chúng tôi
Tài nguyên theo ngành
Trang web của bạn SEO như thế nào?Sử dụng công cụ miễn phí của chúng tôi để tính điểm của bạn trong vòng chưa đầy 60 giây làm việc với chúng tôi
Tiếp tục đọc
Nhận bài viết qua emailHãy là người đầu tiên biết khi chúng tôi xuất bản một bài đăng blog mới Mỗi ngày một lần một tuần Cập nhật Tham gia cùng 200.000 nhà quản lý tiếp thị và đăng ký Doanh thu hàng tuần Luôn kết nối với chúng tôiTuyển dụng WebFXTham gia sứ mệnh của chúng tôi để cung cấp các dịch vụ tiếp thị kỹ thuật số hàng đầu trong ngành cho các doanh nghiệp trên toàn cầu - đồng thời xây dựng kiến thức cá nhân của bạn và phát triển với tư cách cá nhân 5 công dụng của HTML là gì?HTML dùng để làm gì? . Cấu trúc các trang web. Với các thẻ và phần tử, chúng ta có thể xác định tiêu đề, đoạn văn và các nội dung khác của trang web. . Điều hướng internet. . Nhúng hình ảnh và video. . Cải thiện lưu trữ dữ liệu phía máy khách và khả năng ngoại tuyến. . Sự phát triển trò chơi. . Tương tác với API gốc BEM trong Javascript là gì?BEM (viết tắt của Block-Element-Modifier) là tiêu chuẩn quy ước đặt tên cho tên lớp CSS . Nó được áp dụng khá rộng rãi và vô cùng hữu ích trong việc viết CSS dễ đọc, dễ hiểu và dễ chia tỷ lệ hơn. |
