Tại sao CSS lại quan trọng đối với các nhà phát triển web

Hầu hết các trang web ngày nay đều dựa vào CSS để mang lại phong cách và sự bóng bẩy hơn, nhưng sự phổ biến tuyệt đối của CSS đang khiến nhiều người coi đó là điều hiển nhiên và bỏ qua tầm quan trọng của nó. Trong bài viết này, Nhà phát triển giao diện người dùng hàng đầu Silvestar Bistrović giải thích sự ngắt kết nối này và nêu lý do tại sao bạn cần một chuyên gia CSS thực sự chứ không phải là người biết tất cả các giao dịch

Qua

Silvestar Bistrović

Silvestar là nhà phát triển web, thợ thủ công CSS, chuyên gia về chủ đề WordPress và người đam mê JAMstack. Anh ấy thích tạo các trang web nhanh, được sắp xếp hợp lý

CHIA SẺ

CHIA SẺ

Nhà phát triển CSS là các chuyên gia web có trách nhiệm chính là cung cấp sản phẩm bóng bẩy và có phong cách cho trình duyệt của khách truy cập. Thực tế mọi trang web đều sử dụng CSS, nhưng CSS thường không được coi là “bình đẳng” trong ngăn xếp phát triển web hiện đại. Thật không may, nhận thức sai lầm này có thể dẫn đến việc CSS bị coi là hiển nhiên hoặc thậm chí bị bỏ qua ở một mức độ nào đó

Việc cho phép các nhà phát triển không phải CSS xử lý CSS thường dẫn đến việc tạo ra các bản hack và lỗi CSS trong mã của bạn và có thể gây ra sự thất vọng không cần thiết cho các nhà phát triển. Trong bài viết này, tôi muốn giúp mọi người làm quen với những gì công việc bao gồm để bạn có thể hiểu rõ hơn về lý do tại sao mọi trang web đều cần một nhà phát triển CSS chuyên nghiệp, đáng tin cậy

Nhà phát triển CSS làm gì?

Hãy bắt đầu với những điều cơ bản. Tại sao CSS lại quan trọng như vậy và chính xác thì các nhà phát triển CSS phải làm gì?

CSS là một ngôn ngữ cụ thể và do đó, nó không thể tự tồn tại. Nó yêu cầu HTML để có ý nghĩa. Vì vậy, điều đầu tiên mà các nhà phát triển CSS làm là viết mã HTML

Viết HTML gọn gàng luôn luôn quan trọng

Viết HTML đơn giản, rõ ràng và được tổ chức đầy đủ là một trách nhiệm lớn vì tài liệu HTML khiêm tốn là thứ đầu tiên bạn cung cấp cho người dùng cuối của mình

Nếu bạn đang viết một tài liệu HTML sẵn sàng sản xuất, bạn nên cố gắng đảm bảo bao gồm tất cả các thẻ bắt buộc và tùy chọn trong phần đầu của tài liệu để tận dụng tối đa trang web của bạn. Tôi đang nói về việc đặt đúng loại tài liệu, ngôn ngữ, thẻ meta, biểu tượng yêu thích, kỹ thuật tải và SEO

Mọi thứ có thể giúp làm cho trang web của bạn hoạt động hiệu quả hơn, dễ truy cập hơn và cung cấp nhiều khả năng hiển thị hơn cho khán giả và công cụ tìm kiếm, cũng như các dịch vụ và công cụ khác. Phần thân của tài liệu HTML cũng không được cồng kềnh. Không nên bỏ qua việc biết khi nào nên sử dụng các thẻ HTML ngữ nghĩa, cách thêm các thuộc tính HTML cần thiết và cách tránh lồng sâu hoặc chia nhỏ, mà nên thực hiện ngay từ đầu dự án. Không có nhà phát triển chuyên nghiệp nào bắt đầu làm theo các phương pháp hay nhất trong nửa chừng dự án, nhưng ngay cả những thứ có vẻ cơ bản như HTML cũng thường được thực hiện sai

Thiết kế tổng thể thường xác định cách chúng tôi tổ chức các thành phần HTML khác nhau. Các nhà phát triển CSS làm việc chặt chẽ với các nhà thiết kế và không phải mọi nhà thiết kế đều sử dụng cùng một công cụ để cung cấp thiết kế. Làm quen với Sketch, Photoshop, InVision hoặc Figma và có thể “cắt” thiết kế là những kỹ năng bắt buộc phải có của các nhà phát triển CSS. Người ta phải luôn ghi nhớ cách cấu trúc một thành phần để có thể áp dụng thiết kế cùng một lúc. Sử dụng quy ước đặt tên tốt, như BEM hoặc OOCSS, sẽ ngăn việc viết mã HTML cồng kềnh hoặc mã CSS không thể duy trì

