CSS hướng đối tượng: Phương pháp tiếp cận thiết kế hợp lý hoặc cụm từ Buzz?

Question

Dường như có một cụm từ bắt mắt mới nổi trong lĩnh vực phát triển web: CSS hướng đối tượng.

Khi đối mặt với nó, điều này đánh tôi chỉ đơn giản là thực hành tốt nhất đóng gói trong một khẩu hiệu hấp dẫn. Tôi hiểu và hoàn toàn tôn trọng những ý định đằng sau phong trào, nhưng có còn gì nữa không?

Có ai có thêm thông tin chi tiết nào đặt cách tiếp cận này ngoài việc đáng tin cậy hơn hoặc tôi chỉ nên coi đó là lời nhắc để đảm bảo rằng tôi kế thừa và xếp lớp của mình một cách chính xác?

Answer 1

Tôi sẽ nói đó là một cụm từ buzz hấp dẫn hơn cho một thứ đã có trong CSS. Tất nhiên, trước khi chúng ta bắt đầu nói về OO là gì và cái gì không và cách CSS hướng đối tượng, chúng ta sẽ phải xác định nó là cái gì - đó là cái gì đó khác đã phải vật lộn với trước và chịu sự tranh luận nóng.Nhưng nếu chúng ta giả định rằng the basic principles of OO are:

• Lớp
• Object
• Instance
• Phương pháp
• nhắn qua
• Inheritance
• Abstraction
• Encapsulation
• đa hình ism
• tách

chúng ta có thể nói, đó là Cascading Style Sheets được hơi hướng đối tượng, bởi vì chúng cho phép các lớp học phải được xác định, các trường hợp/đối tượng được tạo (bằng cách gán cho một lớp học để một phần tử), thừa kế các lớp học (thậm chí nhiều thừa kế), trừu tượng (ví dụ bằng cách xác định kiểu cho các phần tử đơn giản) và đa hình (bằng cách xác định cùng tên lớp cho các phần tử khác nhau). Tất nhiên các phương thức/truyền thông điệp là không thể, vì tính chất tĩnh của CSS. Vì vậy, nói chung tôi sẽ nói đó là một cách tiếp cận hợp lệ để phát triển CSS theo cách hướng đối tượng, nhưng tôi sẽ không gọi nó là Object Oriented CSS, vì ít nhất với tôi, đó là một cái gì đó sâu sắc đối với CSS. Nó sẽ giống như nói "Tôi đang làm Java hướng đối tượng ..."

Answer 2

Cách tiếp cận thiết kế hợp lý và cụm từ bắt mắt.

Mặc dù tôi nghĩ rằng một số ý tưởng có một chút ngây thơ trong đó họ có xu hướng quên "khách hàng thay đổi eveything khi nó đi" mô hình phát triển web.

Answer 3

của nó thực sự là một trong những điều gây tranh cãi như bàn vs divs vv vv

Theo tôi, theres rất nhiều các nhà phát triển để cố thủ trong OO mà họ cố gắng để dính nó trên tất cả mọi thứ, trước hết javascript và bây giờ CSS. Không hiểu sai về JavaScript của tôi cũng có các thành phần của OO, nhưng tôi đã tiêu hóa.

Vì CSS đã là một từ thông dụng (tất cả các nhà tuyển dụng đều muốn có cách tiếp cận CSS web 2.0), rất nhiều nhà phát triển mới đang khám phá nó. Đây không phải là một điều xấu, tuy nhiên các nhà phát triển họ đã làm những gì họ làm tốt nhất và cố gắng cải thiện trên CSS. Trong tâm trí các nhà phát triển (tôi là một nhà phát triển), việc tổ chức CSS theo các nguyên tắc OO có ý nghĩa hoàn hảo - do đó là từ thông dụng mới.

Cuối cùng những gì tôi đang cố gắng nói là CSS OO chỉ là một cách tiếp cận mà một số người nhất định thực hiện, vì nó có vẻ hợp lý hơn. Nếu bạn đang viết CSS sẽ được duy trì bởi các nhà phát triển thì cách tiếp cận này sẽ phù hợp tốt. Nó thực sự đi xuống với bạn làm thế nào bạn viết CSS của bạn và phong cách cá nhân của riêng bạn ...

Cá nhân tôi không quan tâm cách mọi người viết CSS của họ - nếu nó rơi vào tôi để duy trì nó, Firebug làm cho công việc tầm thường anyway .

