Handling Unused CSS In Sass To Improve Performance > QNA

본문 바로가기
Search all within the site

QNA

Handling Unused CSS In Sass To Improve Performance

페이지 정보

작성자 최고관리자 댓글 0건 조회 25회 작성일 19-08-19 12:48

본문

<p style="box-sizing: border-box; margin: 0px; line-height: 1.55em; word-break: break-word; grid-column: 3 / 13; font-size: 1.1em; color: #333333; font-family: Elena; background-color: #ffffff;">In modern front-end development, developers should aim to write CSS which is scalable and maintainable. Otherwise, they risk losing control over specifics such as the cascade and selector specificity as the codebase grows and more developers contribute.</p>
<p style="box-sizing: border-box; margin: 0px; line-height: calc(1.5em + 0.2vw); word-break: break-word; grid-column: 3 / 13; color: #333333; font-family: Elena; font-size: 21.2px; background-color: #ffffff;">One way this can be achieved is through the use of methodologies such as Object-Oriented CSS (OOCSS), which rather than organizing CSS around page context, encourages separating structure (grid systems, spacing, widths, etc.) from decoration (fonts, brand, colors, etc.).</p>
<p style="box-sizing: border-box; margin: 0px; line-height: calc(1.5em + 0.2vw); word-break: break-word; grid-column: 3 / 13; color: #333333; font-family: Elena; font-size: 21.2px; background-color: #ffffff;">So CSS class names such as:</p>
<ul style="box-sizing: border-box; padding: 0px 0px 0px calc(1.4em + 0.7vw); margin: 0px; max-width: 100%; list-style: none url('../images/bullet.svg'); grid-column: 3 / 13; color: #333333; font-family: Elena; font-size: 21.2px; background-color: #ffffff;">
<li style="box-sizing: border-box; line-height: calc(1.5em + 0.2vw); word-break: break-word; margin-bottom: calc((1em + 0.5vw) / 2); padding-left: 0.25em;"><code style="box-sizing: border-box; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: calc(0.75em + 0.1vw); background: #f6f3f2; text-shadow: #ffffff 0px 1px; word-spacing: normal; word-break: normal; font-variant-ligatures: none; overflow-wrap: normal; tab-size: 4; hyphens: none; -webkit-font-smoothing: antialiased; padding: 0px 0.2725em; display: inline-block; font-feature-settings: normal; line-height: calc(1.5em + 0.2vw) !important;">.blog-right-column</code></li>
<li style="box-sizing: border-box; line-height: calc(1.5em + 0.2vw); word-break: break-word; margin-bottom: calc((1em + 0.5vw) / 2); padding-left: 0.25em;"><code style="box-sizing: border-box; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: calc(0.75em + 0.1vw); background: #f6f3f2; text-shadow: #ffffff 0px 1px; word-spacing: normal; word-break: normal; font-variant-ligatures: none; overflow-wrap: normal; tab-size: 4; hyphens: none; -webkit-font-smoothing: antialiased; padding: 0px 0.2725em; display: inline-block; font-feature-settings: normal; line-height: calc(1.5em + 0.2vw) !important;">.latest_topics_list</code></li>
<li style="box-sizing: border-box; line-height: calc(1.5em + 0.2vw); word-break: break-word; margin-bottom: calc((1em + 0.5vw) / 2); padding-left: 0.25em;"><code style="box-sizing: border-box; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: calc(0.75em + 0.1vw); background: #f6f3f2; text-shadow: #ffffff 0px 1px; word-spacing: normal; word-break: normal; font-variant-ligatures: none; overflow-wrap: normal; tab-size: 4; hyphens: none; -webkit-font-smoothing: antialiased; padding: 0px 0.2725em; display: inline-block; font-feature-settings: normal; line-height: calc(1.5em + 0.2vw) !important;">.job-vacancy-ad</code></li>
</ul>
<p style="box-sizing: border-box; margin: 0px; line-height: calc(1.5em + 0.2vw); word-break: break-word; grid-column: 3 / 13; color: #333333; font-family: Elena; font-size: 21.2px; background-color: #ffffff;">Are replaced with more reusable alternatives, which apply the same CSS styles, but aren&rsquo;t tied to any particular context:</p>
<ul style="box-sizing: border-box; padding: 0px 0px 0px calc(1.4em + 0.7vw); margin: 0px; max-width: 100%; list-style: none url('../images/bullet.svg'); grid-column: 3 / 13; color: #333333; font-family: Elena; font-size: 21.2px; background-color: #ffffff;">
<li style="box-sizing: border-box; line-height: calc(1.5em + 0.2vw); word-break: break-word; margin-bottom: calc((1em + 0.5vw) / 2); padding-left: 0.25em;"><code style="box-sizing: border-box; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: calc(0.75em + 0.1vw); background: #f6f3f2; text-shadow: #ffffff 0px 1px; word-spacing: normal; word-break: normal; font-variant-ligatures: none; overflow-wrap: normal; tab-size: 4; hyphens: none; -webkit-font-smoothing: antialiased; padding: 0px 0.2725em; display: inline-block; font-feature-settings: normal; line-height: calc(1.5em + 0.2vw) !important;">.col-md-4</code></li>
<li style="box-sizing: border-box; line-height: calc(1.5em + 0.2vw); word-break: break-word; margin-bottom: calc((1em + 0.5vw) / 2); padding-left: 0.25em;"><code style="box-sizing: border-box; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: calc(0.75em + 0.1vw); background: #f6f3f2; text-shadow: #ffffff 0px 1px; word-spacing: normal; word-break: normal; font-variant-ligatures: none; overflow-wrap: normal; tab-size: 4; hyphens: none; -webkit-font-smoothing: antialiased; padding: 0px 0.2725em; display: inline-block; font-feature-settings: normal; line-height: calc(1.5em + 0.2vw) !important;">.list-group</code></li>
<li style="box-sizing: border-box; line-height: calc(1.5em + 0.2vw); word-break: break-word; margin-bottom: calc((1em + 0.5vw) / 2); padding-left: 0.25em;"><code style="box-sizing: border-box; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: calc(0.75em + 0.1vw); background: #f6f3f2; text-shadow: #ffffff 0px 1px; word-spacing: normal; word-break: normal; font-variant-ligatures: none; overflow-wrap: normal; tab-size: 4; hyphens: none; -webkit-font-smoothing: antialiased; padding: 0px 0.2725em; display: inline-block; font-feature-settings: normal; line-height: calc(1.5em + 0.2vw) !important;">.card</code></li>
</ul>
<p style="box-sizing: border-box; margin: 0px; line-height: calc(1.5em + 0.2vw); word-break: break-word; grid-column: 3 / 13; color: #333333; font-family: Elena; font-size: 21.2px; background-color: #ffffff;">This approach is commonly implemented with the help of a Sass framework such as&nbsp;<a style="box-sizing: border-box; background-color: transparent; text-decoration-line: none; padding: 10px 0px; background-image: linear-gradient(currentcolor, currentcolor); background-repeat: no-repeat; background-size: 100% 1.5px; background-position: center bottom 29%; background-origin: padding-box; text-shadow: #ffffff 3px 0px, #ffffff 2px 0px, #ffffff 1px 0px, #ffffff -1px 0px, #ffffff -2px 0px, #ffffff -3px 0px; color: #006fc6; transition: color 0.1s ease-out 0s;" href="https://getbootstrap.com/">Bootstrap</a>,&nbsp;<a style="box-sizing: border-box; background-color: transparent; text-decoration-line: none; padding: 10px 0px; background-image: linear-gradient(currentcolor, currentcolor); background-repeat: no-repeat; background-size: 100% 1.5px; background-position: center bottom 29%; background-origin: padding-box; text-shadow: #ffffff 3px 0px, #ffffff 2px 0px, #ffffff 1px 0px, #ffffff -1px 0px, #ffffff -2px 0px, #ffffff -3px 0px; color: #006fc6; transition: color 0.1s ease-out 0s;" href="https://foundation.zurb.com/">Foundation</a>, or increasingly more often, a bespoke framework which can be shaped to better fit the project.</p>

댓글목록

등록된 댓글이 없습니다.


그누보드5
Copyright © UX Site. All rights reserved.