JavaScript ở mọi nơi

Một số thành phần phải tương tác, như phương thức hoặc chú giải công cụ. Điều đó thường đòi hỏi phải nắm vững JavaScript, không phải JavaScript “sâu”, mà là các sự kiện JavaScript và xử lý DOM. Việc xử lý DOM có thể là một thách thức vì bạn không muốn làm cạn kiệt tài nguyên của người dùng và khiến trang web của bạn trở nên chậm chạp hoặc thậm chí tệ hơn là làm hỏng trang và khiến trang hoàn toàn không phản hồi

Thế giới JavaScript đang phát triển nhanh chóng và đôi khi có vẻ như các khung và công cụ mới xuất hiện hàng ngày. Do mức độ phổ biến rộng rãi của JavaScript, việc duy trì cập nhật là rất quan trọng nếu bạn muốn sử dụng các phương pháp hay nhất mới nhất và mang lại trải nghiệm thú vị nhất cho người dùng cuối

CSS

Điều đó cũng đúng với CSS, mặc dù nhiều người cho rằng nó không phát triển với tốc độ gần bằng JavaScript. Tuy nhiên, các tính năng mới như biến CSS, lưới CSS hay thậm chí là Flexbox cần một chút thời gian để thành thạo

Sau đó, có hỗ trợ trình duyệt, vẫn có thể gây ra sự cố ngay cả ngày nay. Trang web của bạn có thể trông giống như một triệu đô la trong một trình duyệt hiện đại, nhưng không quá nhiều trong các trình duyệt cũ. Flexbox có thể được hỗ trợ trong IE11, nhưng một lần nữa, nó có thể không hoạt động như mong đợi. Biết cách tránh những vấn đề này là một phần công việc của nhà phát triển CSS

Rất may, cộng đồng rất hữu ích và các trang web như Flexbugs hoặc Gridbugs có thể tiết kiệm rất nhiều thời gian

Công cụ, kỹ thuật và nguyên tắc CSS

Đôi khi, chúng tôi có thể dựa vào các công cụ như trình chạy tác vụ hoặc trình đóng gói như Grunt, Gulp và webpack để giúp chúng tôi cung cấp mã đáng tin cậy. Bạn có thể tăng cường mã của mình bằng linters, minifiers, babel hoặc PostCSS để dịch mã

Sau đó, chúng ta cần tính đến nhiều phông chữ, kiểu chữ, hình ảnh, biểu tượng, phông chữ biểu tượng, hoạt ảnh, chuyển tiếp và các khía cạnh trừu tượng khác là một phần của công việc hàng ngày dành cho nhà phát triển CSS. Mỗi tính năng đều có tính đặc hiệu, hạn chế, sự cố và giải pháp. Bạn càng thành thạo nhiều tính năng và kỹ thuật, bạn càng dễ dàng tạo kiểu và triển khai các thành phần trong dự án của mình

Có một số lượng đáng kể các thuộc tính và giá trị CSS và người ta không thể biết mọi thứ. May mắn thay, các công cụ của chúng tôi đã giúp chúng tôi ở đó, đặc biệt là các trình chỉnh sửa mã và công cụ dành cho nhà phát triển. Tuy nhiên, ngay cả các công cụ cũng không thể giúp bạn giải quyết vấn đề đau đầu khi cần giải quyết vấn đề về chỉ số z. Thất bại là cách học tốt nhất

Tôi muốn nói điều này đặc biệt đúng khi làm việc với CSS và đây là lý do tại sao

Nếu bạn chưa bao giờ thử giải bài toán chỉ số z, thì bạn sẽ không bao giờ tìm hiểu về ngữ cảnh xếp chồng. Nếu bạn chưa bao giờ thử ghi đè lớp Bootstrap, thì bạn sẽ không bao giờ tìm hiểu về tính đặc hiệu. Nếu bạn chưa bao giờ tìm cách khắc phục sự cố float, bạn sẽ không bao giờ tìm hiểu về mô hình hộp

Đôi khi, giải pháp thì đơn giản, nhưng chỉ một câu hỏi thôi đã khó. Khi so sánh với các ngôn ngữ khác, bạn không thể hỏi tại sao vòng lặp của tôi không hoạt động. Bạn cần ngữ cảnh đầy đủ để giải quyết vấn đề trong CSS và đây thường là điều mà nhiều người không hiểu. dòng thác

