Tôi đã xem xét các phương pháp mã hóa CSS như SMACSS và OOCSS. Sau khi thực hiện một số bài tập về nhà và kiểm tra các kiểu trang web lớn hơn (ví dụ: Google, Facebook), tôi đã nhận thấy các tên bộ chọn rất bị xáo trộn, chẳng hạn như ._50x4 không có ngữ nghĩa về phong cách hoặc nội dung.Tên bộ chọn CSS mangling?
Tôi tự hỏi liệu các trang web lớn hơn này có đang sử dụng một số loại tên mangling để đặt tên bộ chọn css của chúng không?
Hãy chọn lại bộ chọn cụ thể mà bạn đã chỉ định: ._50x4 trong câu hỏi.
Bộ chọn này trông có vẻ lạ, nhưng trên thực tế, nó không phải là không hợp lệ hoặc bị xén.
Bộ chọn lớp (hoặc ID) không hợp lệ để bắt đầu bằng một số, vì vậy .55x4 sẽ không hợp lệ. Nhưng dấu gạch dưới là một ký tự đầu tiên hợp lệ cho một lớp.
Do đó, công cụ chọn ._55x4 thực sự chỉ là cách để có một lớp có tên là 55x4, nhưng với dấu gạch dưới ở đầu nó để làm cho nó hợp lệ.
Tại sao bạn muốn một lớp học có tên 55x4? Vâng, bạn sẽ phải hỏi các nhà phát triển của trang web nơi bạn tìm thấy nó nếu bạn muốn câu trả lời thực sự, nhưng bạn đã đề cập đến Facebook và Google, vì vậy chúng tôi có thể suy đoán một chút.
Cả Facebook và Google đều là cực kỳ các trang web lưu lượng truy cập cao. Vì vậy, theo như họ đang quan tâm, việc giảm kích thước của mã HTML/CSS/JS của họ ngay cả bởi một nhân vật duy nhất tạo ra sự khác biệt lớn cho chi phí băng thông của họ.
Bạn hoặc tôi có thể đã đặt tên cho lớp với tên dễ đọc hơn, nhưng khi bạn cố gắng lưu từng byte có thể có băng thông, tên hợp lý sẽ xuất hiện ngoài cửa sổ. Vì vậy, nhiều như họ đã minified mã Javascript của họ đến điểm làm cho nó không thể đọc được, họ cũng sẽ đã tối ưu hóa mã HTML và CSS của họ để làm cho nó càng nhỏ càng tốt. Tên lớp học điên như thế này là kết quả.
Đó không phải là để nói tên lớp này là hoàn toàn điên - bạn đã trích dẫn nó hoàn toàn ra khỏi bối cảnh, do đó, mọi cơ hội mà các con số 55 và 4 có thể áp dụng cho một cái gì đó trên trang. Tôi không biết, và không bối cảnh, không ai khác.
Nhưng tôi có thể nói điều này nhiều: Đây là một trong những trường hợp sao chép Facebook và Google không nhất thiết phải là ý tưởng tốt nhất. Bạn không có cùng một mức lưu lượng truy cập như họ làm, và cạo mỗi byte cuối cùng khỏi mã của bạn không nên có cùng một loại ưu tiên cho bạn như nó cho họ. Chắc chắn bạn có thể tối ưu hóa nội dung nhưng không cần phải viết tên lớp giống như vậy.
Điều khác cần nói là dành cho mục đích SEO, tên lớp hợp lý rất hữu ích. Facebook và (đặc biệt) Google có thể thoát khỏi việc bỏ qua thứ hạng SEO của họ, nhưng phần còn lại của chúng tôi thì không.
Vì vậy, bất kể phương pháp luận của bạn, tên lớp phải là ngữ nghĩa - nghĩa là chúng có ý nghĩa và giúp người đọc hiểu những yếu tố đó là gì.
Bạn đang làm điều đúng bằng cách xem các trang web nổi tiếng để xem họ làm gì, nhưng lời khuyên của tôi là thử xem các trang web khác gần với trang web của bạn hơn. Facebook và Google sẽ luôn có một chút "khác biệt" khi nói đến cách họ làm việc; chúng không phải lúc nào cũng là những ví dụ tốt nhất.
Bạn có thể đưa ra một ví dụ cụ thể không? – soyuka
Xem http: //www.facebook.com/about/newsfeed Tôi có thể thấy rằng họ đang sử dụng kỹ thuật loại DRY/OOCSS. Nhưng phần lớn các tên của bộ chọn dường như bị làm xáo trộn. –
Câu trả lời ngắn gọn: Tôi không biết. Câu trả lời nhỏ hơn: anh chàng này ở đây ([link] (http://blog.vjeux.com/)) làm việc tại Facebook trong nhóm Photo và anh ấy giải thích rất nhiều khía cạnh công việc của mình. Có thể trong blog của anh ta, bạn có thể tìm thấy cái gì đó. Hy vọng rằng sẽ giúp. –