Answer 4

Tôi đã nói điều này cho năm.

Bộ chọn CSS dựa trên các ID và lớp mẫu. Nó thậm chí còn hỗ trợ đa thừa kế. Có thể rõ ràng hơn bao nhiêu?

Vẻ đẹp của suy nghĩ về CSS trong các thuật ngữ đối tượng là nó trở nên rất đơn giản để bắt đầu "đúc" các yếu tố đánh dấu của bạn. Cần div đó đột nhiên trở thành INotRenderedAnymore? Chỉ cần để JS mở rộng thuộc tính lớp của nó cho phù hợp với .removed, không gây rối với các thuộc tính kiểu.

Rõ ràng đó là một ví dụ khá đáng sợ, nhưng các lợi ích phải rõ ràng - đặc biệt là trong bối cảnh thao tác JS. Bạn có thể tách JS ra khỏi các kiểu thực mà nó phải sửa đổi, cả tiền thưởng bảo trì và trừu tượng, nhưng cũng có các lợi ích rìa như không đặt trực tiếp các kiểu đặc trưng cao (CSS không thể ghi đè).

Answer 5

Tôi nghĩ rằng buzzwordiness gọi nó là "Object-oriented CSS" thực sự làm giảm tính hữu dụng của nó và việc áp dụng rộng rãi hơn khái niệm.

Khi tôi đọc về nó, tôi nghĩ rằng tuyên bố rằng đó là OO thực sự làm chậm sự hiểu biết của tôi về những gì nó thực sự là.

Những người biết "định hướng đối tượng" có nghĩa là lập trình sẽ hoài nghi, bởi vì nó không phải là thực sự OO, phải không? Nó chỉ là một nỗ lực để áp dụng một số nguyên tắc OO cho CSS để nâng cao hiệu quả của nó. Và mặt khác, hầu hết các nhà phát triển phía máy khách sẽ không hiểu khái niệm gì cả nếu họ không phải là lập trình viên, và vì vậy họ sẽ bị bối rối hoặc xấu hổ.

Vì vậy, khái niệm tuyệt vời, cần đặt lại thương hiệu. CSS tối đa! CSS điện! CSS Reborn! CSS bình phương! CSS Prime! Một cái gì đó như thế.

Answer 6

CSS cũng tương tự như với các ngôn ngữ OO bằng nhiều cách: viết

p { color: red } 
p span { color: blue } 

và bạn có về cơ bản kế thừa. Dưới đây là ví dụ phức tạp hơn với việc mở rộng các lớp con chó terrier mở rộng các lớp động vật:

.animal { font-weight:bold; color: blue; } 
.dog:before, .terrier:before { content: "GRRR"; } 
.animal, .dog, .terrier { color: brown } 

Bây giờ bạn có thể sử dụng các lớp động vật, chó và terrier theo cách OO.

Điều quan trọng cần nhớ là CSS rất tốt trong việc giải quyết vấn đề mà nó đã được thực hiện cho: xác định phong cách cho các phần tử một cách minh bạch. Nó có thể tốt hơn với nhiều khái niệm OO hơn? Tôi không chắc.Giả sử ai đó nói: file CSS sẽ đơn giản hơn nếu nó trông giống như:

@class dog @derives_from animal /* the syntax i just invented */ 
@class terrier @derives_from dog 

.animal { font-weight:bold; color: blue; } 
.dog:before { content: "GRRR"; } 
.terrier { color: brown } 

này trông đơn giản hơn, nhưng một giải pháp thậm chí đơn giản hơn là thả điều @class khi thêm 'chó' với bất kỳ 'terrier' và 'động vật' cho bất kỳ 'con chó' phía máy chủ (tuyên bố thay thế tầm thường) hoặc với javascript.

Điều tốt nhất về CSS là nó đơn giản và dễ dàng quay lại, nghĩa là các trình duyệt không cần phải hiểu CSS mà họ không hiểu và mọi thứ hoạt động tốt. Vì bạn sẽ phải phá vỡ tính tương thích ngược này với các cấu trúc CSS mới lớn, tôi nghĩ điều này làm cho CSS hướng đối tượng nhiều hơn một cụm từ buzz.

Answer 7