Cascade là tính năng tốt nhất trong CSS và nó sẽ phù hợp với bạn chứ không phải chống lại bạn. Một số nhà phát triển giải quyết vấn đề này bằng cách phát minh ra các cách tiếp cận tùy chỉnh như CSS-in-JS. Nếu bạn đóng gói CSS của mình trong môi trường đóng gói như React, bạn không thể sử dụng nó ở nơi khác. Tôi nghi ngờ đây là cách tiếp cận bạn muốn trong nền tảng có thể mở rộng của mình. Nếu bạn gặp vấn đề với dòng thác, hãy học cách chấp nhận nó và sau đó học cách chế ngự nó

Trong khi tôi chuẩn bị bài viết này, Max Böck đã viết về tư duy CSS và đây chính là điều mà các nhà phát triển CSS cần làm. Các nhà phát triển CSS nghĩ bên trong hộp, dự đoán sửa đổi nội dung và tránh các số cố định bất cứ khi nào có thể trong khi cố gắng viết càng ít mã càng tốt mà không ghi đè các giá trị và ngữ cảnh mặc định

Tại sao bạn cần một nhà phát triển CSS?

Hầu hết các nhà phát triển frontend hoặc thậm chí full-stack đều có thể viết mã CSS. Nhưng không phải ai trong số họ cũng có thể sửa mọi lỗi CSS hoặc triển khai thiết kế mà không cần mã HTML phức tạp hoặc dựa vào JavaScript khi không cần thiết

Một nhà phát triển CSS chuyên nghiệp quan tâm đến mã đến những chi tiết cuối cùng, thích tạo bố cục và thành phần, ngay cả những thứ phức tạp nhất và biết cách giải quyết mọi vấn đề hoặc lỗi

Tiêu chuẩn mã hóa CSS

Trước khi viết bất kỳ mã nào, nói chung nên có một số quy tắc cơ bản về viết mã. Các nhà phát triển CSS nên tôn trọng tiêu chuẩn viết mã—điều cần thiết cho khả năng bảo trì và khả năng mở rộng của dự án

Chọn quy ước đặt tên để sử dụng trong suốt dự án. Thiết lập quy ước đặt tên sớm có thể giúp các nhà phát triển tạo mã tốt hơn và có tổ chức hơn. Nó cũng có thể giúp mọi người tham gia dự án hiểu cấu trúc thành phần và mối quan hệ giữa các thành phần và thành phần bằng cách chỉ đọc mã HTML

Quyết định cách xử lý thụt đầu dòng, loại bộ chọn, thuộc tính tốc ký, đơn vị trong CSS. Ví dụ: tránh sử dụng đơn vị pixel nếu tiêu chuẩn mã hóa đề xuất sử dụng đơn vị rem. Mọi người đều có một phong cách viết/viết mã riêng biệt, nhưng là một người chuyên nghiệp, bạn phải có khả năng áp dụng và quan trọng hơn là hiểu mọi khái niệm

Triển khai thiết kế CSS

Trước khi chuyển đổi thiết kế thành mã, bạn nên dành thời gian để hiểu từng trang, bố cục và thành phần. Nếu có thể, hãy phân tích mọi trang, tạo danh sách các trang và thành phần, đồng thời cố gắng tìm một mẫu

Nếu bạn nhận thấy một thành phần hiện diện trên nhiều trang hơn, bạn nên nhận ra môi trường xung quanh nó và cố gắng coi nó như một thành phần độc lập. Nếu có các thành phần tương tự, như thẻ hoặc danh sách, thì bạn có thể có một biến thể của cùng một thành phần. Bằng cách này, bạn có thể sử dụng lại mã HTML và chỉ viết một chút mã CSS để làm cho mã có vẻ như đã sửa đổi

Bạn cũng nên thử tìm các mẫu trong các lĩnh vực khác, chẳng hạn như kiểu chữ và khoảng cách. Đôi khi điều này dẫn đến việc có các lớp trợ giúp có thể được sử dụng trên toàn bộ dự án thay vì các trang riêng lẻ

Sắp xếp mã CSS của bạn

Các nhà phát triển CSS nên tổ chức mã của họ và tạo một cấu trúc có ý nghĩa cho mọi người. Khi sử dụng các công cụ như bộ xử lý CSS, nhà phát triển CSS nên ghi lại quá trình tạo mã đã biên dịch

