Cách tạo kiểu cho các ứng dụng mảnh dẻ

Các khung web đến rồi đi, nhưng một trong những khung hứa hẹn nhất là Svelte. Svelte là một giải pháp thay thế tuyệt vời cho React và mặc dù nó đã có một cộng đồng lớn, nhưng đây chắc chắn là một framework cần chú ý. Svelte giúp dễ dàng tạo kiểu cho ứng dụng của bạn, với một số cách tiếp cận có sẵn.

Ứng dụng Svelte Styling

Svelte cung cấp nhiều phương pháp để tạo kiểu ứng dụng, bao gồm nhập tệp CSS, sử dụng kiểu nội tuyến và sử dụng cú pháp thay thế được gọi là “khe”. Mỗi cách tiếp cận đều có những lợi ích và hạn chế riêng biệt mà các nhà phát triển nên cân nhắc cẩn thận khi lựa chọn cách nào phù hợp nhất với nhu cầu của họ.

Thiết lập dự án Svelte của bạn

Để cài đặt thành công Svelte bằng công cụ xây dựng giao diện người dùng ViteJS, điều cần thiết là phải cài đặt sẵn môi trường thời gian chạy Node.js và Trình quản lý gói Node (NPM) trên hệ thống của bạn. Cái sau có thể được xác nhận thông qua kiểm tra đơn giản qua Terminal bằng cách thực hiện lệnh sau:

 node -v

Sau khi đảm bảo rằng Node đang hoạt động, hãy khởi chạy phiên giao diện dòng lệnh và thực hiện liên tiếp các lệnh tiếp theo:

 npm create vite

Hoặc:

 yarn create vite

Để tạo một dự án dựa trên Svelte mới bằng Vite với cấu hình đã chỉ định, vui lòng làm theo các bước sau:1. Sử dụng lệnh vite init trong thiết bị đầu cuối hoặc môi trường phát triển tích hợp (IDE) của bạn để tạo dự án mới với các thông số kỹ thuật đã cho. Đảm bảo rằng dự án được tạo trong thư mục bạn chọn.2. Thay đổi thư mục làm việc hiện tại thành thư mục dự án mới được tạo bằng cách thực hiện lệnh cd theo sau là đường dẫn đến thư mục chứa các tệp dự án.3. Để thiết lập các phụ thuộc cần thiết cho dự án, hãy thực hiện các lệnh cài đặt thích hợp. Trong trường hợp này, nó sẽ liên quan đến việc cài đặt các gói như @sveltejs/kit , @sveltejs/vite và bất kỳ thư viện hoặc khung cần thiết nào khác cần thiết để xây dựng ứng dụng.

 npm install

Hoặc:

 yarn

Để bắt đầu quá trình phát triển, trước tiên người ta phải cài đặt bất kỳ phụ thuộc cần thiết nào cần thiết cho dự án. Để khởi tạo máy chủ phát triển, chỉ cần thực hiện lệnh thích hợp trong thiết bị đầu cuối hoặc dấu nhắc lệnh của bạn.

 npm run dev

Hoặc:

 yarn dev

Xác định Markup của Dự án

Thật vậy, để bắt đầu nhiệm vụ hiện tại, hãy truy cập dự án bằng giao diện viết mã ưa thích của bạn và xóa cả thư mục “nội dung” và “lib”. Ngoài ra, hãy đảm bảo rằng nội dung trong tệp “app.css” và tệp “App.svelte” bị xóa. Sau đó, mở tệp “main.js” và chèn văn bản tiếp theo:

 import App from './App.svelte'

const app = new App({
  target: document.getElementById('app'),
})

export default app
 

Thật vậy, bây giờ chúng ta hãy tiến hành truy cập phần tập lệnh chính của thành phần Svelte bằng cách điều hướng qua cấu trúc thư mục dự án. Khi chúng tôi đã đến tệp App.svelte, vui lòng xác định vị trí phần tử trong đó. Sau đó, vui lòng xác định một biến mảng JavaScript mới có tên là “liên kết” bằng cú pháp JavaScript hiện đại. Tập hợp các thành phần dữ liệu này sẽ lưu trữ các tài nguyên siêu liên kết khác nhau cho ứng dụng của chúng ta.

 <script>
  let imageLinks = [
    "https://images.pexels.com/photos/1170986/pexels-photo-1170986.jpeg",
    "https://images.pexels.com/photos/1754986/pexels-photo-1754986.jpeg",
    "https://images.pexels.com/photos/3257811/pexels-photo-3257811.jpeg",
    "https://images.pexels.com/photos/3643714/pexels-photo-3643714.jpeg",
    "https://images.pexels.com/photos/755834/pexels-photo-755834.jpeg",
    "https://images.pexels.com/photos/2928158/pexels-photo-2928158.jpeg",
  ];
