• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Codemotion Magazine

Codemotion Magazine

We code the future. Together

  • Discover
    • Live
    • Tech Communities
    • Hackathons
    • Coding Challenges
    • For Kids
  • Watch
    • Talks
    • Playlists
    • Edu Paths
  • Magazine
    • AI/ML
    • Backend
    • Frontend
    • Dev Life
    • DevOps
    • Soft Skills
  • Talent
  • Partners
  • For Companies
Home » Frontend » Build your pipeline project with… style!
Frontend

Build your pipeline project with… style!

An overview of how to approach CSS and why any web developer (even if not working on frontend) should know a bit of it.

Last update January 7, 2020 by Lorenzo Franceschini

Build your pipeline project with… style!

How many of you are afraid of Cascade Style Sheet, also known as CSS? Honestly, I am really scared of it, maybe because I’m not a designer and my ability on computer graphics is not so good to make me feel comfortable with CSS. However, when we are in a medium-sized project, or when we are working alone on a small project, we need to think about the general architecture of the technology stack of our application to succeed. This includes style with the right choice such as which style language will be applied, which level of browser compatibility we are looking for, and so on.

In a frontend perspective way, we need to cover and think about many different topics from usability to functionality, from user experience (UX) to User Interface (UI) and last but not least, which kind of main library or framework we will use to build our components and client side application logic.

So this is the main reason why, at Codemotion Rome 2019, I listened to Giacomo Zinetti’s talk – from Liferay an open-source company – with the hope I would increase my knowledge about the pipeline building project that involves styling.

Giacomo revealed to us what kind of questions we need to answer in order to do it right, starting from scratch for the style point of view.

Environment

Our environment is not only about what software or IDE will we use to write and build the application. Mainly, the environment is composed by people who work together in one or more team. So, the team is the first resource that we need to know well, in order to enjoy the work and get the most from everyone.

We need to know the level of experience of our team to assign them the right work balance.

Next, the type of the project is also fundamental to understand not only how many people we need to involve on it, but it will be the key to choose from library or a framework or build all the css rules from scratch. The type of project can be a complete web application like an e-commerce, a simple landing page, a single web component or an admin panel made mainly with charts and data table.

After that, the life-span of our products is another aspect that we need to evaluate before selecting what kind of framework or not we need. A light technology stack is preferable for little projects with a short life-span.

Then we have to decide about Vendor Compatibility, Browser Compatibility and Performance, but we do not always handle those aspects; most of the time both are imposed constraints and we don’t have to much control over them.

Finally, we need to discuss handling the application logic, do we need a framework like Vue, Angular or React or even to try the new way of the Web Components or stick with Vanilla JavaScript (please don’t use jQuery anymore).

In addition, what kind of architecture should we choose? Microservices Architecture pattern or Monolithic Architecture pattern?

Microservice architecture is a method of developing software systems that tries to focus on building single responsibility function modules with well-defined interfaces and operations. The trend has grown popular in recent years as Enterprises look to become more Agile and move towards a DevOps and continuous testing.

Style Build Pipeline

Let us begin to discover how many ways we have to get involved with CSS. It sounds like a very nice job from Giacomo’s words.

First, we discovered that out of the Bootstrap framework, there are many other frameworks! Wow! I need to admit that I am too addicted to Bootstrap.

Secondly, related to CSS framework like JavaScript framework, we can have different kinds of typologies, from pure CSS library to a complete set of CSS rules with a set of JavaScript scripts that give us components like Carousel or Hamburger Menu, but I discovered an unknown typology to me: utility framework like Tailwind or Tachyons.

A utility framework does not have a default theme and there are no built-in UI components like Bootstrap, Foundation or Bulma. On the other hand, it also has no opinion about how your site should look and does not impose design decisions that you have to fight to undo. Instead, it provides highly composable, low-level utility classes that make it easy to build complex user interfaces without encouraging any two sites to look the same.

However, if you like to write custom CSS or modify an already existed one, what kind of steps do we need to take?

There are two main steps: pre–processing and post–processing.

Pre-processing is the step where our CSS syntax code is not written in standard CSS but with another language like SASS, Less or Stylus. Therefore, we need to transform the new syntax that seems to be like CSS, in plain CSS to make it understandable for the browser.

