Domů › Drupal CSS standardy

Drupal CSS standardy

Dokumentace:

CSS formátování

/**
 * @file
 * Short description describing the file.
 *
 * The first sentence of the long description starts here and continues on this
 * line for a while finally concluding here at the end of this paragraph.
 */

/* @group Section comment block
----------------------------------------------------------------------------- */

html,
body {
  min-height: 100%
}


/* @end Section comment block */

/**
 * Short description using Doxygen-style comment format.
 *
 * The first sentence of the long description starts here and continues on this
 * line for a while finally concluding here at the end of this paragraph.
 *
 * The long description is ideal for more detailed explanations and
 * documentation. It can include example HTML, URLs, or any other information
 * that is deemed necessary or useful.
 */
body {
  /* This line is indented with 2 spaces, 2 spaces x 1 level of indentation. */
  text-align: left;
}

/* The example's item styling. */
body,
div,
.selector-3[type="text"] {
  /* Override the default margins. */
  margin: 0;
  padding: 0;
  color: #333;
  background: #fff;
  background: linear-gradient(#fff, rgba(0, 0, 0, 0.8));
  font-family: Times, "Times New Roman", sans-serif;
}

.selector-1,
.selector-2 {
  padding: 10px;
}
  • výchozí standard kódování pro CSS soubory je UTF-8
    • vzhledem k tomu, že při agragaci dochází ke slučování více CSS souborů do jednoho, nesmí CSS soubory obsahovat žádné @charset prohlášení
  • každý soubor by měl začínat komentářem, který by měl soubor popisovat (max. 80 znaků na řádek)
    • pro komentáře je používána Doxygen konvence
  • u dlouhých soubrů vytvářejte pomocí komentářů "oddíly"
  • všechny textové soubory by měly končit prázným řádkem (umožňuje snadnější čtení pro GIT).
  • všechny textové soubory by měly mít Unixové formátování konců řádků (nový řádek \nnebo LF)
    • nastavte si editor tak, aby vám zobrazoval "neviditelné" formátovací znaky
    • Drupal 8 obsahuje v kořenovém adresáři soubor EditorConfig, který pomáhá udržovat tyto konvence mezer
  • selektor se umisťuje hned za komentář (bez prázdného oddělovacího řádku)
  • u více selektorů oddělených čárkou pište každý selektor na nový řádek
  • každou vlastnost piště na samostatný řádek
  • před dvojtečkou a čárkou se mezera nedělá, ovšem za ní ano
  • závorky obklopují svůj obsah přímo bez vložené mezery
  • za každou vlastností pište středník
  • barvy v hexadecimálním tvaru pište malými písmeny a pokud možno ve zkráceném tvaru #ccc (pozor, IE8 nepodporuje všechny barevné syntaxe)
  • víceslovné názvů fontů a hodnoty atributů v selektorech uzavírejte do uvozovek
  • u nulových hodnot nepište jednotky
  • každé pravidlo oddělte prázdným řádkem
  • konce řádků nesmí obsahovat žádné mezery nebo tabulátory

Podpora jazyků s tokem textu Right-To-Left (RTL)

Kaskádové styly je možné vytvářet v párech. Ve stejném adresáři může být např. soubor example.css s výchozím určením pro tok textu zleva doprava (LTR) a example-rtl.css určený pro tok textu zprava doleva (RTL) např. pro Arabštinu, Hebrejštinu atd.

Soubor example-rtl.css může potlačit určené deklarace souboru example.css. Odlišnosti v toku textu označeny /* LTR */ komentářem v originálním souboru example.css, aby bylo jasné které deklarace je nutné modifikovat v souboru example-rtl.css (pro přehlednost při pozdějších úpravách).

Soubor example-rtl.css je uplatněn pouze v případě použití jazyka (zobrazení stránek) s tokem textu zprava doleva a potlačuje tak určené deklarace souboru example.css.

Left-To-Right (LTR) vlastnosti by měly být označeny níže uvedeným komentářem v souboru example.css:

/**
 * @file
 * Left-To-Right (LTR) CSS file example.
 */
.example-rule {
  float: left; /* LTR */
  margin-right: 1.5em; /* LTR */
  padding: 0 0.25em;
}

Při použití RTL jazyka bude načten i příslušný soubor example-rtl.css:

/**
 * @file
 * Right-To-Left (RTL) CSS file example.
 */
.example-rule {
  float: right;
  margin-left: 1.5em;
  margin-right: 0;
}

Pořadí deklarací

.selector {
  /* Positioning */
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  /* Box Model */
  display: inline-block;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100px;
  padding: 10px;
  border: 10px solid #333;
  /* Other */
  background: #000;
  color: #fff;
  font-family: sans-serif;
  font-size: 1.1em;
}

Deklarace pište v pořadí od důležitých k méně důležitým:

  1. pozicování: position, float, clear, top, right, bottom, left, direction a z-index
  2. box model: [(max|min)-]height, [(max|min)-]width, margin, padding, border, margin-top atd. včetně box-sizing
  3. další vlastnosti: písmo, text atd.

Výjimky a mírné odchylky

.selector-1 { width: 10%; }
.selector-2 { width: 20%; }
.selector-3 { width: 30%; }

Mnoho jednoduchých deklarací je možné psát "jednořádkovým" formátem s mezerou za otevírací a před uzavírací závorkou.

.selector {
  background-image:
    linear-gradient(#fff, #ccc),
    linear-gradient(#f3c, #4ec);
  box-shadow:
    1px 1px 1px #000,
    2px 2px 1px 1px #ccc inset;
}

Dlouhé hodnoty oddělené čárkou (přechody, stíny atd.) je možné pro zvýšení čitelnosti psát na více řádků.

Příklad

/**
 * @file
 * Example of CSS coding standards for Drupal.
 */

/* ==========================================================================
   Grid layout
   ======================================================================= */

/**
 * Column layout with horizontal scroll.
 *
 * This creates a single row of full-height, non-wrapping columns that can be
 * browsed horizontally within their parent.
 *
 * Example HTML:
 *
 * <div class="grid">
 *   <div class="cell cell-3"></div>
 *   <div class="cell cell-3"></div>
 *   <div class="cell cell-3"></div>
 * </div>
 */

/**
 * Grid container
 *
 * Must only contain `.cell` children.
 */
.grid {
  height: 100%;
  /* Remove inter-cell whitespace */
  font-size: 0;
  /* Prevent inline-block cells wrapping */
  white-space: nowrap;
}

/**
 * Grid cells
 *
 * No explicit width by default. Extend with `.cell-n` classes.
 */
.cell {
  position: relative;
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  height: 100%;
  /* Set the inter-cell spacing */
  padding: 0 10px;
  border: 2px solid #333;
  vertical-align: top;
  /* Reset white-space */
  white-space: normal;
  /* Reset font-size */
  font-size: 16px;
}

/* Cell states */
.cell.is-animating {
  background-color: #fffdec;
}

/* Cell dimensions */
.cell-1 { width: 10%; }
.cell-2 { width: 20%; }
.cell-3 { width: 30%; }
.cell-4 { width: 40%; }
.cell-5 { width: 50%; }

/* Cell modifiers */
.cell--detail,
.cell--important {
  border-width: 4px;
}

Seskupování CSS pravidel

Drupal 8 vychází ze SMACSS kategorizace CSS pravidel.

  1. CSS_BASE – základní styl HTML elementů
  2. CSS_LAYOUT – základní uspořádání webové stránky
  3. CSS_MODULE – opakovaně použitelné komponenty návrhu (Netýká se Drupal modulů)
  4. CSS_STATE – styly závislé na JavaScriptu
  5. CSS_THEME – volitelný vzhled prvky návrhu (Netýká se Drupal témat)

Každá kategorie sad pravidel by měla být v samostatném CSS souboru.

Drupal 8 může mít jen 2 agregované CSS soubory (dříve jich bylo minimálně 6):

  • agregace pro každou stránku (AGGREGATE_EVERY_PAGE)
  • podmíněná agragace (AGGREGATE_CONDITIONAL)