Postmodern Modular Front-end Web Development
Front-end web developers should focus on engineering unique variations of compatible, reusable and useful HTML structures and spend less energy confusing the ideologies of data management techniques with the fundamental principles and rules of the language being managed. Authoring coherent, consistent and organised code is important. It is important to those who share a similar perception of it.
CSS already exists.
Part 1
Fundamental Concepts
Development
Ordinarily, development can be defined as, "a state of constant growth or advancement", however the meaning is distorted by the words "growth" and "advancement" as they trigger subjective emotional responses. From a linguistic perspective the word "development" is similar to a homonym in that it can be defined either as an event or a process. In the context of this discussion, development is defined as a process that consists of multiple events.
Front-end web development
The way in which CSS is used and how it is applied, is being questioned in the context of the "evolution of styling in JavaScript", indicating a postmodern stage of development. Authoring reusable code in the format of 'modular CSS' within component based web applications, is currently a popular approach to front-end web development.
Linear thinking
A mechanistic scientific view is an analytical,
reductionist and linear-causal paradigm,
in which the observed phenomenon is broken into parts, isolated from the whole and examined separately.
Event orientated thinking interprets data by the causal chain of events, for example
A → B .
From this perspective, event [ A ] is the root cause of [ B ] .
Systems thinking
Systems theory is a conceptual framework
that can be used to explain and understand the complex
interrelationships and interdependence of components that form a functioning whole.
A system consists of a group of components that collectively represent an environment known
as an interface, a user interface (UI) is an environment intended for user interaction.
A systems view opposes the reduction of systems
and criticizes the mechanistic scientific view.
The totality, complexity and dynamics of a system are instead, emphasized.
Systems thinking interprets data as a series of feedback loops, as all
elements are perceived as interconnected in a pattern of complex relationships
that can be non-intuitive and non-linear.
Removing [ A ] could result in the system replacing it with
[ C ] resulting in C → B = - A
Page based design
The method of page based design is a standard approach to front-end web development, however it is not scalable. This type of design adopts a particular perception: a web application is perceived as a collection of interconnected pages, each serving as the context for a particular set of components.
Component based design
Object Oriented Programming (OOP) introduced the concept of organised data structures as the basis of application development. "Object design is the drawing of boundaries between the logic of our application, and how we can then envisage the interaction of such logic." This type of thinking setup the conditions for a new perception to emerge: a web application is a system of interconnected components.
Part 2
Naming Patterns
The Naming Pattern Continuum
Function Object Orientated
FOO
A naming pattern is a multidisciplinary data management technique. Object orientated and function orientated naming patterns are positioned at opposites ends of a continuum. Object orientated class names are based on content type and function orientated class names are defined in isolation.
Object Orientated
The BEM naming methodology is a popular content dependant object orientated CSS naming pattern. A BEM block level class derives its name from the content-type it expects to contain or be contained within. Element and modifier classes are prefixed with the parent block class name, thus forming a naming dependency that restricts adaptability and re-usability. The need to author new object orientated classes arises when changes to the HTML are required. BEM components are described using three entities...
Function Orientated
Function orientated naming patterns are content independent, as classes are named in isolation of an environment. A function orientated class name can be derived from a single property and its value. The class name describes itself and answers the question, "what does it do?". Function orientated stylesheets only need to be authored once, as function orientated classes are immortal.
Function Object Orientated
Function orientated and object orientated naming patterns should be integrated in a multi-class syntax. In terms of the cascade, function orientated classes should have greater specificity and precedence over object orientated classes. Object orientated naming patterns such as BEM establish a directional relationship between HTML and CSS. Components made up of object orientated classes are reusable, however the object orientated classes are not. Function orientated classes can extend existing components, allowing one to develop variations of a component without the need to author new styles. Authoring Function Object Oriented 'multi-class' HTML establishes the conditions for code re-usability.
The focus should be on the structure of HTML.
CSS already exists.
Part 3
Methodology
Dependency Structure Matrix
Luca Alfaro, the Professor and Department Chair of the Computer Science Department at the University of California & Thomas Henzinger, the President of the Institute of Science and Technology in Austria, co-authored an academic article on system components, "Interface Theories for Component Based Design", while studying at the University of California. The academic article describes components from one of two perspectives, both of which are congruent with content independent naming patterns.
A component description defines a component in isolation and answers the question: what does it do?
A content independent utility class .margin-lr-20
is equivalent to a component description.
A component interface description defines a component in relation to the environment and answers the question:
how can it be used?
Interface descriptions are content independent reusable classes that establish containing blocks for structure with
a zone of dependency that begins at the level it is applied and extends outwards into the surrounding environment.
The class name .horizontal-inline-flex describes
the structure and layout mode that is established, however it does not describe what it contains.
The BEM methodology follows a particular sequence of events. A block name is first authored and then applied to the outermost layer of HTML. An element name is prefixed with the block name and then applied to the child elements of the block. The block name is directly related to the type of content it contains. The zone of dependency starts at the level of application and extends inwards.
Content independent class names
.horizontal-inline-flex
.margin-lr-20
.margin-lr-20
.margin-lr-20
Content dependent class names
.nav-bar
.nav-bar__item
.nav-bar__item
.nav-bar__item
Class Types
Component Descriptions
Component Interface Descriptions
BEM
HTML Syntax
BEM can exist independantly.
BEM can be authored in a multi-class syntax.
BEM classes can be replaced.
Modular Components
Complex components can be broken down into sub-components.
Different HTML configurations can be developed by replacing BEM classes with component interface descriptions and component descriptions.
Calendar variation 1
BEM
Calendar variation 2
Component interface descriptions and component descriptions
3D View
The structure of the calendar
React
Function Object Orientated Application
Styles for styled-components are injected during runtime into the DOM, at the end of the head. These styles take precedence over global CSS. Utility classes should be collectively positioned at end of the cascade, such that specific properties of components can be overridden.
Method 1)
Apply a global class
global-utility-class
together with a styled component class.
Method 2)
To develop variations of a styled component class call
extend
on the component.
Structure
FOO Methodology
"The rules of logic are to mathematics what those of structure are to architecture."
Bertrand Russell
The Visual Formatting Process
The W3C have defined a universe of rules that govern how CSS properties visually format HTML elements. The Visual Formatting Model is an algorithm that processes the document tree and displays it on visual media. During this process, each element within the document tree generates zero or more boxes, according to a box model. A box is rendered in relation to the edge of its containing block. Once rendered, a box can establish itself as a containing block for its descendants. A box can be given a positioning scheme in combination with a specific layout mode and its dimensions can be precisely defined or constrained.
Different types of boxes can be generated depending on the value of the display property. When the value of a box's display property is declared, the element is said to be at 'block-level'. The display property equates to the layout mode which is an algorithm that determines the position and the size of a box. After a box is generated it can then be positioned by a positioning scheme.
A containing block is established when a positioning scheme and a display property are declared.
BEM only
The following example is a demonstration of the BEM naming convention as of 10th March 2018.
HTML
CSS
The example displays as such:
The BEM methodology places great importance on how accurately the name of a selector describes the entity it represents. There is very little documentation on the establishment of containing blocks or what CSS properties can be used to reinforce the function of each BEM entity.
This is strange.
Modern Browser (User Agent) CSS
The manner in which the UI is structured should echo the principles of the W3C visual formatting modal. Establishing properly formatted containing blocks increases browser compatibility and allows one to more accurately control the position and size of elements.
Earlier versions of Normalize.css contained the following:
Normalize.css
This update to Normalize.css removed the HTML5 display definitions, however, the following elements are by default, set to display: block; within modern browsers as of 10th March 2018.
(User Agent) CSS
If the following CSS is added:
The layout mode of the elements will be set to their initial value. The display property is not set by default, as such, the basic structure is removed and the BEM example would display as such:
The (User Agent) CSS establishes the structure within the BEM example.
Layout Mode Establishes Structure
The layout mode of .page__inner, declared within the (User Agent), in combination with the BEM styles
margin-left: auto; margin-right: auto; center aligns the element.
(User Agent) CSS
BEM CSS
(User Agent) + BEM
The presentation and structure of components should not depend on User Agent (CSS).
Part 6
Containing Block
Extrapolation of the Visual Formatting Modal
Containing blocks establish a base structure and
utility classes manipulate the presentation of
existing object orientated component classes
in order to reuse code.
Declaring a positioning scheme and a specific layout mode establishes a base structure from which to develop further.
I have assumed a box-model of border-box;
containing block = component interface description
Complexification
Within the CSS2 paradigm, layout configuration is controlled at the same level the properties are applied, except for tables.
Within the CSS3 paradigm, layout configuration of child elements is controlled by the properties and property values declared at a parent level and a child level. The BEM methodology emphasizes equal specificity, however, the CSS3 paradigm requires parent → child interface descriptions.
The W3C began the development of Flexbox in 2011. On the 10th of August 2017, Bootstrap announced their first beta release of Bootstrap4 with Flexbox being used as the base layout mode and primary grid system. On the 19th of October 2017, the W3C released a document describing Flexbox as, "a CSS box model optimized for user interface design". Developing layouts that combine CSS Grid and Flexbox will setup the conditions for further evolution.
The function of a front-end web developer has remained the same, however, the development process has complexified. Modern web applications have intricate requirements that need to be satisfied in the context of competitive deadlines and high expectations. Although front-end web development is a process, it is unfortunately judged in a single event.
CSS controls the presentation of HTML in a uni-directional manner. Properties and property values determine how elements will be presented and how they interact in relation to other elements.
CSS is made visible by HTML.