Yönetilebilir ve Ölçeklenebilir CSS Yazmak

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...
 */

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; }

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 { }

Location Independence

CSS Selectors

.header a { }

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;
}

Selector Performance

CSS Selectors

body.home div.header ul { }

• 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; }

<div id="content">
  <div class="table my-new-table">
    ...
  </div>
</div>

!important

Specificity

.my-new-table.first { color: green !important; }