Everand Logo

Welcome to Everand!

  • Discover millions of ebooks, audiobooks, and so much more with a free trial

    From $11.99/month after trial. Cancel anytime.

    Architecting CSS: The Programmer’s Guide to Effective Style Sheets
    Architecting CSS: The Programmer’s Guide to Effective Style Sheets
    Architecting CSS: The Programmer’s Guide to Effective Style Sheets
    Ebook339 pages2 hours

    Architecting CSS: The Programmer’s Guide to Effective Style Sheets

    By Martine Dowden and Michael Dowden

    ()

    Read preview

    About this ebook

    ​Leverage various CSS features in combination with popular architectures in order to bring your style sheets back under your control. While CSS is the primary technology used for building beautiful web user interfaces, the style sheet files themselves are often quite ugly; left chaotic and unstructured through lack of a consistent architectural approach. By addressing the structure of your style sheets in the same way that you do with code, see how it is possible to create style rules that are clean and easy to read. Dig deep into CSS fundamentals and learn how to use the available selectors to build powerful rules.

    You will learn how to use cascading, inheritance, pseudo-classes, pre-processors, and components to produce cleaner, DRY-er style sheets, and how to let these features work for you instead of leading you down the road of rule duplication and design inconsistencies. Embrace the clean, semantic HTML to make your code easier to read, while supporting accessibility andassistive technologies.

    Separate the concerns of layout and style to simplify dynamic theming and white labeling, making you a marketing hero. Once you've finished this book you will have an advanced knowledge of CSS structures and architectural patterns that will take the pain out of style sheets for you (and your coworkers), and help you implement designs faster and easier than ever before.

    What You'll Learn

    • Understand the core CSS fundamentals of Inheritance, Cascading, and Specificity
    • Work with architecture and design patterns for better organization and maintenance
    • Maximize code reuse with CSS precompilers
    • Review the strengths and weaknesses of popular architecture patterns

    Who This Book Is For

    Primarily for front-end web developers and UI designers and anyone who works with CSS, particularly if they find it cumbersome and inelegant. It’s also suitable for software architects and tech leads who are responsible for the maintainability of their code base.

     

    LanguageEnglish
    PublisherApress
    Release dateMay 15, 2020
    ISBN9781484257500
    Architecting CSS: The Programmer’s Guide to Effective Style Sheets
    Author

    Martine Dowden

    An award winning CTO, UX/UI designer and developer, international speaker, and author, Martine Dowden focuses on web interfaces that are beautiful, functional, accessible, and usable. She has worked as an developer, artist, educator, and consultant since 2005. Martine has been awarded the Microsoft MVP award and Google Developer Expert in both the Web Technologies and Angular categories.

    Read more from Martine Dowden

    Related to Architecting CSS

    Related ebooks

    Internet & Web For You

    View More
    View More

    Related podcast episodes

    Related articles

    • UNLIMITED

      Rise Of The Robots

      Jan 12, 2021

      Rise Of The Robots
      7 min read

    • UNLIMITED

      EBPF To Enhance Kubernetes Monitoring

      Apr 1, 2022

      The introduction of Docker and Kubernetes has brought a dramatic revolution in the IT industry. Unlike the traditional methods of developing and deploying software, Kubernetes or K8s uses scaling and automated deployment. Thanks to the Linux function

      4 min read

    • UNLIMITED

      What Is The Future Of Game Streaming Now That Stadia Is Dead?

      Oct 31, 2022

      Once hyped as being ‘the future of gaming’, the Google Stadia game streaming service was officially, just three years after launch and before even making it to Australian shores. When game streaming first launched we did have some apprehension about

      2 min read

    • UNLIMITED

      Create Dashboards

      Sep 17, 2024

      Create Dashboards
      5 min read

    • UNLIMITED

      Jump to LineageOS

      Feb 7, 2023

      Jump to LineageOS
      5 min read

    • UNLIMITED

      Code An Admin Back-end In Django

      Dec 13, 2022

      Credit: www.djangoproject.com OUR EXPERT Matt Holder has been a fan of the open source methodology for over two decades and uses Linux and other tools where possible. More featurepacked source code for this project can be downloaded from https://

      6 min read

    • UNLIMITED

      Types Of Databases

      Aug 27, 2019

      NoSQL databases provide the performance, scalability and stability that’s required by the modern data-driven apps we interact with these days. But that is where the similarity between NoSQL systems end. In fact, it wouldn’t be wrong to say that the o

      1 min read

    • UNLIMITED

      Basic Concepts

      Jul 2, 2019

      A messaging system such as Kafka enables you to send messages between processes, applications and servers. Applications connect to Kafka to send or get data. Strictly speaking, a Kafka ‘topic’ is a unit of storage in Kafka: data in Kafka is stored in

      1 min read

    • UNLIMITED

      Route Traffic Between Networks Using A Pi

      Jun 2, 2020

      A deep-dive into Pi networking solutions resulted in this tutorial. The goal was to uncover a Pi configuration that would enable the routing of network traffic from a wired network to a wireless network. The aim is to build a network router using a R

      10 min read

    • UNLIMITED

      Text Docs To Rich Docs

      Dec 17, 2019

      Text Docs To Rich Docs
      6 min read

    • UNLIMITED

      Calculate Linux 22

      Jan 11, 2022

      Calculate Linux 22
      2 min read

    • UNLIMITED

      Browser Fingerprinting

      Feb 8, 2022

      Browser Fingerprinting
      1 min read

    • UNLIMITED

      LXF’s NEW $HOME

      Jun 1, 2021

      LXF’s NEW $HOME
      7 min read

    • UNLIMITED

      Your First Steps In Grafana

      Nov 17, 2020

      The easiest way to get hold of Grafana and begin using it as soon as possible is by downloading and executing its official Docker image. This means that apart from the Docker image, you won’t need to download, set up or install anything else for Graf

      1 min read

    • UNLIMITED

      Tpm Exposed

      Apr 18, 2022

      Tpm Exposed
      9 min read

    Related categories

    Reviews for Architecting CSS

    0 ratings

    0 ratings0 reviews

    What did you think?

    Tap to rate

    Review must be at least 10 words

      Book preview

      Architecting CSS - Martine Dowden

      © Martine Dowden and Michael Dowden 2020

      M. Dowden, M. DowdenArchitecting CSShttps://doi.org/10.1007/978-1-4842-5750-0_1

      1. Cascading Style Sheets

      Martine Dowden¹  and Michael Dowden¹

      (1)

      Brownsburg, IN, USA

      This book on Cascading Style Sheets (CSS) takes a very different approach from most. It isn’t trying to teach you how to design web pages and, aside from a cursory overview, isn’t focused on teaching you how to use CSS. This chapter introduces the focus of this book, which is how (and why) to treat CSS as a programming language.

      Classification

      Cascading Style Sheets (CSS) are a web technology that allows layout, theme, and style to be applied to a document. In most common cases the document in question is a Hypertext Markup Language (HTML) file and the rendering is performed by a web browser.

      Often CSS is seen as a design tool since it allows the author or designer of a web page to determine the visual look of that page. Because of its control over the final look of a web page, CSS has a direct impact on both usability and accessibility. Due to these factors, creating style sheets and writing CSS are sometimes assumed to be design tasks, and it may be the designer on a software team who is tasked with maintaining the style sheets.

      It’s interesting to note that before CSS became the dominant styling language of the Web, there were a number of other competing proposals. However,

      CSS had one feature that distinguished it from all the others: It took into account that on the Web, the style of a document couldn’t be designed by either the author or the reader on their own, but that their wishes had to be combined, or cascaded, in some way; and, in fact, not just the reader’s and the author’s wishes, but also the capabilities of the display device and the browser.¹

      At its core, then, CSS puts control in the hands of both authors and readers. This makes it somewhat interactive and subjects it to the will of the reader of a web page, since they are able to influence the final look of a page based upon their own preferences. Most often when author intent meets the end-user influence to create a unique hybrid output, this is known as programming. So this begs the question: Exactly what is CSS? Should writing style sheets be considered programming, and should those who write CSS be considered programmers?

      For starters, just like popular programming languages such as JavaScript and Python, CSS is a language. As shown in the Structure section, CSS has a specific syntax that must be followed and the rules you write cause actions to be performed. Additionally, the WorldWideWeb Consortium (W3C) refers to CSS as a language.²

      One measure of a programming language is to ask if it is Turing complete. Skipping the formal definition, the simple explanation of a Turing complete language is one that can solve any arbitrary computation. Note that this isn’t a strict requirement and there are some very useful programming languages that are not Turing complete, most notably Structured Query Language (SQL) and Regular Expressions (RegEx). However, if a language can be shown to be Turing complete, it should remove all doubt about its classification. The combination of CSS + HTML has received the formal proof necessary to be classified as Turing complete.³

      This means that CSS + HTML meets the requirements for any general-purpose programming language, and that writing CSS and HTML counts as programming. This means that you are most definitely a programmer (or web developer, if you prefer).

      Language Features

      Despite the classification of CSS as a programming language, we can probably agree that using CSS + HTML for general programming tasks wouldn’t be particularly convenient. That is because this really isn’t the point of CSS (or HTML).

      Regardless, there are many interesting features of the language that are similar to more traditional programming languages, including

      Variables

      Functions

      Calculations

      Imports

      Scope

      Comments

      Polymorphism

      When utilizing CSS precompilers, you gain access to even more programming language features, such as

      Mixins

      Extension

      Namespaces

      List and map data structures

      Mathematical expressions

      See Chapter 2 for a more in-depth exploration of the CSS language features and Chapter 7 for more on CSS precompilers.

      Structure

      It is important to note that CSS is a declarative language rather than an imperative one. This means that rather than writing code that tells a web browser how to apply styles to a page, we instead tell the browser what styles to apply and where to apply them. These declarations are called rulesets in the specification, but may be referred to simply as rules.

      Each rule in CSS is comprised of one or more selectors and one or more declarations, as shown in Figure 1-1.

      ../images/487079_1_En_1_Chapter/487079_1_En_1_Fig1_HTML.png

      Figure 1-1

      CSS Ruleset

      Each declaration is made up of a property-value pair. As of this writing, the CSS Working Group listed 564 possible properties. Each property must be supported by the user agent (typically a web browser) for it to have any effect. Unsupported properties are simply ignored.

      Rulesets may be further grouped and modified by at-rules such as @media or @supports and are collected into style sheets. A style sheet is simply a text file with a .css extension that contains any number of rules which describe the presentation of a document or web page.

      Software Architecture

      Once we accept that CSS has all the sophistication of a programming language, we need to accept the implication that we must treat style sheets like code. This means that we can take advantage of many principles, best practices, and design patterns of software architecture and apply them when writing CSS.

      Note

      You may find the term software architecture used interchangeably with the term software design. This is common within the industry and both terms refer to the same high-level design thinking and process methodology. Since CSS is often used for visual design, we chose the term architecture throughout this book to avoid any confusion between these concepts.

      Software architecture looks at the structure and components of a system and weighs the pros and cons of various possible combinations and approaches. The strengths, weaknesses, and limitations of various systems and approaches should all be considered. The architect’s approach is much more of the high-level bird’s-eye view than a developer’s (although often the same person will do both).

      For example, if you wanted to animate an image moving across the page when a button is clicked, how would you implement that functionality? Would you use CSS or JavaScript? Would you use an element, Scalable Vector Graphics (SVG) , or Canvas? Which will yield the smoothest visual animation? Which approach will be the easiest to maintain when requirements change? These are the types of questions that software architecture attempts to evaluate.

      You do not have to start from scratch when making these types of decisions. There are some well-established principles of software architecture and best practices that can guide you on your journey to more strategic decision making with regard to CSS.

      Separation of Concerns

      The term separation of concerns is credited to Edsger Dijkstra⁴ and refers to the idea that it is very helpful for us to focus on one aspect of a problem at a time. As shown later in the Web Architecture section, a web application separates content, style, and actions and even uses different technologies for each of these concerns.

      Looking at separation of concern as it pertains to CSS, what are some of the concerns we might find in a ruleset? As shown in Figure 1-2, we see that layout, theme, typography, and interaction are all aspects of a web page that can be controlled using CSS. See Figure 1-2.

      ../images/487079_1_En_1_Chapter/487079_1_En_1_Fig2_HTML.png

      Figure 1-2

      CSS Areas of Concern

      Now, let’s say you have a style sheet with 20,000 rulesets. This is clearly unmanageable and these rulesets need to be split into multiple files. How do you determine how many files you need and which rulesets go into each file? One approach is to split files based upon concern (e.g., layout vs. theme), while another approach would be to group rulesets based upon the specific components to which they apply. This question is quite fundamental to the discussion of different CSS architecture models in Chapter 10.

      Two of the most widely accepted principles of software architecture, cohesion and coupling, serve to better define the idea of separation of concerns. These metrics were first published in Structured Design⁵ and have since become standards in software engineering.

      Cohesion

      Cohesion can be described as a measure of responsibility. It is a qualitative measure of the breadth of different tasks or effects a given unit of code is responsible for and the nature of the relationship between those tasks or effects. Traditionally there are seven levels of cohesion ranked from coincidental (worst) to functional (best).

      Another popular principle that is related to cohesion is the single responsibility principle (SRP) . The idea is that every function and module should have just one responsibility. There are two important goals that derive from this:

      1.

      Lack of side effects– If a function does just one thing, then there is little risk of side effects or unintended consequences from its use.

      2.

      Only one reason to change– Every time code changes, it increases the risk of introducing errors and bugs. If we reduce the number of changes, we can diminish risk. Additionally, this helps avoid side effects from system-wide change.

      The goals of both cohesion and single responsibility are to promote simplicity and reduce risk, which are important goals for all of our architectural decisions.

      Coupling

      Coupling describes the interdependence between two or more units of code. Loose coupling is associated with good cohesion and generally describes a module with good reusability that may be updated independently of other modules with minimal impact on the overall system. This is an important attribute of robust and flexible systems.

      Tight coupling is associated with poor cohesion and describes modules that are hard to test or modify independently. Such modules generally cannot be reused freely and may require larger testing efforts when changed. Favor looser coupling whenever possible.

      When building web applications, we will find a lot of value in decreasing the coupling between content and design. Ideally we should be able to create style sheets that work for a wide range of content without adjustment. When we achieve this, we may say we have orthogonality.

      Orthogonality

      While an important and common term when discussing system design, the word orthogonality has accumulated some disfavor in recent years. This is likely due to a combination of misuse and poor definitions leading to it sometimes being described as technobabble.⁶ However, orthogonality is an important concept that is directly related⁷ to cohesion and coupling, and it will factor into many decisions we discuss later in this book.

      Orthogonality describes a relationship that is cooperative without being codependent, where two things work together toward a common goal while maintaining a level of independence.

      In mathematics the simplest form of orthogonality of two vectors is when they are perpendicular to each other, meaning they form a right angle and intersect only once. Orthogonality can also be described as statistical independence, meaning two (or more) factors that vary without being influenced by one another

      Taken into computer software, we use orthogonality to describe a relationship between two modules or components that are able to change independently of one another. For example, an HTML page may be considered orthogonal to its CSS if we’re able to edit an HTML file to change the content and/or structure of the page with no corresponding change to the CSS, but the visual design of the page remains unaffected after the change.

      In fact, this separation of concerns between document layout and structure is one of the original design considerations behind

      Enjoying the preview?
      Page 1 of 1