Nếu được yêu cầu, nhà phát triển CSS có thể tạo hướng dẫn kiểu. Các hướng dẫn về phong cách có thể là một tài liệu tham khảo khi tạo các trang mới hoặc quyết định cách tiếp cận các trang hiện có. Lời khuyên của tôi là làm cho hướng dẫn phong cách có sẵn trên toàn cầu cho cả nhóm vì việc đưa ra quyết định thường dễ dàng hơn nhiều khi có ngữ cảnh trực quan. Hướng dẫn kiểu có thể chứa bảng màu, quy tắc kiểu chữ, tiêu chuẩn mã hóa và thậm chí cả trang tĩnh. Không có giới hạn, ngoại trừ ngân sách và trí tưởng tượng của bạn

Mã CSS trong sản xuất

Viết mã CSS ngụ ý xử lý các sự cố, lỗi, hoạt ảnh, chuyển tiếp, khả năng phản hồi và kiểu in của nhiều trình duyệt. Nhiều tính năng trong số này không dễ dàng quản lý bởi các nhà phát triển toàn diện. Tôi sẽ đi xa đến mức đó và nói rằng đây là những tác vụ CSS ít được yêu thích nhất về tổng thể và không phải nhà phát triển nào cũng biết cách xử lý chúng. Mặt khác, các nhà phát triển CSS chuyên biệt biết (hoặc ít nhất nên biết) cách tạo mã với mọi lỗi, trình duyệt và môi trường

Sử dụng các phương pháp tiếp cận hiện đại là một cách nên làm, nhưng cũng không nên bỏ qua việc hỗ trợ các trình duyệt cũ hơn và tôn trọng cài đặt của người dùng như giảm chuyển động

Các nhà phát triển CSS cũng viết mã HTML và JavaScript. Điều đó có nghĩa là việc phân phối nội dung là trách nhiệm của nhà phát triển CSS. Các nhà phát triển CSS phải chịu trách nhiệm tải phông chữ, trích xuất CSS quan trọng, sử dụng tải JavaScript bị trì hoãn và không đồng bộ cũng như cung cấp hình ảnh phản hồi

Không có kỹ thuật nào trong số này dễ thực hiện và không có viên đạn bạc nào

Nhà phát triển CSS có thể làm gì cho bạn

Tất cả những điều trên giải thích tại sao bạn cần một nhà phát triển CSS chuyên dụng. Đây chỉ là một số trong những điều quan trọng họ xử lý

• Đảm bảo mọi thành viên dự án tuân theo tiêu chuẩn viết mã
• triển khai thiết kế
• Tổ chức mã
• Viết mã
• Sữa lỗi
• Tìm hiểu về các kỹ thuật mới
• Cải thiện mã

kết thúc

Đã quá lâu, câu hỏi về sự tồn tại và tầm quan trọng của vai trò của các nhà phát triển CSS không khuyến khích các cuộc thảo luận đặc biệt mang tính xây dựng và có ý nghĩa tốt. Hãy cố gắng đồng ý và thừa nhận vai trò thích hợp của nhà phát triển CSS một lần và mãi mãi

Trong bài viết của mình, The Great Divide, Chris Coyier trích dẫn một số nhà lãnh đạo công nghệ và hầu hết họ đồng ý rằng nên có sự phân chia, nên có một vai trò dựa trên CSS không yêu cầu kiến ​​thức về các khung JavaScript hiện đại. Nó có thể hữu ích nếu bạn biết nhiều hơn “chỉ CSS”, nhưng vai trò này phải tồn tại và nó phải được chấp nhận ngang bằng với các vai trò dựa trên JavaScript

Rốt cuộc, bạn có muốn giao sản phẩm của mình cho một chuyên gia chuyên nghiệp có thể đánh bóng nó đến mức hoàn hảo hay bạn sẽ chấp nhận đủ tốt?

Đọc thêm trên Blog Kỹ thuật Toptal

• Cách tiếp cận Hoạt ảnh SVG trong CSS

Hiểu những điều cơ bản

Nhà phát triển CSS là gì?

Nhà phát triển CSS là nhà phát triển giao diện người dùng có trách nhiệm cơ bản là cung cấp mã CSS có hiệu suất cao, dễ bảo trì và có thể mở rộng

Ai đã phát triển CSS?

Håkon Wium Lie và Bert Bos khởi xướng khái niệm ban đầu về CSS vào năm 1994. Bản phát hành chính thức của CSS là vào tháng 12 năm 1996. CSS được duy trì bởi World Wide Web Consortium (W3C)

