Jobsen LESS WEB DEVELOPMENT ESSENTIALS

Use CSS preprocessing to streamline the development and maintenance of your web applications
1. Auflage 2025
ISBN: 978-1-78398-147-2
Verlag: De Gruyter
Format: PDF
Kopierschutz: Adobe DRM (»Systemvoraussetzungen)

E-Book, Englisch, 202 Seiten

Less is a CSS preprocessor that essentially improves the functionality of simple CSS with the addition of several features. The book begins by teaching you how Less facilitates the process of web development. You will quickly then move on to actually creating your first layout using Less and compiling your very first Less code.
Next, you will learn about variables and mixins and how they will help in building robust CSS code. In addition, you'll learn how to keep your code clean and test it by using style guides. We will then move on to the concept of Bootstrapping and the strength of using Less with Twitter Bootstrap. Going one step further, you will be able to customize Twitter's Bootstrap 3 using Less.
Finally, you will learn how to integrate Less into your WordPress themes and explore other web apps that use Less. By leveraging this powerful CSS preprocessor, you will be able to consistently produce amazing web applications while making CSS code development an enjoyable experience.

Autoren/Hrsg.

Jobsen, Bass

Fachgebiete

• Mathematik | Informatik EDV | Informatik EDV & Informatik Allgemein

Leseproben

Chapter 1. Improving Web Development with Less

It is impossible to imagine modern web design without CSS. With CSS3, web designers are able to rely on advanced functions such as gradients, transitions, and animations. On the other hand, CSS code becomes more complex and difficult to maintain. is a CSS preprocessor that extends CSS with modern programming-language concepts. Less enables you to use variables, functions, operations, and even rule or selector nesting while coding your CSS. helps you write CSS with the Don't Repeat Yourself (DRY) principle. The DRY principle prevents you from repeating any kind of information in your code.

This chapter will cover the following topics:

• Introduction to CSS3
• Compiling Less into CSS
• Vendor-specific rules
• CSS3 rounded corners, animations, and gradients
• Using box-sizing border-box
• Server-side compiling and using GUI

Using CSS3 for styling your HTML

In web design, you will use HTML to describe the structure of your documents and CSS language to describe their presentation, including fonts, colors, and layout. The current standard HTML5 and CSS3 versions work on most modern browsers and mobile devices. CSS3 extends the old CSS with other new selectors, text effects, background gradients, and animations. The power of CSS3, the new functionalities, and high acceptance on mobile devices using HTML5 and CSS3 make them the standard for modern web design. The combination of HTML5 and CSS3 is ideal for building responsive websites because of their high acceptance on mobile phones (and other devices).

Together, HTML5 and CSS3 introduce many new features. You will be shown the ones that are the most significant when learning about their concepts within this book.

Using CSS Selectors to style your HTML

With (and CSS), you can style your HTML code using selectors. CSS selectors are patterns or names that identify which HTML elements of the web page should be styled. CSS selectors play an important role in writing code.

For , the selector here is . Selectors don't refer exclusively to one element. They can point to more than one element and different ones can refer to the same element. For instance, a single selector refers to all the , including the with a class. In the case of conflicts, cascade and specificity determine which styles should be applied. When writing code, we should keep the aforementioned rules in mind. makes it easier to write complex CSS without changing how your website looks. It doesn't introduce any limitations on your final CSS. With , you can edit well-structured code instead of changing the effect of the final CSS.

CSS3 introduces many new and handy selectors. One of them is , which makes it possible to style, for example, every fourth paragraph's tag in an HTML document. Such selectors add powerful functions to CSS3. Now we are able to perform operations with CSS alone, whereas, in the past we needed JavaScript or hardcoded styles (or classes at the very least). Again, this is one of the reasons to learn . Powerful selectors will make CSS more important, but CSS code also becomes cumbersome and difficult to maintain. will prevent this problem in CSS, even making complex code flexible and easy to maintain.

Note

Please visit https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#Selectors for a complete list of CSS selectors.

Specificity, Inheritance, and Cascade in CSS

In most cases, many CSS styles can be applied on the same HTML element, but only one of them will win. describe the rules for which CSS styles get the most precedence and will ultimately be applied. You can find these specifications in the following section.

The rules regarding the order of importance have not significantly changed with CSS3. They are briefly mentioned to help you understand some of the common pitfalls with /CSS and how to solve them. Sooner or later, you will be in a situation where you're trying to apply a CSS style to an element, but its effect stays invisible. You will reload, pull out your hair, and check for typos again and again, but nothing will help. This is because in most of these cases, your style will be overruled with another style that has a higher precedence.

The global rules for Cascade in CSS are as follows:

• Find all the CSS declarations that apply to the element and property in question.
• Inline styles have the highest precedence, except for . The statement in CSS is a keyword used to add weight to a declaration. The statement is added at the end of a CSS property value. After this, check who set the declaration; styles set by the author get a higher precedence than the styles defined by the user or browser (default). Default means the styles are set by the web browser, author styles are defined by CSS in the web page, and user styles are set by the user via the settings of his or her web browser. The importance of the user is higher than the default, and the code with the statement (see Chapter 2, for its meaning in ) will always get the highest precedence. Note that browsers such as Firefox have options to disable pages in order to use other alternatives to user-defined fonts. Here, the user settings overrule the CSS of the web page. This way of overruling the page settings is not part of the CSS precedence unless they are set using .
• Calculate the specificity, which is discussed in the following section.
• If two or more rules have the same precedence and specificity, the one declared last wins.

As a /CSS designer, you will be making use of the calculated CSS specificity in most cases.

How CSS specificity works

Every CSS declaration gets a specificity, which will be calculated from the type of declaration and the selectors used in its declaration. Inline styles will always get the highest specificity and will always be applied (unless overwritten by the first two Cascade rules). In practice, you should not use inline styles in many cases as it will break the DRY principle. It will also disable you from changing your styles on a centralized location only and will prevent you from using for styling.

An example of an inline style declaration is shown as follows:

After this, the number of IDs in the selector will be the next indicator to calculate specificity. The selector has 2 IDs, the selector has 1 ID, and so on.

Tip

Note that in this case, an ID is a unique selector starting with ; the selector for the same HTML element counts as an attribute. This means that has 1 ID and has 0 IDs and 1 attribute.

If the number of IDs for two declarations is equal, the number of classes, pseudo classes, and attributes of the selector will be of importance. Classes start with a dot. For example, is a class. Pseudo classes, such as and , start with a colon, and attributes, of course, are , , , and so on.

The selector scores 2 (1 class and 1 pseudo class) and the selector scores 3 (2 classes and 1 pseudo class).

If this value is equal for both declarations, we can start counting the elements and pseudo elements. The latest variable will be defined with a double colon () . Pseudo elements allow authors to refer to otherwise inaccessible information, such as . The following example shows you how that works.

The selector scores 2 (2 elements) and the selector scores 3 (3 elements).

You should now know what to do when your style isn't directly applied. In most cases, make your selector more specific to get your style applied. For instance, if doesn't work, then you can try adding a ID, a class, and so on.

When Cascade and...

Über Autor(innen)

Jobsen Bass :

Bass Jobsen has been programming the web since 1995, ranging from C to PHP. He has a special interest in the processes between designer and programmer. He works on the accessibility of Bootstrap and his JBST WordPress starters theme. With over 5 years of experience with Bootstrap, Bass has been actively contributing to the community with his blogs and Git repos.