Viết câu trả lời này tất cả những năm sau đó về hậu thế. Tất cả các câu trả lời ở trên rõ ràng chưa bao giờ nghe nói nghiêm túc về CSS hướng đối tượng. Khi OP hỏi xem đó có phải là một từ thông dụng không, đó là một dấu hiệu cho thấy biểu thức được đề cập đến một chủ đề được đánh giá cao (nhiều hơn "Chúng ta có ý nghĩa gì theo hướng đối tượng?").

CSS hướng đối tượng là thuật ngữ tôi tin được đặt ra bởi nhà truyền giáo công nghệ cao cấp của Yahoo Nicole Sullivan, sau khi cô ấy tư vấn cho Facebook trong việc tái cấu trúc mã front-end hiện tại của họ thành một thứ mỏng hơn và dễ quản lý hơn. dễ dàng sửa đổi khi thời gian trôi qua. Thuật ngữ 'hướng đối tượng' không đề cập đến bản chất của CSS chính nó (như vậy), mà là một cách tiếp cận để viết CSS và đánh dấu bị ảnh hưởng có xu hướng cho tính đồng nhất và mở rộng.

Một số nguyên tắc ví dụ về OO CSS bao gồm:

• Tránh sử dụng ID như selectors: thực tế là một đối tượng là duy nhất không nhất thiết có nghĩa là tính chất quan trọng của nó nên được định nghĩa theo cách như vậy mà họ ghi đè lên tất cả khác.
• Tránh bộ chọn dài dựa trên đánh dấu lồng nhau: xác định diện mạo của phần tử dựa trên vị trí ngẫu nhiên trong cấu trúc tài liệu thường là sai lệch hợp lý và di chuyển nó đến vị trí mới sẽ buộc bạn phải ghi lại bộ chọn. Như đã nói ở trên, thực hành xấu này cũng tạo ra nguyên nhân cho việc ghi đè hoặc mở rộng có điều kiện cần thêm sức mạnh và độ đặc hiệu trong bộ chọn của chúng, điều này hiếm khi hữu ích.
• Sử dụng đánh dấu phi ngữ nghĩa để tạo các phần tử với mục đích trình bày riêng biệt, thay vì cố gắng quá tải tất cả các chi tiết cụ thể về sự xuất hiện của một thành phần riêng lẻ thành một quy tắc. Điều này dẫn đến CSS ít chi tiết hơn.

Cuối cùng mục tiêu của OOCSS là KHÔ. Bạn không nên viết hàng ngàn dòng CSS khi bạn chủ yếu tạo ra các biến thể của những thứ tương tự.

Nicole đã đưa ra một số good talks về chủ đề này - cô ấy cũng viết một số bài viết mở rộng trên một số useful techniques để sử dụng và bad practices để tránh.

'OOCSS' cũng là tên của số framework được viết cho một số mã soạn sẵn cho bố cục CSS mở rộng. Làm thế nào và lý do tại sao khung này là rất tốt (grids module là một cái gì đó tôi sử dụng hầu như ở khắp mọi nơi) không phải là hoàn toàn tự hiển nhiên từ mã chính nó, và đọc trên blog của mình bài viết trên những ý tưởng đằng sau chắc chắn sẽ giúp sử dụng tốt hơn của nó và CSS nói chung.

Answer 8

Thuật ngữ "CSS hướng đối tượng" là từ sai.

"CSS hướng đối tượng" thực sự chỉ là mẫu thiết kế để tận dụng tối đa CSS của bạn và cơ bản là phương pháp tương tự Jonathan Snooks gọi SMACSS.

Cho dù bạn gọi nó là OOCSS hoặc SMACSS, chìa khóa để tiếp cận là bạn tạo các thành phần giao diện người dùng chung như nav abstraction. Các yếu tố giao diện người dùng này sau đó có thể được nâng cao với các tính năng cụ thể hơn bằng cách thêm các lớp bổ sung vào phần tử và/hoặc phần tử vùng chứa. Hoặc, thay vào đó, bạn có thể thêm các quy tắc CSS tùy chỉnh của riêng mình bằng cách sử dụng ID hoặc các lớp ngữ nghĩa của phần tử.

Cascade Framework là một khung CSS hoàn toàn mới dựa trên phương pháp này. Nó mang lại cho bạn hiệu suất tối ưu, tính linh hoạt tối ưu và mô đun tối ưu chỉ với một dấu chân nhỏ.

Answer 9

