Coding Production Workflow Overview

To maintain coding productivity and quality, key points and important considerations are outlined.

note

This covers HTML coding excluding front-end implementation.

info

• The listed content is just an example. Please refer to it based on your project requirements and schedule.
• Assumption: The following scenarios are anticipated. Implementing these points will help ensure the overall progress of the project runs smoothly.
  • Project:
    • In the case of large-scale projects
    • In the case of projects that anticipate long-term operation and maintenance
  • Structure: When multiple companies or individuals are involved, dividing and sharing tasks

Introduction

It is important to code using a component design philosophy that is reusable on CMS.

Example of Componentization

• Header
• Footer
• Headings
• Buttons
• List of articles
• Card UI for listing
• Pagination and more

Checking Materials

Please check the following in advance.

• Page list (site map)
• Screen design document, wireframes

Checkpoints

From the page list, confirm whether it is a "dynamic page to be templated in CMS" or a "static page".

Page-level Checks

• Confirm the "items to be output in CMS" and "those that are not".
• In particular, items to be output in CMS (items to be output in HTML) require consideration for operation, which will be discussed later.
• For items to be output in CMS, also check how they will be displayed based on "pattern variations" or "presence/absence of elements".

1. Basic Points

CSS Design	Define and standardize CSS design and naming rules to understand the scope and usage of CSS. Document them in the repository's README or component list.For example, we mainly use: CSS Design: FLOCSS Naming Convention: BEM
Use of Variables	Define styles used across the site using CSS variables or Sass variables for overall style consistency. List of colors used Font information: font size, font family Margins: It is convenient to have sm / md / lg / xl margins available. border-radius transition: It is convenient to have each value available.
Utility Classes	If not using a CSS framework, prepare styles for adjusting margins, font sizes, and display.
Responsive Design	Do not separate CSS files for each device; use a common file and switch using media queries. Reflect on whether to make media queries mobile-first based on the main devices of the user base. Even if the design differs between PC and mobile, try to accommodate it with a single source.
Componentization	UI Unit: Prepare a list of components. Block Unit: Componentize common parts/blocks used within the site and call them.
Link Settings	Avoid writing like <a href="#">See more</a>, confirm the screen design and set the link destination to enable page transitions. For external links that open in a new tab, always include rel="noopener".
Others	Avoid code duplication using mixins. For pages with different displays based on patterns, place all patterns on one page when templateizing.

2. Points for Reusable Coding

Styles should be coded in a reusable manner, not limited to specific pages but usable across other pages as well.

Overall

Do not apply styles directly to selectors or prepend elements to selectors

NG  h4.heading
OK  .heading

NG  .link a
OK  .link-title

Do not specify selectors that apply styles only under specific pages

NG  #column-page .heading
OK  .column-heading

When implementing frontend, it is common to add wrapper elements like <div>. Design your styles to not break even when wrapper elements are added.

Do not specify selectors that apply styles only when placed within specific hierarchies

NG  #column-page > #column-pickup > .column-list
OK  .column-list

Form

To set the name attribute on the Kuroco side, please use selectors like id, class, data attributes in JS and CSS.

Do not use the name attribute in selectors

NG  input[name="company-name"]
OK  .input-company-name

3. Performance Optimization

Even if there are no issues in the local or mockup environment, after implementation on the live site, file loading may slow down page rendering speed or cause stuttering.

Web Font	Ensure it can handle slow network environments by: Implementing display: swap Using SVG for text in cases of partial usage
Image	Using loading="lazy" Checking Kuroco's available settings
Slider	Consider options like LazyLoading for slides beyond the first one.

4. Coding for WYSIWYG Editors

When applying styles to HTML input in a WYSIWYG editor, make sure to check and note the points and precautions for styling the areas where the editor is used as per the screen design document.

Overall

When styling content in a WYSIWYG editor, specify only the selector for the wrapper element and apply styles to the elements.

Add wrapper element to the editor

// html
<div class="editor">
  // The HTML output generated by the editor will be inserted.
</div>

// scss
.editor {
  h1 { }
  p { }
  ul:not([class]) { } // Separate style for when class is added
}

Element Verification

Check the toolbar buttons used and ensure that standard designs are applied. Pay attention if styles are not applied without adding classes, especially when using reset.css.

List of typical tags inserted by WYSIWYG editor toolbar buttons

<h1>
<h2>
<h3>
<h4>
<p>
<strong>
<i>
<u>
<a>
<figure>
<img>
<oembed>
<table>
<ul>
<ol>
<blockquote>

Notes on CKEditor Specifications

Kuroco uses CKEditor5. Note that the following coding is not allowed in the editor. If you need to input complex HTML, change the input field format from WYSIWYG editor to HTML format.

Empty tags are not allowed

OK  <i>nbsp;</i>
NG  <i></i>

Block elements are not allowed inside <a> tags

OK  <a href="#"><span>Inline text</span></a>
OK  <a href="#"><img src="path.png"></a>

NG  <a href="#"><div>Div Block</div></a>
NG  <a href="#"><p>Text Block</p></a>

Nested <span> tags are not allowed

OK  <span>SpanText</span>
NG  <span>SpanText<span>Child</span></span>

In a single block element, there are restrictions when adding multiple <span> tags

// You need to assign a class name and use a different class name as well.
OK  <div><span class="span1">span1</span><span class="span2">span2</span></div>

NG  <div><span>No ClassName</span><span>No ClassName</span></div>
NG  <div><span class="span1">span1</span><span class="span1">span1</span></div>

In the following cases (inline elements), a <p> tag will be inserted.

Text

<!-- When writing -->
Text <span>SpanText</span>

<!-- After conversion -->
<p>Text<span>SpanText</span></p>

<!-- Not converted to <p> -->
<div>Text<span>SpanText</span></div>

Image

<!-- When writing -->
<img src="path.png">

<!-- After conversion -->
<p><img src="path.png"></p>

<!-- Not converted to <p> -->
<div><img src="path.png"></div>

Link

<!-- When writing -->
<a href="#">ButtonLink</a>

<!-- After conversion -->
<p><a href="#">ButtonLink</a></p>

<!-- Not converted to <p> -->
<div><a href="#">ButtonLink</a></div>

<dl>

<!-- When writing -->
<dl>
  <dt>Heading</dt>
  <dd>Content</dd>
</dl>

<!-- After conversion -->
<dl>
  <dt><p>Heading</p></dt>
  <dd><p>Content</p></dd>
</dl>

5. Other Points to Note

• Set up meta tags
• Check the screen specifications and set the page title and URL appropriately