Hiệu suất gây hại có hiệu quả không?

Question

Tôi đã tự học. Đọc this:

Động cơ đánh giá từng quy tắc từ phải sang trái, bắt đầu từ bộ chọn ngoài cùng bên phải (được gọi là "chìa khóa") và di chuyển qua từng chọn cho đến khi nó tìm thấy một trận đấu hoặc loại bỏ các quy tắc. (The "chọn" là yếu tố tài liệu mà quy tắc nên áp dụng.)

Ví dụ:

ul li a {...} 
#footer h3 {...} 
* html #atticPromo ul li a {...] 

Bây giờ, một số kết quả đầu ra mã ví dụ Sass cho tôi:

#content #blog { 
    /* ... */ 
} 
/* line 85, ../sass/screen.scss */ 
#content #flickr { 
    /* ... */ 
} 

#content #flickr div p { 
    /* ... */ 
} 

Điều này có vẻ hơi khó xử .. Tôi có làm gì sai không? Đây có phải là vấn đề giao tiếp giữa tôi và Sass không? Chúng ta đang mất nó?

Sửa: Một số mã SCSS:

#flickr { 
    @include columns(5,8); 
    background: url('../img/ipadbg.png') no-repeat; 

    #ipod-gloss { 
     z-index: 999; 
     position: relative; 
    } 

    div { 
     margin-top: -80px; 
     margin-right: 20px; 

     h2 { 
      color: $white; 
      font-size: 24px; 
     } 

     p { 
      margin-top: 40px; 
     } 
    } 
} 

Side thưởng!: Bài viết cho biết các trình duyệt (hoặc ít nhất là Firefox) tìm kiếm các bộ chọn từ phải sang trái. Tôi không thể hiểu tại sao điều này lại hiệu quả hơn. Bất kì manh mối nào?

Answer 1

Bạn phải tìm thỏa hiệp của bạn giữa bảo trì (tổ làm cho nó dễ dàng hơn để tìm theo cách của bạn xung quanh trong stylesheet) và hiệu suất rendering.

Quy tắc chung cho biết bạn nên cố gắng hạn chế bản thân với lồng ghép ba cấp và bạn nên tránh lồng ID nếu không cần thiết.

Tuy nhiên, tôi nghĩ việc lồng ghép quá nhiều không phải là vấn đề lớn nhất. Ngay sau khi tôi nhận thức được sức mạnh của mixin, tôi đã sử dụng chúng rất nhiều.

Ví dụ, đây là nút thường được sử dụng của tôi mixin:

@mixin small-button($active-color: $active-color, $hover-color: $button-hover-color, $shadow: true) 
    display: inline-block 
    padding: 4px 10px 
    margin: 
    right: 10px 
    bottom: 10px 
    border: none 
    background-color: $button-color 
    color: $font-color-inv 
    +sans-serif-font(9px, 700) 
    text-align: center 
    text-transform: uppercase 
    cursor: pointer 
    @if $shadow 
    +light-shadow 
    &:hover 
    text-decoration: none 
    background-color: $hover-color 
    &:last-child 
    margin-right: 0 
    a 
    color: $font-color-inv 
    &, &:hover 
     text-decoration: none 
    &.disabled 
    +opacity(0.75) 
    &:hover 
     background-color: $button-color 
    &.active 
    background-color: $active-color 
    &.disabled:hover 
     background-color: $active-color 

Bạn thấy đấy, khá một mã bit. Áp dụng các mixin như vậy cho nhiều yếu tố trên trang của bạn sẽ dẫn đến một tệp CSS lớn mất nhiều thời gian hơn để được diễn giải.

Trong CSS theo cách cũ, bạn sẽ cung cấp cho từng yếu tố nút, ví dụ: nút .small. Nhưng phương pháp này gây ô nhiễm đánh dấu của bạn với các lớp học không điển hình.

Sass cung cấp giải pháp mặc dù: thừa kế bộ chọn qua @extend directive.

Nếu bạn đặt giá trị mặc định cho tham số bạn của mixin, bạn cũng có thể cung cấp một lớp đơn giản, trong đó sử dụng các mixins với mặc định của bạn:

// Use this mixin via @extend if you are fine with the parameter defaults 
.small-button 
    +small-button 

Và sau đó bạn chỉ có thể kế thừa từ lớp này trong bối cảnh khác nhau :

#admin-interface 
    input[type=submit] 
    @extend .small-button 

các kết quả trình bày CSS tập hợp tất cả các tập quán của nút .small thành một quy tắc với bộ chọn bằng dấu phẩy:

.small-button, #admin-interface input[type=submit] { 
    display: inline-block; 
    ... 
} 

Kết luận, một cách sử dụng ngây thơ của Sass có thể ảnh hưởng đến hiệu suất CSS của bạn. Tuy nhiên, được sử dụng một cách khôn ngoan, nó có thể duy trì nhờ mã có cấu trúc và mã DRY, nó dẫn đến việc tách biệt đánh dấu và tạo kiểu (chỉ các lớp ngữ nghĩa) và cho phép mã CSS thông minh và thực hiện.

Answer 2

SASS chỉ là ngôn ngữ biên dịch thành CSS. Nếu bạn quan tâm đến hiệu suất của SASS về cách nó chạy trong trình duyệt, thì SASS không nhập vào phương trình - nó sẽ được biên dịch và phục vụ cho trình duyệt như CSS thông thường.

---

Từ những gì tôi có thể nhìn thấy của việc sử dụng của bạn của Sass, có một vài điều tôi có thể gợi ý:

1. Bạn không có để tổ tất cả mọi thứ.

Khả năng lồng các quy tắc bên trong lẫn nhau trong SASS là một tính năng ngôn ngữ, nhưng bạn không phải làm điều đó nếu không có ý nghĩa.

---

Về việc sử dụng CSS chung của bạn:

1. Nếu làm tổ trở nên quá nghiêm trọng/unwieldly, xem xét sử dụng các lớp học, nơi nó có ý nghĩa.
2. Khi cần sử dụng phân cấp các phần tử DOM, hãy cân nhắc sử dụng [bộ phối hợp con]: .foo > .bar.

ID có nghĩa là duy nhất, do đó sẽ luôn chỉ tham chiếu đến một phần tử duy nhất. Hầu hết thời gian, họ có thể là quy tắc CSS cho chính họ - ví dụ: #content #flickr sẽ trở thành chỉ #flickr - và trình duyệt sẽ tối ưu hóa tra cứu cho một ID duy nhất. Thời gian duy nhất bạn sẽ cần một cái gì đó như #id1 #id2 là nếu #id2 cần phải xuất hiện trong các ngữ cảnh khác nhau trên các trang khác nhau.

Nếu bộ chọn của bạn chứa những thứ như #id div p, thì div là thừa hoặc phục vụ một mục đích cụ thể.

• Nếu đó là không cần thiết, thay đổi quy tắc để #id p, mà chọn bất kỳ <p> xảy ra như một hậu duệ của #id.
• Nếu nó phục vụ một mục đích cụ thể, hãy cân nhắc việc phân loại <div> với tên lớp mô tả mục đích của nó - có thể là <div class="photos-list">. Sau đó, CSS của bạn có thể trở thành .photos-list p, có thể duy trì và sử dụng lại nhiều hơn nữa.

---