Tôi đã lúng túng cả OOCSS và B.E.M. đặt tên quy ước trong một thời gian và sẽ KHÔNG BAO GIỜ nhìn lại. Đối với những người đang tuyên bố rằng đó chỉ là một "từ thông tin hấp dẫn" hoặc "CSS đã thực hiện công cụ này", không hiểu tiềm năng của việc viết css bằng cả hai phương pháp này.

Hãy xem xét các đối tượng đơn giản nhất, danh sách có liên kết. Nó đi kèm trong nhiều hương vị khác nhau:

1. Menus

2. Toolbars

3. Tabs

4. Panels (Bootstrap)

Trong OOCSS, chúng ta thấy phổ biến các thuộc tính của từng cái này và tạo một đối tượng cơ sở . Tôi thường gọi nó là nav.

/* Nav 
    =================================================*/ 

    /* B 
     ---------------------------------------------*/ 

     .nav 
     { 
      margin-left:   0; 

      padding-left:   0; 

      list-style:    none; 
     } 

    /* E 
     ---------------------------------------------*/ 

     .nav__item 
     { 
      float:     left; 
     } 

     .nav__link 
     { 
      display:    block; 

      color:     inherit; 

      text-decoration:  none; 
     } 

    /* M 
     ---------------------------------------------*/ 

     .nav--right 
     { 
      float:     right; 
     } 

     .nav--stack .nav__item 
     { 
      float:     none; 
     } 

Bạn sẽ nhận thấy một vài điều:

1. Nav là đối tượng cơ sở đó được áp dụng cho các yếu tố ngăn chặn

2. yếu tố trẻ được bắt đầu với nav_

3. Modifiers có tiền tố là nav--

4. Công cụ sửa đổi là một tùy chọn thay đổi hành vi. Ví dụ - right float nav right.

Khi tôi có đối tượng gốc được tạo, tôi sẽ tạo giao diện sẽ thay đổi diện mạo của đối tượng. Điều này sẽ biến nó thành thanh công cụ, tab, vv Microsoft có Pivot tab trên điện thoại của họ. Nó là một làn da dễ dàng hơn để tạo ra fpr bây giờ.

/* Nav 
    =================================================*/ 

    /* E 
     ---------------------------------------------*/ 

     .pivot .nav__item 
     { 
      margin-left:   24px; 

      color:     #aaa; 

      font-size:   36px; 
     } 

     .pivot .nav__item--active, .pivot .nav__item:hover 
     { 
      color:     #000; 
     } 

Để sử dụng đối tượng này và da, bạn sẽ viết

<ul class="pivot nav"> 

    <li class="nav__item"> 

     <a class="nav__link"> Item 1 </a> 

    </li> 

    <li class="nav__item"> 

     <a class="nav__link"> Item 2 </a> 

    </li> 

</ul> 

Bởi vì độc lập vị trí của nó, bạn cũng có thể viết nó như

<nav class="pivot nav"> 

    <div class="nav__item"> 

     <a class="nav__link"> Item 1 </a> 

    </li> 

    <div class="nav__item"> 

     <a class="nav__link"> Item 2 </a> 

    </div> 

</nav> 

Cuối cùng, bạn được tách container từ da. Tôi sẽ đề nghị bắt đầu nhỏ hơn với Nicole Sullivans Media Object. Hãy xem Twiter Bootstrap và Inuit.css để có thêm cảm hứng.

Answer 10

Không có gì nhiều, tôi tin.

OOCSSObject Cascading Oriented stylesheet

Nó làm giảm mã lặp lại nhiều lần và bạn có thể đặt một css toàn cầu cho foocontainer một lần và tái sử dụng ở khắp mọi nơi và có phong cách tùy chỉnh cho headerbody và footer.

<div class="foocontainer header"> Your header </div> <!-- two classes --> 
<div class="foocontainer body"> Your body </div> <!-- two classes --> 
<div class="foocontainer footer> Some footer </div> <!-- two classes --> 

---

BEMBlock - Element__Modifier

Nó giữ mã dễ đọc nhưng xấu xí để viết và bạn có thể dễ dàng nhận ra những đứa trẻ với cha mẹ.

<div class="foocontainer--header"> Your header </div> <!-- one class --> 
<div class="foocontainer--body"> Your body </div> <!-- one class --> 
<div class="foocontainer--footer> Some footer </div> <!-- one class -->