Why we use those kind of languages? To add “power” to our syntax and get access to mixins, functions and variables, that we use in standard programming language, and can be useful to get more control on our style code.

SASS Example
Less Example

Post-processing is the step where our CSS is transformed in CSS (yes, it seems to be the same) which enriches our rules with vendor prefix, optimises tasks such as compression and minification, the linting task involves error checking operations and checks the style guide related to the code we write.

If our project is a lifelong one, Giacomo advises us to stick to classic CSS with semantic names for our class styles to prevent a choice that can be deprecated or abandoned in the future.

Is that all? In truth, before starting every project, it is good to write and share with all team members a style guide and a naming convention like BEM, to have a clear folder structure with the appropriate file names which improves organisation and finding operations.

A linter helps us write better code. With the right settings, we can check our code while we are writing it and get suggestions and warnings. It can greatly improve our productivity and prevent hidden problems.

Finally, do not forget that stylesheet is determined by the cascade feature. It is a fundamental feature that defines how to combine property values coming from different sources. This is the key to know how an element can be rendered in a certain way.

Why you need to know cascade

facebooktwitterlinkedinreddit
Share on:facebooktwitterlinkedinreddit

Tagged as:Codemotion Rome CSS

How to Solve 5 Common Career Challenges for Developers
Previous Post
Disability tech is booming – but where are the disabled leaders?
Next Post

Related articles

  • Inertia: make modern SPAs with Laravel and Javascript frameworks
  • A Quick Guide to NextJS
  • Micro Frontends: the Future of Web Development?
  • Headless Architecture: Everything you Need to Know
  • Front-end Refactoring for Performance Improvement
  • How Micro-Frontend Architecture Improves Team Management and the Developer Experience
  • How‌ ‌to‌ ‌Deploy‌ ‌Faster‌ ‌and‌ ‌More‌ ‌Precise‌ ‌UI‌ Tests‌
  • Reactive Forms in Angular
  • Front-end development with Angular & NgRx
  • Nexi Dev Training Program: an attendee’s experience

Primary Sidebar

The IT Industry in Italy: Trending Positions, Salaries, and Main Skills for 2022

Codemotion and Adecco’s guide to understanding the IT working environment in Italy. Download here:

Adecco Whitepaper IT Report

Latest

grpc, http, rest

GRPC Approach for Improved Software Development

Web Developer

Using the Twelve-Factor Methodology in Cloud-Native Microservices

Microservices

svelte, javascript frameworks, vue.js, angular

Svelte: Why Is It an Innovation to Javascript Frameworks?

JavaScript

blockchain, avascan, avalanche, defikingdom, subnet

How to Deploy a Subnet on Avalanche Blockchain: The Case of DeFi Kingdom

Blockchain

automation, security, cybersecurity

How to Implement a Security Testing Program For Web Applications

Cybersecurity

Related articles

  • Inertia: make modern SPAs with Laravel and Javascript frameworks
  • A Quick Guide to NextJS
  • Micro Frontends: the Future of Web Development?
  • Headless Architecture: Everything you Need to Know
  • Front-end Refactoring for Performance Improvement
  • How Micro-Frontend Architecture Improves Team Management and the Developer Experience
  • How‌ ‌to‌ ‌Deploy‌ ‌Faster‌ ‌and‌ ‌More‌ ‌Precise‌ ‌UI‌ Tests‌
  • Reactive Forms in Angular
  • Front-end development with Angular & NgRx
  • Nexi Dev Training Program: an attendee’s experience

Footer

  • Magazine
  • Events
  • Community
  • Learning
  • Kids
  • How to use our platform
  • Contact us
  • Become a contributor
  • About Codemotion Magazine
  • How to run a meetup
  • Tools for virtual conferences

Follow us

  • Facebook
  • Twitter
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

DOWNLOAD APP

© Copyright Codemotion srl Via Marsala, 29/H, 00185 Roma P.IVA 12392791005 | Privacy policy | Terms and conditions

  • Magazine
  • Events
  • Community
  • Learning
  • Kids
  • How to use our platform
  • Contact us
  • Become a contributor
  • About Codemotion Magazine
  • How to run a meetup
  • Tools for virtual conferences

Follow us

  • Facebook
  • Twitter
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

DOWNLOAD APP

CONFERENCE CHECK-IN