</script>
 

Trong ngữ cảnh của tài liệu HTML, hãy sử dụng thẻ để xác định phần tử vùng chứa chính, phần tử này sẽ được tạo kiểu như một thành phần chính trong cấu trúc chính của nó. Vùng chứa tập trung này sẽ đóng vai trò là nơi chứa các yếu tố hình ảnh khác nhau bắt nguồn từ mảng liên kết hình ảnh được tổng hợp dưới tiêu đề’imageLinks’. Trong suốt quá trình này, hãy sử dụng các kỹ thuật lặp để xây dựng các phiên bản riêng lẻ của phần tử HTML, nối chúng vào thực thể vùng chứa bao gồm nếu cần.

 <main>
  <h1>Cute Cat Gallery</h1>
  <h3>See the cutest images of cats from the internet</h3>
  <div class="container">
    {#each imageLinks as url}
      <div class="image-container">
        <img src={url} />
      </div>
    {/each}
  </div>
</main>

Sau khi đã thiết lập cú pháp đánh dấu, bây giờ người ta có thể tiếp tục và áp dụng cách tiếp cận ban đầu để tạo kiểu cho phần mềm thông qua nhập CSS trực tiếp.

Tạo kiểu cho các thành phần mảnh dẻ với nhập CSS trực tiếp

Việc kết hợp một thành phần Svelte thường liên quan đến việc soạn một tệp CSS bên ngoài và nhập tệp đó trực tiếp vào phần tập lệnh của thành phần đó. Để làm như vậy, người ta có thể bao gồm câu lệnh sau ở cấp bậc cao nhất trong thẻ script:javascriptimport { css } from ‘./app.css’;

 import "./app.css";

Vui lòng sửa đổi tệp app.css bằng cách đặt thuộc tính hiển thị của lớp “bộ chứa” thành “lưới” và điều chỉnh phần đệm của lớp “bộ chứa hình ảnh” thành 10 pixel. Điều này sẽ ảnh hưởng đến bố cục và khoảng cách của hình ảnh trong vùng chứa của chúng trong tab Kiểu.

 .container {
  display: grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
}

.image-container {
  padding:10px;
}

Thay đổi kích thước các thành phần hình ảnh để thích ứng với các kích thước màn hình khác nhau và áp dụng các lựa chọn thiết kế cụ thể khi người dùng tương tác với hình ảnh được hiển thị bằng cách sử dụng các kỹ thuật thay đổi kích thước và xử lý sự kiện trong CSS và JavaScript.

 img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  transition: 250ms;
}

img:hover {
  scale: 1.03;
  transition: 250ms;
}

Khi thực thi mã trong môi trường trình duyệt web, bạn sẽ thấy màn hình trực quan sau:

Ưu điểm của Nhập CSS trực tiếp

Tái sử dụng thông qua việc sử dụng một tài liệu không liên quan để mô tả các biểu định kiểu xếp tầng của một người cho phép áp dụng liền mạch các yếu tố hình ảnh nhất quán trong các thành phần khác nhau, điều này có thể đặc biệt thuận lợi khi cố gắng thiết lập tính đồng nhất trong các yếu tố thiết kế khác nhau.

Việc xác định lại bố cục và diện mạo của trang web thường đạt được bằng cách thay đổi lớp trình bày thông qua tài liệu CSS bên ngoài thay vì điều chỉnh cấu trúc cơ bản của nội dung. Bằng cách tách biệt hai yếu tố này, việc thay đổi một yếu tố mà không ảnh hưởng đến yếu tố kia trở nên dễ dàng hơn, do đó thúc đẩy tính linh hoạt nâng cao khi tùy chỉnh các đặc điểm trực quan của trang web.

Nhược điểm của Nhập CSS trực tiếp

Mặc dù việc sử dụng các tệp CSS bên ngoài mang lại hiệu quả, nhưng nó cũng có thể dẫn đến sự can thiệp và thay thế không lường trước được khi các kiểu bên ngoài trùng khớp với nhau. Những sự cố như vậy có thể gây ra quá trình gỡ lỗi và chỉnh sửa mở rộng. Để loại bỏ các xung đột phong cách không mong muốn trong các ứng dụng Svelte, hãy kết hợp

Quá trình tải trang web bị ảnh hưởng bởi nhu cầu tìm nạp các tài nguyên bổ sung ngoài tệp HTML chính, chẳng hạn như tệp CSS bên ngoài. Mặc dù thoạt nhìn, độ trễ này có vẻ không đáng kể, nhưng nó có thể tích lũy qua nhiều biểu định kiểu bên ngoài, cuối cùng ảnh hưởng đến hiệu suất tổng thể.

