Yönetilebilir ve Ölçeklenebilir CSS Yazmak
[19, 20, 21] Mayıs 2017
@kodlaco
... /ademilter
👶🏻
👨🏻
@Protel
🤳🏻👨🏻💻👨👩👧✨🍉🚴🏻🏕
Syntax and Formatting
Table of Contents
Titling
Multi-line CSS
80 Characters Wide
Indenting (css/sass)
Alignment
Multiple Files
Titling
Syntax and Formatting
/*------------------------------------*\
#SECTION-TITLE
\*------------------------------------*/
.selector { }
/*------------------------------------*\
#ANOTHER-SECTION
\*------------------------------------*/
/**
* Comment
*/
.another-selector { }
Table of Contents
Syntax and Formatting
/* SETTINGS */
@import "config/variable";
@import "config/function";
@import "config/mixin";
/* GENERIC */
@import "helper/normalize";
@import "helper/formalize";
/* BASE */
@import "helper/font-face";
@import "helper/flexboxgrid";
/* GLOBAL */
@import "helper/typography";
@import "helper/utility";
@import "helper/form";
/* PLUGIN */
@import "modules/cropper";
@import "modules/flickity";
@import "modules/jquery-confirm";
/* COMPONENT */
@import "shared/header";
@import "shared/footer";
@import "shared/public";
@import "pages/empty";
/* PAGES */
@import "pages/home";
@import "pages/login";
@import "pages/register";
Multiple Files
Syntax and Formatting
/* HEADER */
@import "global/header";
@import "global/header-logo";
@import "global/header-navigation";
@import "global/header-navigation-dropmenu";
@import "global/header-search";
@import "global/header-profile";
@import "global/header-profile-popup";
80 Characters Wide
Syntax and Formatting
/**
* Uzun bir yorum yapmak istediğimde tam olarak buradan sonrasını okuyamayac...
*/
/**
* Uzun bir yorum yapmak istediğimde 80 karakter kuralına uyduğun için,
* devamındaki yazılanları rahatça okuyacaksın. Scroll etmen gerekmeyecek.
*/
Multi-line CSS
Syntax and Formatting
.icon {
display: inline-block;
width: 16px;
height: 16px;
background-image: url(/img/sprite.svg);
}
.icon--home { background-position: 0 0 ; }
.icon--person { background-position: -16px 0 ; }
.icon--files { background-position: 0 -16px; }
.icon--settings { background-position: -16px -16px; }
Indenting
Syntax and Formatting
.footer { color: red; }
.footer-logo { color: blue; }
.footer-nav { color: green; }
.footer {
color: red;
&-logo {
color: blue;
}
&-nav {
color: green;
}
}
Alignment
Syntax and Formatting
.foo {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.bar {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin-right: -10px;
margin-left: -10px;
padding-right: 10px;
padding-left: 10px;
}
Commenting
High-level
Low-level
Preprocessor Comments
High-level
Commenting
/**
* The site’s main page-head can have two different states:
*
* 1) Regular page-head with no backgrounds or extra treatments; it just
* contains the logo and nav.
* 2) A masthead that has a fluid-height (becoming fixed after a certain point)
* which has a large background image, and some supporting text.
*
* The regular page-head is incredibly simple, but the masthead version has some
* slightly intermingled dependency with the wrapper that lives inside it.
*/
Low-level
Commenting
/**
* Large site headers act more like mastheads. They have a faux-fluid-height
* which is controlled by the wrapping element inside it.
*
* 1. Mastheads will typically have dark backgrounds, so we need to make sure
* the contrast is okay. This value is subject to change as the background
* image changes.
* 2. We need to delegate a lot of the masthead’s layout to its wrapper element
* rather than the masthead itself: it is to this wrapper that most things
* are positioned.
* 3. The wrapper needs positioning context for us to lay our nav and masthead
* text in.
*/
.page-head--masthead {
margin-bottom: 0;
@include vendor(background-size, cover);
color: $color-masthead; /* [1] */
> .wrapper { /* [2] */
position: relative; /* [3] */
}
}
Preprocessor Comments
Commenting
// Dimensions of the @2x image sprite:
$sprite-width: 920px;
$sprite-height: 212px;
Naming Conventions
SUIT CSS-like Naming
https://goo.gl/0bznv7
SUIT CSS relies on structured class names and meaningful hyphens (i.e., not using hyphens merely to separate words). This helps to work around the current limits of applying CSS to the DOM (i.e., the lack of style encapsulation), and to better communicate the relationships between classes.
ComponentName
Naming Conventions
.MyComponent { /* … */ }
<article class="MyComponent">
…
</article>
(PascalCase)
ComponentName--modifierName
Naming Conventions
/* Core button */
.Button { /* … */ }
/* Default button style */
.Button--dark { /* … */ }
<button class="Button Button--dark" type="button">
…
</button>
ComponentName-descendentName
Naming Conventions
<article class="Tweet">
<header class="Tweet-header">
<img class="Tweet-avatar" src="{{src}}" alt="{{alt}}">
…
</header>
<div class="Tweet-bodyText">
…
</div>
</article>
ComponentName.is-stateOfComponent
Naming Conventions
.Tweet { /* … */ }
.Tweet.is-expanded { /* … */ }
<article class="Tweet is-expanded">
…
</article>
CSS Selectors
Selector Intent
Location Independence
Naming
Selector Performance
Selector Intent
CSS Selectors
header ul { }
.site-nav { }
Location Independence
CSS Selectors
.header a { }
.btn { }
Naming
CSS Selectors
Tying your class name semantics tightly to the nature of the content has already reduced the ability of your architecture to scale or be easily put to use by other developers.
Nicolas Gallagher
.blue {
color: blue;
}
.header span {
color: blue;
}
.header-color {
color: blue;
}
.highlight-color {
color: blue;
}
Selector Performance
CSS Selectors
body.home div.header ul { }
.primary-nav { }
- Sayfadaki bütün ul etiketlerini bul
- Bulduğun element .header sınıfı içinde mi?
- Bu .header sınıfı bir div mi?
- Peki bu header elementi .home sınıfı içinde mi?
- Son olarak; .home sınıfın etiketi body mi?
- Sayfadaki bütün .primary-nav elemanlarını bul
- Stili çak geç
Chaos
IDs in CSS
!important
IDs in CSS
Specificity
#content table { color: red; }
.my-new-table { color: blue; }
<div id="content">
<div class="table my-new-table">
...
</div>
</div>
.my-new-table { color: blue !important; }
#content .my-new-table { color: blue; }
!important
Specificity
.my-new-table.first { color: green !important; }
.my-new-table.second { color: blue !important; }
.my-new-table.third { color: blue !important; }
Sorular
@ademilter
🙋🏻♂️
Kaynaklar
- https://cssguidelin.es/
- http://mrmrs.io/writing/2016/03/24/scalable-css/
- http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
- https://github.com/necolas/idiomatic-css
Yönetilebilir ve Ölçeklenebilir CSS Yazmak
By Adem ilter
Yönetilebilir ve Ölçeklenebilir CSS Yazmak
- 889