CSS là gì và nó hoạt động như thế nào?

CSS là viết tắt của Cascade Style Sheets. Nó bao gồm một tập hợp các quy tắc có thể được áp dụng cho tài liệu đánh dấu, chẳng hạn như HTML, SVG hoặc XML, dẫn đến đầu ra được tạo kiểu

Tại sao giao diện người dùng lại quan trọng?

Giao diện người dùng là một phần quan trọng của ngăn xếp web. Giao diện người dùng bao gồm một tập hợp các công nghệ và kỹ thuật giúp người dùng cuối có thể sử dụng và tương tác với kết quả, thường là một trang web của một ứng dụng web

Phát triển front-end có phải là một nghề nghiệp tốt không?

Phát triển front-end là một lựa chọn nghề nghiệp hợp lý vì nó là một phần vô giá của mọi nhóm phát triển. Nếu không có các nhà phát triển front-end, kết quả của sản phẩm, thường là một trang web hoặc ứng dụng, có thể trông không đủ năng lực và không chuyên nghiệp

Một nhà phát triển web nên có những kỹ năng gì?

Một nhà phát triển web phải có hiểu biết tốt về các nguyên tắc cơ bản về cách thức hoạt động của web, có con mắt thiết kế và hiểu biết về các mô hình, luật và định đề lập trình cơ bản

Thẻ

Người làm việc tự do? Tìm công việc tiếp theo của bạn.

Công việc lập trình viên CSS

Xem thông tin đầy đủ

Silvestar Bistrović

Nhà phát triển giao diện người dùng

Giới thiệu về tác giả

Silvestar là một kỹ sư web dũng cảm, nhà phát triển CSS, người đam mê JAMstack và chuyên gia về chủ đề WordPress. Anh ấy thích tạo các trang web hiện đại, đáp ứng và hoàn hảo về pixel. Trọng tâm của anh ấy là mang lại trải nghiệm tốt nhất cho người dùng trên mọi thiết bị, tạo ra các trang web nhanh hơn, nhẹ hơn và an toàn hơn bằng cách sử dụng WordPress hoặc trình tạo trang tĩnh. Khi Silvestar không viết mã, anh ấy thích viết các bài báo mới trên blog của mình

Thuê Silvestar

Bình luận

Glauber

Bài báo tuyệt vời. CSS thực sự nên dừng lại để bị ban quản lý và nhà phát triển coi là "sự bất tiện". Một bài tuyệt vời khác về nó là https. // thủ thuật css. com/front-end-development-is-not-a-problem-to-be-solve/

Ngôi Sao

Bài đăng tuyệt vời thực sự. Và đó là điểm của một bài báo, để thu hút sự chú ý đến phần CSS của vai trò giao diện người dùng

saixranger

Một bài báo tuyệt vời. Mọi người phải đọc cái này

Matt Claffey

Bài viết hay nhưng CSS developer không phải là Frontend Developer sao?

Ngôi Sao

Cảm ơn bạn đã bình luận. Tôi nghĩ rằng bạn đã bỏ lỡ điểm. Vai trò của Nhà phát triển Frontend rất rộng. Bạn có thể là một chuyên gia về React hoặc Angular, nhưng hoàn toàn không phải là một Nhà phát triển CSS giỏi. Mục đích của bài viết này là nhấn mạnh tầm quan trọng của phần CSS trong ngăn xếp giao diện người dùng

Andrej Jancar

Này Silvestar, Vai trò nhà phát triển CSS có vẻ là một ứng cử viên sáng giá cho việc gia công phần mềm. Sau đó, các nhà phát triển front-end có thể dành thời gian của họ để lập trình logic và để lại công việc nặng nhọc cho chuyên gia thuê ngoài dành riêng cho CSS. Bạn có đồng ý không?

Travis Lawrence

Tôi đã đọc một số loại bài viết này nhưng điều chưa bao giờ được đề cập là quy trình làm việc của một dự án khi bạn có một nhà phát triển CSS cụ thể. Cấu trúc của HTML có được viết và sau đó được chuyển cho nhà phát triển CSS để làm cho nó hoạt động không? . e. thay đổi bộ chọn, phạm vi, v.v. )? . Chỉ cần thuê một nhà phát triển giao diện người dùng phù hợp, người biết cách xử lý tất cả những thứ này (có lẽ cũng dễ tìm hơn nhiều)

CSS là gì và tại sao nó lại quan trọng?

CSS quan trọng như thế nào đối với nhà phát triển giao diện người dùng?