Tạo kiểu bằng cách sử dụng thẻ kiểu mảnh

Một cách tiếp cận khác để tùy chỉnh giao diện của thành phần Svelte liên quan đến việc sử dụng các thuộc tính kiểu dáng do chính Svelte cung cấp, tuân theo một cú pháp cụ thể để triển khai. Cú pháp này giống với cấu trúc sau:

 <script>
  <!-- Your logic goes here -->
</script>

<!-- Markup goes here -->

<style>
  <!-- styling goes here -->
</style>
 

Lợi ích chính của phương pháp này nằm ở bản chất dựa trên phạm vi của nó, trong đó các kiểu của từng thành phần được tách biệt với nhau, ngăn chặn sự can thiệp giữa các thành phần khác nhau. Cần lưu ý rằng các kiểu nội tuyến trong Svelte được ưu tiên hơn các kiểu CSS bên ngoài được áp dụng cho cùng một phần tử. Điều này có thể được quan sát bằng cách thêm đoạn mã sau vào phần cuối của tệp App.svelte:

 <style>
h1 {
  background-color: red;
}
</style>
 

Kết hợp đoạn mã được cung cấp ở cuối tệp App.css cho mục đích tạo kiểu.

 h1 {
  background-color: yellow;
}

Thật vậy, khi mã được thực thi trong trình duyệt web, người ta sẽ quan sát thấy rằng các thuộc tính trình bày của phần tử # đã được sửa đổi để kết hợp màu đỏ thẫm, thay thế cho màu nhuốm màu vàng chanh được quy định trước đó trong App.css tập tin.

Tạo kiểu với Bộ tiền xử lý CSS

Một kỹ thuật được sử dụng rộng rãi để thiết kế các thành phần Svelte liên quan đến việc kết hợp bộ tiền xử lý CSS trong thuộc tính style. Các bộ tiền xử lý như vậy mang lại nhiều lợi ích, chẳng hạn như tạo điều kiện thuận lợi cho việc sử dụng các hoạt động phức tạp như chức năng nâng cao, mixin và cho phép các kiểu có thể lồng vào nhau, một cải tiến gần đây đã được đưa vào các phương pháp CSS tiêu chuẩn.

Khi chọn một bộ tiền xử lý để tạo kiểu cho trang web của một người, sẽ có sẵn một loạt các tùy chọn, bao gồm nhưng không giới hạn ở LessCSS, Sass và Stylus. Để sử dụng bộ tiền xử lý ưa thích của một người, cần phải cài đặt nó như một phụ thuộc phát triển thông qua lệnh “npm install [preprocessor] –save-dev”.

 npm install -D <css-preprocessor>

Hoặc:

 yarn add -D <css-preprocessor>

Để sử dụng một bộ xử lý trước cụ thể trong dự án của bạn, hãy đảm bảo rằng bạn thay thế tên của nó bằng"bộ xử lý trước"trong lệnh tiếp theo. Để minh họa, nếu bạn muốn tích hợp Ít hơn và sử dụng nó trong dự án của mình, hãy thực hiện các bước sau:

 npm install -D less

Hoặc:

 yarn add -D less

Sau khi hoàn thành tác vụ này, bạn có thể áp dụng thuộc tính lang cho phần tử và gán cho nó giá trị “less

 <style lang="less">
</style>

Thật vậy, bằng cách triển khai Ít CSS hơn trong thành phần Svelte của bạn, giờ đây bạn có thể khai thác phạm vi khả năng toàn diện của nó để thiết kế và định dạng các thành phần trực quan của ứng dụng web của bạn.

Điều gì khiến Svelte trở nên tuyệt vời?

Chắc chắn! Đây là nỗ lực của tôi trong việc diễn đạt lại nó: Để một tệp được coi là tệp Svelte, tệp đó phải kết thúc bằng hậu tố “.svelte”. Khi trình biên dịch Svelte gặp phải tệp này, nội dung của nó sẽ được phân tích cú pháp và xử lý tương ứng. Kết quả của quá trình phân tích cú pháp này, trình biên dịch tạo ra JavaScript và CSS tương ứng mà sau đó có thể được gửi tới trình duyệt. Bằng cách tận dụng các định dạng đầu ra hiệu quả này, người dùng có thể tận hưởng trải nghiệm duyệt web hợp lý hơn do thời gian tải nhanh hơn liên quan đến nội dung được tạo.

Khi việc kết hợp một thư viện JavaScript bên ngoài được coi là phù hợp trong ngữ cảnh của dự án dựa trên Svelte của bạn, bạn có thể đưa nó trực tiếp vào tệp .svelte của mình, loại bỏ yêu cầu đối với phần tử chứa thường được liên kết với các lựa chọn thay thế như React.